前言
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 支持静态 和 Ajax 异步加载节点数据. 在开发中我们常需要用到树状的展示.
静态zTree开发流程
引入资源
JS方式二-
标准json数据格式<div class="jb51code">
<pre class="brush:js;">
<SCRIPT type="text/javascript">
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 支持静态 和 Ajax 异步加载节点数据. 在开发中我们常需要用到树状的展示.
引入资源
<div class="jb51code">
<pre class="brush:js;">
<SCRIPT type="text/javascript">
前面的配置相同,在此不再阐述.主要是js不同.
异步JS
$.ajax({
url : "/demo/initTree",data : {payFreq:payFreq,fyType:fyType,setHzType:setHzType
},success: function(object){
var nodes = "";
//拼接simple格式的json字符串
$.each(object.data,function(i,item) {
nodes+="{id:'"+item.id+"',pId:'"+item.pid+"',name:'"+item.name+"',isParent:'"+item.isParent+"'},";
});
var zNodes = "["+nodes+"]";
var json = eval('(' + zNodes + ')');
//console.log(json);
zTreeInit(json);
}
});
}
/ 初始化树 /
function zTreeInit(json) {
$.fn.zTree.init($("#treeDemo"),json);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//全部展开
zTree.expandAll(true);
//Y代表勾选时,N代表取消勾选 p代表父节点,s代表字节点
setting.check.chkboxType = { "Y" : "ps","N" : "ps" };
}
Controller层
tree实体类
更多实例可以参看 或参见nofollow" target="_blank" href="https://github.com/zTree/zTree_v3">zTree GitHub 里面更多的示例和说明。
原文链接:https://www.f2er.com/jquery/42694.html