今天项目用到了权限管理展开按钮连带父节点和子节点相互关联的功能，在网上搜了搜看了ztree.js还不错，分享出来

1、首先，先用用css和js

<link rel="stylesheet" href="../../css/common/base.css" /> <link rel="stylesheet" href="../../libs/zTreeStyle/zTreeStyle.css" />

<link rel="stylesheet" href="../../css/control.css" /> <script src="../../libs/jquery.min.js"></script>

<script src="../../libs/jquery.ztree.core.min.js"></script> <script src="../../libs/jquery.ztree.excheck.min.js"></script>

2、html

   存放插件的div

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

3、js

实例化一个对象

     <script> var setting = { check: {

//复选框打开 enable: true, //关联父节点 chkboxType : { "Y" : "ps", "N" : "ps" } }, data: { simpleData: { enable: true } } }; var zNodes =[ { id:1, pId:0, name:"超级管理员"}, { id:11, pId:1, name:"管理员"}, { id:111, pId:11, name:"渠道商"}, { id:112, pId:11, name:"客户"}, { id:12, pId:1, name:"用户"}, { id:121, pId:12, name:"随意勾选 1-2-1"}, { id:122, pId:12, name:"随意勾选 1-2-2"}, // { id:2, pId:0, name:"随意勾选 2", checked:true, open:true}, { id:21, pId:2, name:"随意勾选 2-1"}, { id:22, pId:2, name:"随意勾选 2-2", open:true}, { id:221, pId:22, name:"随意勾选 2-2-1"}, { id:222, pId:22, name:"随意勾选 2-2-2"}, { id:23, pId:2, name:"随意勾选 2-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 + '" };'); } function showCode(str) { if (!code) code = $("#code"); code.empty(); code.append("<li>"+str+"</li>"); } $(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); }); </script>

4、效果图如下