html页面：
首先引入zTree的css样式：
<link rel="stylesheet" type="text/css" href="plugs/ztree/metroStyle/metroStyle.css"> <style> ul.ztree { border: 1px solid #617775; width: 220px; height: 360px; overflow-y: scroll; overflow-x: auto; } </style>还有基本的js:
<script type="text/javascript" src="plugs/ztree/jquery.ztree.core.js"></script> <script type="text/javascript" src="plugs/ztree/jquery.ztree.excheck.js"></script> <script type="text/javascript" src="plugs/ztree/jquery.ztree.exedit.js"></script><div class="bg left"> <div style="float: left;"> <ul>选择：</ul> <ul id="treeDemo" class="ztree"></ul> </div> <div style="float:left;margin-left: 10%"> <ul>已选择：</ul> <ul id="treeDemo1" class="ztree" style="float: left;"></ul> </div> </div>
javascript代码：
var setting = { check: { enable: true }, data: { simpleData: { enable: true } }, callback: { onCheck: zTreeOnCheck//点击时执行zTreeOnCheck() } }; var setting1 = { check: { enable: true }, data: { simpleData: { enable: true } }, callback: { onCheck: remove,//点击时执行remove() } }; $(document).ready(function () { var str = GetActionList();//获取后台模块数据 var obj = eval('[' + str + ']');//解析成json格式 var zNodes1 = obj; $.fn.zTree.init($("#treeDemo"), setting, zNodes1); $.fn.zTree.init($("#treeDemo1"), setting1, null); zTreeOnCheck(null, null, null); }); function zTreeOnCheck(event, treeId, treeNode) { var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var nodes = treeObj.getCheckedNodes(true); var zNode1 = ""; for (var i = 0; i < nodes.length; i++) { var roleIds = roleIds + nodes[i].id + ","; zNode1 = zNode1 + '{"name":"' + nodes[i].name + '","id":"' + nodes[i].id + '","pId":"' + nodes[i].pId + '","open" : "true","checked":"true"},'; } zNode1 = zNode1.substr(0, zNode1.length - 1); zNode1 = eval('[' + zNode1 + ']'); $.fn.zTree.init($("#treeDemo1"), setting1, zNode1); }; function remove(event, treeId, treeNode) { var treeObj1 = $.fn.zTree.getZTreeObj("treeDemo1"); var nodes1 = treeObj1.getChangeCheckedNodes(); var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var zNode = ""; for (var j = 0; j < nodes1.length; j++) { var nodes = treeObj.getNodes(); nodes = treeObj.transformToArray(nodes); zNode = ""; for (var i = 0; i < nodes.length; i++) { //var child = nodes1[j].children; if ((nodes[i].id == nodes1[j].id)) { zNode = zNode + '{"name":"' + nodes[i].name + '","id":"' + nodes[i].id + '","pId":"' + nodes[i].pId + '","open" : "true"},'; } else { zNode = zNode + '{"name":"' + nodes[i].name + '","id":"' + nodes[i].id + '","pId":"' + nodes[i].pId + '","open" : "' + nodes[i].open + '","checked":"' + nodes[i].checked + '"},'; } } zNode = zNode.substr(0, zNode.length - 1); zNode = eval('[' + zNode + ']'); $.fn.zTree.init($("#treeDemo"), setting, zNode); } var count = nodes1.length; for (var j = 0; j < count; j++) { treeObj1.removeNode(nodes1[0]); } }; function GetActionList() { var zNode = ""; var roleId = $("#id").val(); $ .ajax({ url: "module/findByRoleId/" + roleId,//rest风格，直接在url后跟参数，由角色id查找模块进行分配 cache: false, type: "post", async: false, success: function (restResponse) { if (restResponse.restErrors == null) { for (var i = 0; i < restResponse.result.length; i++) { var row = restResponse.result[i]; if (row.remark == "checked") { zNode = zNode + '{"name":"' + row.name + '","id":"' + row.id + '","pId":"' + row.parentId + '","open" : "true","checked":"true"},'; } else { zNode = zNode + '{"name":"' + row.name + '","id":"' + row.id + '","pId":"' + row.parentId + '","open" : "true"},'; } } zNode = zNode.substr(0, zNode.length - 1); } }, error: function () { alert('加载模块列表失败！'); } }); return zNode;}
效果如图：
