jQuery树插件zTree使用方法详解

2019-11-19 16:40:56

字体：大中小

来源：转载

供稿：网友

最近要做一个树结构，就使用了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的基本方法，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：详解webpack 配合babel 将es6转成es5 超简单实例

下一篇：JavaScript数据结构学习之数组、栈与队列