找了很多網上關于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' οnfοcus='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 }

?

轉載于:https://www.cnblogs.com/melodygkx/p/10027600.html

總結

以上是生活随笔為你收集整理的可编辑树Ztree的使用（包括对后台数据库的增删改查）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。