js插件ztree使用
分类:
IT文章
•
2024-10-25 14:30:49
最新给公司后台写了一个配置页面，在网上搜到一个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 });//确定
