js插件ztree使用

最新给公司后台写了一个配置页面，在网上搜到一个js插件ztree，记录一下使用心得。

首先说一下ztree官网，好多方法我都是从官网api上学习的，官网地址http://www.treejs.cn/v3/main.php#_zTreeInfo

切入正题，我开始没有使用异步加载模式，但写时间发现编辑和添加后更新要使用的方法都是在异步加载模式的前提下，建议大家使用异步加载，方便后续操作。

首先是页面引用

<link href="zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<link href="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="zTree/js/jquery.ztree.all.js" type="text/javascript"></script>

官方文档中用的jquery是1.4版本，我感觉有点低，用了稍微高点的版本。

js代码如下:

 1 var setting = {
 2             data: {
 3                 key: {
 4                     //将treeNode的ItemName属性当做节点名称
 5                     name: "appName"
 6                 },
 7                 simpleData: {
 8                     //是否使用简单数据模式
 9                     enable: true,
10                     //当前节点id属性  
11                     idKey: "appId",
12                     //当前节点的父节点id属性 
13                     pIdKey: "appFatherId",
14                     //用于修正根节点父节点数据，即pIdKey指定的属性值
15                     rootPId: "110"
16                 }
17             },
18             async: {
19                 enable: true,//是否启动异步加载模式
20                 url: "handler/DeployZTree.ashx",//一般处理程序得地址
21                 autoParam: ["appId"],//post请求时参数名
22                 otherParam: { "Type": "All" },//附加参数
23                 // dataType: "json",//默认text  
24                 type: "post",//默认post  
25                 dataFilter: addProperty  //异步返回后经过Filter,如果返回的数据不完整，并且修改后台sql语句比较麻烦，可以用这个方法在前台修改
26             },
27             view: {
28                 //是否支持同时选中多个节点
29                 selectedMulti: false
30             },
31             callback: {
32                 //onAsyncSuccess: zTreeOnAsyncSuccess,
33                 onMouseDown: onMouseDown  //鼠标点击节点事件
34             }
35         };

ztree基础配置

 1  function addProperty(treeId, parentNode, responseData) {
 2             if (responseData.length > 0) {
 3                 for (var i = 0; i < responseData.length; i++) {
 4                     if (parseInt(responseData[i].num) > 0) {
 5                         responseData[i]["isParent"] = true;
 6                     }
 7                 }
 8             }
 9             return responseData;
10         }

addProperty方法

 1 $.post("handler/DeployZTree.ashx", { "Type": "All", "async": "false" }, function (data) {
 2                 var nodes = JSON.parse(data);
 3                 for (var j = 0; j < nodes.length; j++) {
 4                     if (parseInt(nodes[j].num) > 0) {
 5                         nodes[j]["isParent"] = true;
 6                     }
 7                 }
 8                 var treeObj = $.fn.zTree.init($("#tree"), setting, nodes);
 9                 //默认展开所有节点
10                 treeObj.expandAll(false);
11                 treeObj.expandNode(treeObj.getNodes()[0], true, null, null);
12             });//加载Ztree

页面加载后第一次返回的数据

 1 $('#Edit').click(function () {
 2 
 3                 var treeObj = $.fn.zTree.getZTreeObj("tree");
 4                 var nodes = treeObj.getSelectedNodes();
 5                 if (nodes.length < 1) {
 6                     alert("请选择节点");
 7                     return;
 8                 } else {
 9                     $.ajax({
10                         type: 'POST',
11                         url: "handler/DeployZTree.ashx",
12                         data: { "Type": "FatherNodes" },
13                         success: function (data) {
14                             for (var i = 0; i < data.length; i++) {
15                                 if ($('#superiorNodeSelect').find("option[value='" + data[i].appId + "']").size() < 1) {
16                                     $('<option value="' + data[i].appId + '">' + data[i].appName + '</option>').appendTo($('#superiorNodeSelect'));
17                                 }
18                             }
19                             var node = nodes[0];
20                             $('#NodeName').val(node.appName);
21                             //$('#SuperiorNode').val(node.appFatherName);
22                             $('#superiorNodeSelect').val(node.appFatherId);
23                             $('#PageAddress').val(node.pagePath);
24                             $('#NodeID').val(node.appId);
25                             $('#FatherNodeID').val(node.appFatherId);
26                             var systemid = node.systemType;
27                             $('#systemSelect').val(systemid);
28                             if (!$('#dvTxt').hasClass("hid")) {
29                                 $('#dvTxt').addClass("hid");
30                             }
31                             if ($('#dvSelect').hasClass("hid")) {
32                                 $('#dvSelect').removeClass("hid");
33                             }
34                             if ($('#ok').hasClass("hid")) {
35                                 $('#ok').removeClass("hid");
36                             }
37                             if ($('#nID').hasClass("hid")) {
38                                 $('#nID').removeClass("hid");
39                             }
40                             if ($('#fID').hasClass("hid")) {
41                                 $('#fID').removeClass("hid");
42                             }
43                         },
44                         dataType: "json"
45                     });
46                 }
47             });//编辑

