找了很多网上关于Ztree的例子和代码才搞定。
首先,关于Ztree的代码不介绍了,网上下载之后,引用下列四个文件就能使用了。
1.关于配置选项。主要通过回调函数来实现向后台发送数据,实现增删改查。
1 var setting = {
2 view: {
3 addHoverDom: addHoverDom,//显示操作图标
4 removeHoverDom: removeHoverDom,//移除图标
5 selectedMulti: false
6 },
7 check: {
8 enable: true
9 },
10 data: {
11 simpleData: {
12 enable: true
13 }
14 },
15 callback: {
16 onRename: zTreeOnRename,//修改
17 onRemove: zTreeOnRemove,//删除
18 onClick: zTreeOnClickRight,
19
20 },
21 edit: {
22 enable: true,
23 showRemoveBtn: true,
24 showRenameBtn: true,
25 removeTitle: "删除",
26 renameTitle: "修改"
27 }
28 };
$(document).ready(function () {
$.ajax({
url: "GetZtreeJson",
data: { ProjectId: "@ViewBag.ProjectId" },
type: "post",
dataType: "json",
success: function (data) {
$.fn.zTree.init($("#test"), setting, data);//实现加载树的方法
}
})
$("#btnReturn").click(function () {
window.parent.frameReturnByClose();
});
//$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
var newCount = 1;
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.tId);
if (btn) btn.bind("click", function () {
var zTree = $.fn.zTree.getZTreeObj("test");
//增加节点的方法
$.ajax({
url: "AddNode",
data: { ParentId: treeNode.id },
type: "post",
success: function (data) {
if (data.message == "success") {
//此方法是js在前段增加节点方法,一定要通过后台返回的id来增加,不然新增的节点会出现节点id为null的问题
zTree.addNodes(treeNode, { id: data.id, ParentId: treeNode.id, name: "new node" + (newCount++) });
}
else {
$.messageBox5s('@Resource.Tip', "新增节点失败!联系管理员!");
}
}
})
return false;
});
};
//删除节点
function zTreeOnRemove(event, treeId, treeNode) {
{
$.ajax({
url: "DeleteNode",
type: "post",
data: { NodeId: treeNode.id },
success: function (data) {
if (data == "success") {
}
else {
$.messageBox5s('@Resource.Tip', "删除节点失败!联系管理员!");
}
}
})
}
}
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
};
//修改节点
function zTreeOnRename(event, treeId, treeNode) {
$.ajax({
url: "EditNode",
type: "post",
data: { NodeId: $.trim(treeNode.id), name: treeNode.name },
success: function (data) {
if (data != "success") {
$.messageBox5s('@Resource.Tip', "修改节点失败!联系管理员!");
}
}
})
};
// 树的单击事件
function zTreeOnClickRight(event, treeId, treeNode) {
var treeid = treeNode.id;
$("#hidId").val(treeid);
$("#ifm").attr("src", "FileView?NodeId=" + treeid);
}
function treeShow(data) {
zTreeObj = $.fn.zTree.init($("#test"), setting, data);
zTreeObj.expandAll(true);
}
2.后台处理的方法。。我项目中是使用C#代码写的,mvc框架
1 [Description("项目资料-树形")]
2 [KeyCode(Name = "Tree")]
3 [IsModule]
4 [SupportFilter(ActionName = "Tree")]
5 public ActionResult TreeIndex(Guid ProjectId)
6 {
7
8 ViewBag.ProjectId = ProjectId;
9 var ProjectCode = IProjectContract.GetProjectInputById(ProjectId).ProjectCode;
10 string count = ProjectResourceContract.CountNumber(ProjectCode);
11 ViewBag.Count = count;
12 return View();
13 }
14
15 public JsonResult GetZtreeJson(Guid ProjectId)
16 {
17 var list = ProjectResourceContract.GetNodeJsonByProject(ProjectId);
18
19
20 return Json((from p in list
21 select new
22 {
23 id = p.Id,
24 pId = p.pid,
25 open = "true",
26 name = p.name
27 }).ToList());
28 }
29 public JsonResult AddNode(string ParentId)
30 {
31 int sort = ProjectResourceContract.GetLastNodeSortFormParent(ParentId);
32 //string nodeid = ProjectResourceContract.GetCurrentNewNodeId(ParentId);
33 if (sort == 1)
34 {
35 var node = ProjectResourceContract.GetNodeByNodeId(ParentId);
36 node.type = "1";
37 ProjectResourceContract.EditNode(ParentId, node.type);
38 }
39 Guid nodeId = Guid.NewGuid();
40 var ProjectCode = ProjectResourceContract.GetNodeByNodeId(ParentId).ProjectCode;
41 var result = ProjectResourceContract.AddNode(new TB_Project_Nodes()
42 {
43 Id = nodeId,
44 name = "New Node" + sort,
45 type = "2",
46 pid = ParentId,
47 sort = sort,
48 state = "true",
49 ProjectCode = ProjectCode,
50 });
51 if (result.Successed)
52 {
53 return Json(new { message = "success", id = nodeId });
54 }
55 else
56 {
57 return Json("error");
58 }
59 }
60 public JsonResult DeleteNode(string NodeId)
61 {
62 var result = ProjectResourceContract.DeleteNode(NodeId);
63 if (result.Successed)
64 {
65 return Json("success");
66 }
67 else
68 {
69 return Json("error");
70 }
71 }
72 public JsonResult EditNode(string NodeId, string name, string path = "", string ProjectCode = "")
73 {
74 OperationResult result;
75 if (!string.IsNullOrEmpty(path))
76 {
77 path = path.TrimEnd('+');
78
79 path = "UpDir/" + ProjectCode + "/施工资料/" + path;
80 result = ProjectResourceContract.EditNode(NodeId, name, path);
81 }
82 else
83 {
84 result = ProjectResourceContract.EditNode(NodeId, name, "");
85 }
86 if (result.Successed)
87 {
88 return Json("success");
89 }
90 else
91 {
92 return Json("error");
93 }
94 }
我项目中的情况是需要用ztree来实现创建目录,然后上传施工资料的方法。所以,projectid字段,大家不需要在意。是项目的id
3.给大家看一下我的数据库字段设计,附上关于增删改查操作数据库的代码。
这里顶级节点的pid为0,其次projectcode是我项目中使用到的,可以不用考虑。state本来是用于ztree中open配置信息用的。默认展开节点的配置。
type是我用于判断此节点是否包是文件节点用的。(包含子节点的为文件夹节点,没有子节点的就是文件节点)
4.serveices代码
1 //获取树所有节点显示
2 public List<TB_Project_Nodes> GetNodeJsonByProject(Guid ProjectId)
3 {
4
5
6 var project = ProjectsRepository.GetByKey(ProjectId);
7 string TopNode = project.ProjectCode;
8 List<TB_Project_Nodes> ALLLIST = NodesRepository.Entities.Where(t => t.ProjectCode == TopNode).ToList();
9 //var top = NodesRepository.Entities.FirstOrDefault(t => t.Id.ToString() == TopNode);
10 TB_Project_Nodes top = ALLLIST.FirstOrDefault(t => t.ProjectCode == TopNode&&t.pid=="0");
11 if (top == null)//第一次创建
12 {
13 TB_Project_Nodes pn = new TB_Project_Nodes() { ProjectCode = TopNode, Id = Guid.NewGuid(), type = "1", pid = "0", sort = 1, name = project.ProjectName, state = "true" };
14 NodesRepository.Insert(pn);
15 return new List<TB_Project_Nodes>() { pn };
16 }
17 else//存在顶级节点
18 {
19
20 //List<TB_Project_Nodes> nodes = NodesRepository.Entities.Where(t => t.pid == TopNode).OrderBy(t => t.sort).ToList();//顶级节点下面的一级节点
21 List<TB_Project_Nodes> nodes = ALLLIST.Where(t => t.pid == top.Id.ToString()).OrderBy(t => t.sort).ToList();//顶级节点下面的一级节点
22
23 if (nodes.Count <= 0)//没有子节点
24 {
25 return new List<TB_Project_Nodes>() { top };
26 }
27 else//存在子节点,遍历所有的子节点
28 {
29
30 List<TB_Project_Nodes> LIST = new List<TB_Project_Nodes>();
31 LIST.Add(top);
32 LIST.AddRange(nodes); //添加一级节点
33
34 LIST = Test(nodes, LIST, ALLLIST);
35
36 return LIST;
37 }
38
39 }
40
41 }
42 //递归函数---把所有二级节点以及以下所有节点获取
43 public List<TB_Project_Nodes> Test(List<TB_Project_Nodes> list, List<TB_Project_Nodes> LIST, List<TB_Project_Nodes> ALLLIST)
44 {
45 List<TB_Project_Nodes> NEWLIST = new List<TB_Project_Nodes>();
46 foreach (var item2 in list)
47 {
48 var secondNodes = ALLLIST.Where(t => t.pid == item2.Id.ToString()).OrderBy(t => t.sort).ToList();
49 if (secondNodes.Count > 0)
50 {
51
52 NEWLIST.AddRange(secondNodes);
53 }
54 }
55 LIST.AddRange(NEWLIST);
56 //已经添加完本级节点
57 //添加下一级节点
58 if (NEWLIST.Count > 0)
59 {
60 Test(NEWLIST, LIST, ALLLIST);
61 }
62 return LIST;
63 }
64 //增加节点信息
65 public OperationResult AddNode(TB_Project_Nodes node)
66 {
67
68 int result = NodesRepository.Insert(node);
69 if (result == 0)
70 {
71 return new OperationResult(OperationResultType.Error, "error");
72 }
73 else
74 {
75 return new OperationResult(OperationResultType.Success, "success");
76 }
77
78 }
79 /// <summary>
80 /// 修改节点类型
81 /// </summary>
82 /// <param name="NodeId"></param>
83 /// <param name="type"></param>
84 /// <returns></returns>
85 public OperationResult EditNode(string NodeId, string type)
86 {
87 var node = NodesRepository.Entities.FirstOrDefault(t => t.Id.ToString() == NodeId);
88 node.type = type;
89 int result = NodesRepository.Update(node);
90 if (result == 0)
91 {
92 return new OperationResult(OperationResultType.Error, "error");
93 }
94 else
95 {
96 return new OperationResult(OperationResultType.Success, "success");
97 }
98 }
99
100 /// <summary>
101 /// 获取父级节点下面最大的一个排序+1
102 /// </summary>
103 /// <param name="ParentId"></param>
104 /// <returns></returns>
105
106 public int GetLastNodeSortFormParent(string ParentId)
107 {
108 var list = NodesRepository.Entities.Where(t => t.pid == ParentId).OrderByDescending(t => t.sort).ToList();
109 if (list.Count <= 0)
110 {
111 return 1;
112 }
113 else
114 {
115 return list[0].sort + 1;
116 }
117 }
118
119 /// <summary>
120 /// 删除此节点时候,要把下面所有子节点删除
121 /// </summary>
122 /// <param name="NodeId"></param>
123 /// <returns></returns>
124 public OperationResult DeleteNode(string NodeId)
125 {
126 List<TB_Project_Nodes> ALLLIST = NodesRepository.Entities.ToList();
127 // var node = NodesRepository.Entities.FirstOrDefault(t => t.Id.ToString() == NodeId);
128 var node = ALLLIST.FirstOrDefault(T => T.Id.ToString() == NodeId);
129 //获取下面的所有子节点
130 List<TB_Project_Nodes> LIST = new List<TB_Project_Nodes>();
131 LIST.Add(node);
132 var list = ALLLIST.Where(t => t.pid == NodeId).ToList();
133 if (list.Count > 0)
134 {
135 LIST.AddRange(list);
136 LIST = Test(list, LIST, ALLLIST);
137 }
138 for (int i = LIST.Count - 1; i >= 0; i--)
139 {
140 try
141 {
142 int result = NodesRepository.Delete(LIST[i].Id);
143 }
144 catch (Exception ex)
145 {
146 return new OperationResult(OperationResultType.Error, "error");
147 throw ex;
148 }
149
150 }
151
152 return new OperationResult(OperationResultType.Success, "success");
153
154 }