可編輯樹Ztree的使用（包括對後臺數據庫的增刪改查）

時間  2019-12-02
標籤 編輯 ztree 使用 包括 後臺 數據庫 增刪 欄目 SQL 简体版
原文   原文鏈接

找了不少網上關於Ztree的例子和代碼才搞定。node

首先，關於Ztree的代碼不介紹了，網上下載以後，引用下列四個文件就能使用了。ajax

 

 

 

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框架json

 

 

 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字段，你們不須要在乎。是項目的idmvc

 

3.給你們看一下個人數據庫字段設計，附上關於增刪改查操做數據庫的代碼。框架

 

 

 這裏頂級節點的pid爲0，其次projectcode是我項目中使用到的，能夠不用考慮。state原本是用於ztree中open配置信息用的。默認展開節點的配置。函數

type是我用於判斷此節點是否包是文件節點用的。（包含子節點的爲文件夾節點，沒有子節點的就是文件節點）post

 

4.serveices代碼ui

  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         }
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程