编辑按钮点击事件

 1 $('#ok').click(function () {
 2                 if ($.trim($('#NodeName').val()) == "" || $('#NodeName').val() == "节点名称") {
 3                     alert("节点名称不能为空");
 4                     return;
 5                 }
 6                 if ($('#superiorNodeSelect option:selected').val() == "-1") {
 7                     alert("请选择上级节点");
 8                     return;
 9                 }
10                 if ($('#systemSelect option:selected').val() == "0") {
11                     alert("请选择所属系统");
12                     return;
13                 }
14                 if ($.trim($('#PageAddress').val()) == "" || $('#PageAddress').val() == "页面地址") {
15                     alert("页面地址不能为空");
16                     return;
17                 }
18                 if (!confirm("确定提交！")) {
19                     return;
20                 }
21                 var name = $('#NodeName').val();//名称
22                 var fatherNodeId = $('#superiorNodeSelect option:selected').val();//父节点ID
23                 var systemId = $('#systemSelect option:selected').val();//所属系统
24                 var pageAddress = $('#PageAddress').val();//页面地址
25                 if ($('#NodeID').val() == "") {
26                     $.ajax({
27                         type: 'POST',
28                         url: 'handler/DeployZTree.ashx',
29                         data: {
30                             "Type": "Add", "appName": name, "appFatherId": fatherNodeId, "systemType": systemId, "pagePath": pageAddress
31                         },
32                         success: function (data) {
33                             if (data == "success") {
34                                 var treeObj = $.fn.zTree.getZTreeObj("tree");
35                                 if (!(treeObj.getNodeByParam("appId", fatherNodeId, null) == null)) {
36                                     if (treeObj.getNodeByParam("appId", fatherNodeId, null).isParent) {
37                                         treeObj.reAsyncChildNodes(treeObj.getNodeByParam("appId", fatherNodeId, null), "refresh");
38                                     } else {
39                                         if (!(treeObj.getNodeByParam("appId", $('#FatherNodeID').val(), null) == null)) {
40                                             treeObj.reAsyncChildNodes(treeObj.getNodeByParam("appId", $('#FatherNodeID').val(), null), "refresh");
41                                         }
42                                     }
43                                 }
44                                 alert("添加成功!");
45                             } else {
46                                 alert("添加失败!");
47                             }
48                             pageInit();
49                         }
50                     });
51                 }//添加
52                 else {
53                     $.ajax({
54                         type: 'POST',
55                         url: "handler/DeployZTree.ashx",
56                         //appId, appName, appFatherId, systemType, pagePath
57                         data: { "Type": "Edit", "appId": $('#NodeID').val(), "appName": name, "appFatherId": fatherNodeId, "systemType": systemId, "pagePath": pageAddress },
58                         success: function (data) {
59                             if (data == "success") {
60                                 var treeObj = $.fn.zTree.getZTreeObj("tree");
61                                 if (!(treeObj.getNodeByParam("appId", $('#FatherNodeID').val(), null) == null)) {
62                                     treeObj.reAsyncChildNodes(treeObj.getNodeByParam("appId", $('#FatherNodeID').val(), null), "refresh", false, refreshTwo(fatherNodeId));
63                                 }
64                                 //if (!(treeObj.getNodeByParam("appId", fatherNodeId, null) == null)) {
65                                 //    treeObj.reAsyncChildNodes(treeObj.getNodeByParam("appId", fatherNodeId, null), "refresh");
66                                 //}
67                                 alert("修改成功!");
68                             }
69                             else {
70                                 alert("修改失败!");
71                             }
72                             pageInit();
73                         }
74                     });
75                 }//修改
76             });//确定

确定按钮点击事件

