`

zTree加载无限极

 
阅读更多

/***********************前端css********************************/

<style>
.ztree *{
font-family:"微软雅黑";
font-size:14px;
}
.ztree li span.button.pIcon_ico_open{margin-right:2px; background: url('<%=basePath%>resources/app/images/pIcon.png') no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.pIcon_ico_close{margin-right:2px; background: url('<%=basePath%>resources/app/images/pIcon.png') no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

.ztree li span.button.subIcon_ico_open, .ztree li span.button.subIcon_ico_close{margin-right:2px; background: url('<%=basePath%>resources/app/images/subIcon.png') no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

.ztree li span.button.pIcon_ico_docu{margin-right:2px; background: url('<%=basePath%>resources/app/images/pIcon.png') no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.subIcon_ico_docu{margin-right:2px; background: url('<%=basePath%>resources/app/images/subIcon.png') no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
</style>

/********************************前端js**********************/

var setting;
var selectedTreeId="";
var treeObj;

$(document).ready(function(){

var url="<%=basePath %>v/uc/user/getJsonSort";
    $.getJSON(url, function (zNodes){
        zNodes = "["+zNodes+"]";
        treeObj = $.fn.zTree.init($("#treeDemo"), setting, eval('('+zNodes+')'));
    });
    var ajaxUrl = "";
    setting= {
            async: {
                enable: true,
                url:function(){
                    return ajaxUrl;
                }
            },
            view: {
                showIcon: showIconForTree
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick:loadList,
                beforeExpand: function(treeId, treeNode) {
                    ajaxUrl = "<%=basePath %>v/uc/user/getSubJsonSort?code="+treeNode.id;
                }
            }   
    };
function showIconForTree(treeId, treeNode) {
    return treeNode.level != 2;
};
function loadList(event, treeId, treeNode,clickFlag) {
    selectedTreeId = treeNode.id;
    $("#list").setGridParam({
            postData:{orgn:treeNode.id}
      }).trigger("reloadGrid");
};

});

/*************************************后台拼接json***********/

@RequestMapping("getJsonSort")
    @ResponseBody
    public String getJsonSort(String code){
        /*String basePath = SystemPropertyGetUtil.getResource("config").getString("system.url.base");
        String pIconPath=basePath+"resources/app/images/subIcon.png";*/
        StringBuilder sb = new StringBuilder();
        List<SMTableZZJG> topList = orgnService.getTopOrgn();
        for(int i=0;i<topList.size();i++){
            SMTableZZJG top = topList.get(i);
            sb.append("{");
            sb.append("id:'"+top.getField000()+"'");
            sb.append(",pId:'"+top.getField003()+"'");
            sb.append(",name:'"+top.getField001()+"'");
            List<SMTableZZJG> subList = orgnService.getSubOrgn(top.getField000());
            sb.append(",iconSkin:'pIcon'");
            if(subList.size()>0)
            {//如果有子集,则保证打开,方便前端expand使用
                sb.append(",isParent:true");
            }
            else
            {
                sb.append(",isParent:false");
            }
            sb.append("},");
        }
        String str = sb.toString().substring(0, sb.toString().length()-1);
        return str;
    }

 

分享到:
评论

相关推荐

    java实现ztree异步加载

    ZTree的一个显著特性是支持异步加载,这意味着它可以在用户需要时按需加载子节点,减少了初次加载时的数据量,提高了页面响应速度。本文将详细讲解如何使用Java来实现ZTree的异步加载功能。 首先,我们需要理解...

    Ztree无限极树

    【Ztree无限极树】是一种基于JavaScript的可扩展的树形菜单组件,广泛应用于Web开发中,用于构建具有层级结构的界面元素。它以其高效、灵活和强大的功能著称,支持无限级节点展开,适用于展示复杂的组织结构或者分类...

    zTree异步加载子节点针对大数据量数列表

    最近项目中有一个比较大型的树节点加载,网上面也看过一些解决方案,感觉都不是很好,也有很多误区,比如单击节点时加载子...ztree fileter方法是在每次展开时都会执行,所以根据不同的请求达到异步加载子节点的需求。

    ztree加载完成后显示勾选节点的实现代码

    zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 介绍 zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合...

    jquery ztree 异步加载

    ### jQuery ZTree异步加载详解 #### 一、概述 jQuery ZTree插件是一款功能强大的树形控件,被广泛应用于Web开发中,用于展示层级结构数据。在大数据量的场景下,同步加载所有节点数据可能会导致页面加载缓慢,用户...

    异步&同步加载树节点----zTree(一)

    本篇我们将深入探讨“异步&同步加载树节点”这一主题,以zTree为例,解析其实现机制和优势。 首先,我们要理解什么是同步和异步加载。同步加载是指浏览器在执行代码时,如果遇到一个耗时的操作(如加载大量数据),...

    ztree异步加载demo(有说明文档)

    【标题】"ztree异步加载demo(有说明文档)" 涉及到的知识点主要围绕着ZTree,这是一个非常流行的JavaScript组件,主要用于构建树形结构的界面,尤其适用于网站导航、文件目录管理和组织结构展示等场景。异步加载是...

    jQuery zTree加载树形菜单功能

    zTree支持JSON数据格式,可以静态加载或通过Ajax异步加载节点数据,这为动态更新和实时数据同步提供了可能。它还允许自定义皮肤和图标,通过CSS实现视觉风格的多样化。zTree的另一大亮点是其灵活的checkbox和radio...

    ztree异步加载

    ZTree的异步加载机制是其核心功能之一,它的主要思想是按需加载,即在用户滚动、展开节点或进行其他操作时,只加载当前需要显示的子节点,而不是一次性加载所有数据。这种方式极大地提高了页面的加载速度,减少了...

    jquery ztree 异步动态加载

    **jQuery ZTree 异步动态加载详解** 在Web开发中,数据展示往往涉及到大量信息的处理,特别是树形结构的数据。jQuery ZTree是一款强大的JavaScript组件,用于构建具有丰富交互效果的树状菜单或树形控件。在面对大...

    zTree异步加载Demo

    【zTree异步加载Demo】是一个基于SpringMVC框架和MySQL数据库实现的示例,它展示了如何使用zTree这一流行的JavaScript树形插件进行异步数据加载。zTree是一款功能强大的jQuery插件,广泛用于构建多级目录结构,如...

    zTree异步加载简单示例VS2008项目完整源码

    这个"zTree异步加载简单示例VS2008项目完整源码"是针对开发人员的一个实用资源,提供了如何在Visual Studio 2008环境下实现zTree异步加载功能的具体代码实例。 异步加载(Async Loading)是zTree的核心特性之一,它...

    使用 zTree 动态加载树形菜单

    zTree是一款基于JavaScript的开源树形插件,它能够帮助开发者轻松实现动态加载、多选、异步数据加载等功能。本文将深入探讨如何使用zTree来动态加载树形菜单,同时也会提及一些相关的核心知识点。 首先,zTree的...

    Ztree异步分批加载demo

    一个Ztree异步分批加载demo,只有前台代码,后台只需要提供分页查询,然后页码自动增长即可。

    使用ztree异步加载全国地区。

    在你提到的场景中,"使用ztree异步加载全国地区"是一种优化用户体验的有效方法。zTree是一款非常流行的jQuery插件,主要用于实现树形结构的展示和操作,尤其适用于处理大量数据的场合。 首先,我们来详细了解一下...

    ztree的异步加载实现jfinal

    ztree的异步加载实现jfinal,希望可以帮到你

    ZTree学习(二):异步加载树结构 - CSDN博客1

    **ZTree 异步加载树结构详解** ZTree 是一款基于 jQuery 的强大的树形插件,广泛应用于构建具有层级关系的列表。在处理大量数据时,为了提高用户体验,避免一次性加载所有节点导致页面卡顿,我们可以采用异步加载...

Global site tag (gtag.js) - Google Analytics