jQuery中zTree树插件怎么用

这篇文章主要介绍jQuery中zTree树插件怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

静态zTree开发流程

引入资源

<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>

html元素

<div>  <ul id="treeDemo" class="ztree"></ul> </div>

JS方式一-简单json数据格式

<SCRIPT type="text/javascript">   <!--   var setting = {    data: {     simpleData: {      enable: true     }    }   };   var zNodes =[    { id:1, pId:0, name:"父节点1 - 展开", open:true},    { id:11, pId:1, name:"父节点11 - 折叠"},    { id:111, pId:11, name:"叶子节点111"},    { id:112, pId:11, name:"叶子节点112"},    { id:113, pId:11, name:"叶子节点113"},    { id:114, pId:11, name:"叶子节点114"},    { id:12, pId:1, name:"父节点12 - 折叠"},    { id:121, pId:12, name:"叶子节点121"},    { id:122, pId:12, name:"叶子节点122"},    { id:123, pId:12, name:"叶子节点123"},    { id:124, pId:12, name:"叶子节点124"},    { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},    { id:2, pId:0, name:"父节点2 - 折叠"},    { id:21, pId:2, name:"父节点21 - 展开", open:true},    { id:211, pId:21, name:"叶子节点211"},    { id:212, pId:21, name:"叶子节点212"},    { id:213, pId:21, name:"叶子节点213"},    { id:214, pId:21, name:"叶子节点214"},    { id:22, pId:2, name:"父节点22 - 折叠"},    { id:221, pId:22, name:"叶子节点221"},    { id:222, pId:22, name:"叶子节点222"},    { id:223, pId:22, name:"叶子节点223"},    { id:224, pId:22, name:"叶子节点224"},    { id:23, pId:2, name:"父节点23 - 折叠"},    { id:231, pId:23, name:"叶子节点231"},    { id:232, pId:23, name:"叶子节点232"},    { id:233, pId:23, name:"叶子节点233"},    { id:234, pId:23, name:"叶子节点234"},    { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}   ];   $(document).ready(function(){    $.fn.zTree.init($("#treeDemo"), setting, zNodes);   });   //-->  </SCRIPT>

JS方式二-标准json数据格式

<SCRIPT type="text/javascript">   <!--   var setting = { };   var zNodes =[    { name:"父节点1 - 展开", open:true,     children: [      { name:"父节点11 - 折叠",       children: [        { name:"叶子节点111"},        { name:"叶子节点112"},        { name:"叶子节点113"},        { name:"叶子节点114"}       ]},      { name:"父节点12 - 折叠",       children: [        { name:"叶子节点121"},        { name:"叶子节点122"},        { name:"叶子节点123"},        { name:"叶子节点124"}       ]},      { name:"父节点13 - 没有子节点", isParent:true}     ]},    { name:"父节点2 - 折叠",     children: [      { name:"父节点21 - 展开", open:true,       children: [        { name:"叶子节点211"},        { name:"叶子节点212"},        { name:"叶子节点213"},        { name:"叶子节点214"}       ]},      { name:"父节点22 - 折叠",       children: [        { name:"叶子节点221"},        { name:"叶子节点222"},        { name:"叶子节点223"},        { name:"叶子节点224"}       ]},      { name:"父节点23 - 折叠",       children: [        { name:"叶子节点231"},        { name:"叶子节点232"},        { name:"叶子节点233"},        { name:"叶子节点234"}       ]}     ]},    { name:"父节点3 - 没有子节点", isParent:true}   ];   $(document).ready(function(){    $.fn.zTree.init($("#treeDemo"), setting, zNodes);   });   //-->  </SCRIPT>

异步zTree加载

前面的配置相同,在此不再阐述.主要是js不同.

异步JS

var setting = {  //可勾选  check: {    enable: true   },  data : {   simpleData : {    enable : true   }  } };  function initTree(){   var payFreq = $("#payFreq").val();   var fyType = $('#fyType').val();   var setHzType = $('#setHzType').val();   $.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"), setting, json);   var zTree = $.fn.zTree.getZTreeObj("treeDemo");   //全部展开   zTree.expandAll(true);   //Y代表勾选时,N代表取消勾选 p代表父节点,s代表字节点   setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };  }

java代码

Controller层

@RequestMapping("initTree")  @ResponseBody  public DataMessage initTree(String setHzType,String payFreq,String fyType){   params.put("setHzType", setHzType);   params.put("fyType", fyType);   params.put("fkmattr_xt", fkmattr_xt);   //获取treeinfo列表   List<TreeInfo> treeInfos = feeTransferService.initTree(params);   return DataMessage.successData(treeInfos);  }

tree实体类

public class TreeInfo {  private String id;  private String pid;  private String name;  private String isParent;  }

以上是“jQuery中zTree树插件怎么用”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！