treeObj.getNodeByParam() 官方文档中给的是如无结果，返回 [ ]，实际测试返回的是null，不知道是什么问题。

 1 $('#Add').click(function () {
 2                 var treeObj = $.fn.zTree.getZTreeObj("tree");
 3                 var nodes = treeObj.getSelectedNodes();
 4                 if (nodes.length < 1) {
 5                     alert("请选择节点");
 6                     return;
 7                 } else {
 8                     $.ajax({
 9                         type: 'POST',
10                         url: "handler/DeployZTree.ashx",
11                         data: { "Type": "FatherNodes" },
12                         success: function (data) {
13                             for (var i = 0; i < data.length; i++) {
14                                 if ($('#superiorNodeSelect').find("option[value='" + data[i].appId + "']").size() < 1) {
15                                     $('<option value="' + data[i].appId + '">' + data[i].appName + '</option>').appendTo($('#superiorNodeSelect'));
16                                 }
17                             }
18                             $('#NodeID').val("");
19                             $('#dvTxt').addClass("hid");
20                             $('#dvSelect').removeClass("hid");
21                             var node = nodes[0];
22                             $('#NodeName').val("");
23                             $('#PageAddress').val("");
24                             $('#FatherNodeID').val(node.appFatherId);
25                             $('#superiorNodeSelect').val(node.appId);
26                             if ($('#ok').hasClass("hid")) {
27                                 $('#ok').removeClass("hid");
28                             }
29                             if (!$('#nID').hasClass("hid")) {
30                                 $('#nID').addClass("hid");
31                             }
32                             if (!$('#fID').hasClass("hid")) {
33                                 $('#fID').addClass("hid");
34                             }
35                         },
36                         dataType: "json"
37                     });
38                 }
39             });//添加

添加按钮点击事件

 1 <body>
 2     <div>
 3         <ul id="tree" class="ztree"></ul>
 4     </div>
 5     <div class="message">
 6         <div class="operatingStyle">
 7             <input class="btn btn-default customize" type="button" id="Edit" value="编辑">
 8             <input class="btn btn-default customize" type="button" id="Add" value="添加">
 9         </div>
10         <form class="form-horizontal">
11             <div class="form-group">
12                 <label for="NodeName" class="col-sm-2 control-label labStyle">节点名称：</label>
13                 <div class="col-sm-10 textWidth">
14                     <input type="text" class="form-control " id="NodeName" placeholder="节点名称">
15                 </div>
16             </div>
17             <div id="dvTxt" class="form-group">
18                 <label for="SuperiorNode" class="col-sm-2 control-label labStyle">上级节点：</label>
19                 <div class="col-sm-10 textWidth">
20                     <input type="text" class="form-control " id="SuperiorNode" placeholder="上级节点">
21                 </div>
22             </div>
23             <div id="dvSelect" class="form-group hid">
24                 <label for="superiorNodeSelect" class="col-sm-2 control-label labStyle">上级节点：</label>
25                 <select id="superiorNodeSelect" class="form-control selectSystem">
26                     <option value="-1">请选择</option>
27                 </select>
28             </div>
29             <div class="form-group">
30                 <label for="systemSelect" class="col-sm-2 control-label labStyle">所属系统：</label>
31                 <select id="systemSelect" class="form-control selectSystem">
32                     <option value="0">请选择</option>
33                     <option value="1">数据质量</option>
34                     <option value="4">日常开发</option>
35                     <option value="5">移动端</option>
36                 </select>
37             </div>
38             <div class="form-group">
39                 <label for="PageAddress" class="col-sm-2 control-label labStyle">页面地址：</label>
40                 <div class="col-sm-10 textWidth">
41                     <textarea id="PageAddress" class="form-control textarea" rows="4" placeholder="页面地址"></textarea>
42                 </div>
43             </div>
44             <div class="form-group" id="nID">
45                 <label for="NodeID" class="col-sm-2 control-label labStyle">节点ID：</label>
46                 <div class="col-sm-10 textWidth">
47                     <input type="text" class="form-control " id="NodeID" disabled>
48                 </div>
49             </div>
50             <div class="form-group" id="fID">
51                 <label for="FatherNodeID" class="col-sm-2 control-label labStyle">父节点ID：</label>
52                 <div class="col-sm-10 textWidth">
53                     <input type="text" class="form-control " id="FatherNodeID" disabled>
54                 </div>
55             </div>
56             <div class="form-group">
57                 <div class="col-sm-offset-2 col-sm-10">
58                     <input class="btn btn-default submit hid" type="button" id="ok" value="确定">
59                 </div>
60             </div>
61         </form>
62     </div>
63 </body>

前台页面

后台代码就不贴了，都是业务的流程，没什么好看的