jQuery树插件zTree使用方法详解

最近要做一个树结构，就使用了jQuery 的树插件，感觉还不错，做个随笔

页面的基本结构是这样的

这里的样式是使用了metroStyle文件夹里的类bootstrap风格，当然首先需要下载ztree插件，直接百度即可，下载完成后由对应的api和一些例子，这里使用的是复选框模板

jQuery  zTree树的下载链接

页面jsp如下：

<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title> ZTREE DEMO - checkbox</title>
 <link rel="stylesheet" href="/css/demo.css" rel="external nofollow" >
 <link rel="stylesheet" href="/css/metroStyle.css" rel="external nofollow" >
 <script type="text/javascript" src="/js/jquery-3.2.1.js"></script>
 <script type="text/javascript" src="/js/jquery.ztree.core.js"></script>
 <script type="text/javascript" src="/js/jquery.ztree.excheck.js"></script> 

 <script type="text/javascript" src="/js/jquery.ztree.exedit.js"></script> 

 <script type="text/javascript">
  var setting = {
   check: {
    enable: true
   },
   data: {
    simpleData: {
     enable: true
    }
   },
   callback:{
    onCheck:onCheck
   }
  }; 

//  var zNodes =[
//   { id:1, pId:0, name:"随意勾选 1", open:true},
//   { id:11, pId:1, name:"随意勾选 1-1", open:false},
//   { id:111, pId:11, name:"随意勾选 1-1-1"},
//   { id:112, pId:11, name:"随意勾选 1-1-2"},
//   { id:12, pId:1, name:"随意勾选 1-2", open:false},
//   { id:121, pId:12, name:"随意勾选 1-2-1"},
//   { id:122, pId:12, name:"随意勾选 1-2-2"},
//   { id:2, pId:0, name:"随意勾选 2", checked:false, open:false},
//   { id:21, pId:2, name:"随意勾选 2-1"},
//   { id:22, pId:2, name:"随意勾选 2-2", open:false},
//   { id:221, pId:22, name:"随意勾选 2-2-1", checked:false},
//   { id:222, pId:22, name:"随意勾选 2-2-2"},
//   { id:23, pId:2, name:"随意勾选 2-3"}, 

//   { id:3, pId:0, name:"随意勾选 3", checked:false, open:false},
//   { id:231, pId:3, name:"随意勾选 3-1"},
//   { id:232, pId:3, name:"随意勾选 3-2", open:false},
//   { id:2321, pId:232, name:"随意勾选 3-2-1", checked:false},
//   { id:2322, pId:232, name:"随意勾选 3-2-2"},
//   { id:233, pId:3, name:"随意勾选 3-3"} 

//  ]; 

  var code; 

  function setCheck() {
   var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
   py = $("#py").attr("checked")? "p":"",
   sy = $("#sy").attr("checked")? "s":"",
   pn = $("#pn").attr("checked")? "p":"",
   sn = $("#sn").attr("checked")? "s":"",
   type = { "Y":py + sy, "N":pn + sn};
   zTree.setting.check.chkboxType = type;
//   showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
//   showCode('setting.check.chkboxType = { "Y" : "", "N" : "" };');
   showCode('setting.check.chkboxType = { "Y" : "s", "N" : "ps" };'); 

//   setting.check.chkboxType = { "Y" : "", "N" : "" };
  }
  function showCode(str) {
   if (!code) code = $("#code");
   code.empty();
   code.append("<li>"+str+"</li>");
  } 

  var zNodes =[];
  $(document).ready(function(){
   var t = $("#treeDemo");
   $.ajax({
    type: "POST",
    url: "/Units/ListTree",
    dataType: 'json',
    success: function(result) {
     console.log(result);
     $.extend( true, zNodes, result );
     console.log(zNodes);
      t = $.fn.zTree.init(t, setting, zNodes);
//     demoIframe = $("#testIframe");
    }
   });
  }); 

  $(document).ready(function(){
   $.fn.zTree.init($("#treeDemo"), setting, zNodes);
   setCheck();
   $("#py").bind("change", setCheck);
   $("#sy").bind("change", setCheck);
   $("#pn").bind("change", setCheck);
   $("#sn").bind("change", setCheck); 

  }); 

  function onCheck(e,treeId,treeNode){
   var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
   nodes=treeObj.getCheckedNodes(true),
   v="";
   for(var i=0;i<nodes.length;i++){
   v+=nodes[i].name + ",";
   alert(nodes[i].id); //获取选中节点的值
   }
  } 

 </script>
</head> 

<body>
 <div class="tree" style="margin-left: 534px;background: #316ac5;width: 0px;">
  <ul id="treeDemo" class="ztree" style="background: white;height: inherit;margin-top: 295px;"></ul>
 </div>
   <input type="checkbox" id="py" class="checkbox first" checked style="display:none;" />
   <input type="checkbox" id="sy" class="checkbox first" checked style="display:none;"/>
   <input type="checkbox" id="pn" class="checkbox first" checked style="display:none;"/>
   <input type="checkbox" id="sn" class="checkbox first" checked style="display:none;"/> 

</body>
</html> 

上面的死数据替换为后台赋予的值，用的是ajax方式，当然后台需要用json方式进行交互
java代码控制器代码如下：

@Controller
@RequestMapping("/Units")
public class UnitsController{ 

 @Autowired
 private UnitsService unitsService; 

 @RequestMapping("/ListTree")
 @ResponseBody
 public List<JSONObject> ListTree(){ 

  List<JSONObject> jsonList = new ArrayList<JSONObject>();
  List<Units> zTreeAll = unitsService.zTreeAll(); 

  for (Units units : zTreeAll) {
   JSONObject json = new JSONObject();
//   { id:1, pId:0, name:"随意勾选 1", open:false}
   if(units.getUnitsId() == units.getNodeData()){ 

    JSONObject json1 = new JSONObject(); 

    json1.put("id", units.getUnitsId());
    json1.put("pId", 0);
    json1.put("name", units.getUnitsName());
    json1.put("open", false); 

    jsonList.add(json1); 

    json.put("id", -1);
    json.put("pId", units.getNodeData());
    json.put("name", units.getSectorName());
    json.put("open", false); 

   }else{ 

    json.put("id", units.getUnitsId());
    json.put("pId", units.getNodeData());
    json.put("name", units.getSectorName());
    json.put("open", false); 

   } 

   jsonList.add(json); 

  }
// for (JSONObject units : jsonList) { 

//  System.out.println(jsonList.toString()); 

// } 

  return jsonList;
 }
}

这样就可以实现所需要的树结构，ztree树是可以无限扩展的，就按照个人所需，来选择模板就可以了

jsp中的这段代码是获得当前选择值得id

function onCheck(e,treeId,treeNode){
   var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
   nodes=treeObj.getCheckedNodes(true),
   v="";
   for(var i=0;i<nodes.length;i++){
   v+=nodes[i].name + ",";
   alert(nodes[i].id); //获取选中节点的值
   }
  }

以上就是使用ztree的基本方法，希望对大家的学习有所帮助，也希望大家多多支持我们。