快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

jQuery中zTree树插件怎么用

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

网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了泰来免费建站欢迎大家使用!

静态zTree开发流程

引入资源



html元素

 

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


  
 

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


  
 

异步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 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树插件怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


文章名称:jQuery中zTree树插件怎么用
分享地址:http://6mz.cn/article/ihdshj.html

其他资讯