找了很多網(wǎng)上關(guān)于Ztree的例子和代碼才搞定。

首先，關(guān)于Ztree的代碼不介紹了，網(wǎng)上下載之后，引用下列四個(gè)文件就能使用了。

?

?

?

1.關(guān)于配置選項(xiàng)。主要通過(guò)回調(diào)函數(shù)來(lái)實(shí)現(xiàn)向后臺(tái)發(fā)送數(shù)據(jù)，實(shí)現(xiàn)增刪改查。

?

1 var setting = { 2 view: { 3 addHoverDom: addHoverDom,//顯示操作圖標(biāo) 4 removeHoverDom: removeHoverDom,//移除圖標(biāo) 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);//實(shí)現(xiàn)加載樹(shù)的方法}})$("#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"); //增加節(jié)點(diǎn)的方法$.ajax({url: "AddNode",data: { ParentId: treeNode.id },type: "post",success: function (data) {if (data.message == "success") {
//此方法是js在前段增加節(jié)點(diǎn)方法，一定要通過(guò)后臺(tái)返回的id來(lái)增加，不然新增的節(jié)點(diǎn)會(huì)出現(xiàn)節(jié)點(diǎn)id為null的問(wèn)題zTree.addNodes(treeNode, { id: data.id, ParentId: treeNode.id, name: "new node" + (newCount++) });}else {$.messageBox5s('@Resource.Tip', "新增節(jié)點(diǎn)失敗！聯(lián)系管理員！");}}})return false;});};
//刪除節(jié)點(diǎn)function zTreeOnRemove(event, treeId, treeNode) {{$.ajax({url: "DeleteNode",type: "post",data: { NodeId: treeNode.id },success: function (data) {if (data == "success") {}else {$.messageBox5s('@Resource.Tip', "刪除節(jié)點(diǎn)失敗！聯(lián)系管理員！");}}})}}function removeHoverDom(treeId, treeNode) {$("#addBtn_" + treeNode.tId).unbind().remove();}; //修改節(jié)點(diǎn)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', "修改節(jié)點(diǎn)失敗！聯(lián)系管理員！");}}})};// 樹(shù)的單擊事件 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.后臺(tái)處理的方法。。我項(xiàng)目中是使用C#代碼寫(xiě)的，mvc框架

?

?

1 [Description("項(xiàng)目資料-樹(shù)形")] 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 }

?

我項(xiàng)目中的情況是需要用ztree來(lái)實(shí)現(xiàn)創(chuàng)建目錄，然后上傳施工資料的方法。所以，projectid字段，大家不需要在意。是項(xiàng)目的id

?

3.給大家看一下我的數(shù)據(jù)庫(kù)字段設(shè)計(jì)，附上關(guān)于增刪改查操作數(shù)據(jù)庫(kù)的代碼。

?

?

?這里頂級(jí)節(jié)點(diǎn)的pid為0，其次projectcode是我項(xiàng)目中使用到的，可以不用考慮。state本來(lái)是用于ztree中open配置信息用的。默認(rèn)展開(kāi)節(jié)點(diǎn)的配置。

type是我用于判斷此節(jié)點(diǎn)是否包是文件節(jié)點(diǎn)用的。（包含子節(jié)點(diǎn)的為文件夾節(jié)點(diǎn)，沒(méi)有子節(jié)點(diǎn)的就是文件節(jié)點(diǎn)）

?

4.serveices代碼

1 //獲取樹(shù)所有節(jié)點(diǎn)顯示 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)//第一次創(chuàng)建 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//存在頂級(jí)節(jié)點(diǎn) 18 { 19 20 //List<TB_Project_Nodes> nodes = NodesRepository.Entities.Where(t => t.pid == TopNode).OrderBy(t => t.sort).ToList();//頂級(jí)節(jié)點(diǎn)下面的一級(jí)節(jié)點(diǎn) 21 List<TB_Project_Nodes> nodes = ALLLIST.Where(t => t.pid == top.Id.ToString()).OrderBy(t => t.sort).ToList();//頂級(jí)節(jié)點(diǎn)下面的一級(jí)節(jié)點(diǎn) 22 23 if (nodes.Count <= 0)//沒(méi)有子節(jié)點(diǎn) 24 { 25 return new List<TB_Project_Nodes>() { top }; 26 } 27 else//存在子節(jié)點(diǎn)，遍歷所有的子節(jié)點(diǎn) 28 { 29 30 List<TB_Project_Nodes> LIST = new List<TB_Project_Nodes>(); 31 LIST.Add(top); 32 LIST.AddRange(nodes); //添加一級(jí)節(jié)點(diǎn) 33 34 LIST = Test(nodes, LIST, ALLLIST); 35 36 return LIST; 37 } 38 39 } 40 41 } 42 //遞歸函數(shù)---把所有二級(jí)節(jié)點(diǎn)以及以下所有節(jié)點(diǎn)獲取 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 //已經(jīng)添加完本級(jí)節(jié)點(diǎn) 57 //添加下一級(jí)節(jié)點(diǎn) 58 if (NEWLIST.Count > 0) 59 { 60 Test(NEWLIST, LIST, ALLLIST); 61 } 62 return LIST; 63 } 64 //增加節(jié)點(diǎn)信息 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 /// 修改節(jié)點(diǎn)類(lèi)型 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 /// 獲取父級(jí)節(jié)點(diǎn)下面最大的一個(gè)排序+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 /// 刪除此節(jié)點(diǎn)時(shí)候，要把下面所有子節(jié)點(diǎn)刪除 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 //獲取下面的所有子節(jié)點(diǎn) 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 }

?

轉(zhuǎn)載于:https://www.cnblogs.com/melodygkx/p/10027600.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。