Ztree前台展示多级菜单,后台配置方法

Posted 凌乱忘语

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ztree前台展示多级菜单,后台配置方法相关的知识,希望对你有一定的参考价值。

第一步、前台html页面。

技术分享
  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="feeClassification.aspx.cs" Inherits="Webs.pages.Parameter.feeClassification" %>
  2 
  3 <!DOCTYPE html>
  4 <html lang="en-us">
  5 <head>
  6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7     <title>费用分类</title>
  8     <!-- IE兼容模式 -->
  9     <!-- 引入css样式文件 -->
 10     <link rel="stylesheet" type="text/css" href="/content/common/css/app.v2.css?verson=<%=VersionNo %>">
 11     <link rel="stylesheet" type="text/css" href="/content/common/css/info.css?verson=<%=VersionNo %>">
 12     <link href="/content/common/ztree/demo.css?verson=<%=VersionNo %>" rel="stylesheet" />
 13     <link href="/content/common/ztree/zTreeStyle.css?verson=<%=VersionNo %>" rel="stylesheet" />
 14     <!--[if lt IE 9]> <script src="/content/common/js/ie/html5shiv.js?verson=<%=VersionNo %>" cache="false"></script> <script src="/content/common/js/ie/respond.min.js?verson=<%=VersionNo %>" cache="false"></script> <script src="/content/common/js/ie/excanvas.js?verson=<%=VersionNo %>" cache="false"></script> <![endif]-->
 15 
 16     <%=headAppendHtmljavascript() %>
 17 </head>
 18 <body>
 19     <div>
 20         <div class="margin-bottom5" style="float:left;width:40%; border: 1px solid black;" id="divTable">
 21             <input type="hidden" id="txtCode" />
 22             <input type="hidden" id="txtFathCode" />
 23             <table class="tableDefault" cellpadding="0" cellspacing="0" border="1">
 24                 <tr>
 25                     <th style="width: 30%;"><span>操    作</span></th>
 26                     <td>
 27                         <input class="btn btn-s-md btn-success" id="modify" type="button" onclick="Modify();" value="修改保存" />
 28                         <input class="btn btn-s-md btn-success" id="Add" type="button" onclick="AddAway();" value="新增保存" />
 29                         <input class="btn btn-s-md btn-success" id="Del" type="button" onclick="DelAway();" value="删除节点" />
 30                     </td>
 31                 </tr>
 32                 <tr>
 33                     <th><span>分类显示</span></th>
 34                     <td style="text-align: left;">
 35                         <span id="sify_name"></span>
 36                     </td>
 37                 </tr>
 38                 <tr>
 39                     <th><span>分类名称</span></th>
 40                     <td style="text-align: left;">
 41                         <input name="classify_Name" class="form-control" style="width: 40%;" type="text" id="classify_name" />
 42                     </td>
 43                 </tr>
 44                 <tr>
 45                     <th><span>排序数值</span></th>
 46                     <td style="text-align: left;">
 47                         <input name="order_value" class="form-control" style="width: 40%;" type="text" id="order_value" />
 48                     </td>
 49                 </tr>
 50                 <tr>
 51                     <th><span>助 记 码</span></th>
 52                     <td style="text-align: left;">
 53                         <input name="code_value" class="form-control" style="width: 40%;" type="text" id="code_value" />
 54                     </td>
 55                 </tr>
 56             </table>
 57 
 58         </div>
 59         <!-- 页面树 -->
 60         <div class="zTreeDemoBackground right" id="ztreeId" style="width: 40%; height: auto">
 61             <ul id="treeDemo" class="ztree" style="width: 40%; height: auto; float: right; margin-top: 5px;"></ul>
 62         </div>
 63 
 64     </div>
 65     <script src="/content/common/js/ajaxRequest.js?verson=<%=VersionNo %>" type="text/javascript"></script>
 66     <script src="/content/common/ztree/jquery.ztree.core.js?verson=<%=VersionNo %>"></script>
 67     <%=bodyAppendHtmlJavaScript() %>
 68     <script type="text/javascript">
 69         var zNodes, cropId;
 70         var messageError = "";
 71         var jsonObject = {};
 72         var tree = [];
 73         //ztree配置信息
 74         var setting = {
 75             view: {
 76                 showIcon: true,//是否展示树图片
 77                 dblClickExpand: false,
 78                 showLine: true,
 79                 selectedMulti: false,
 80                 fontCss: { background: "write" }
 81             },
 82             edit: {
 83                 enable: true,
 84                 editNameSelectAll: true
 85             },
 86             data: {
 87                 simpleData: {
 88                     enable: true
 89                 }
 90             },
 91             callback: {
 92                 onClick: GetNodeAway,//节点点击事件
 93                 onExpand: GetNodeAway//节点展开折叠事件
 94             }
 95         };
 96         //加载事件
 97         $(function () {
 98             //加载树信息
 99             GetTreeData();
100         });
101         //处理接收数据
102         function GetTreeData() {
103             jsonPost("/wsService/PManagementHandler.ashx?type=GetFreeClassTree", jsonObject,
104                 function (response) {
105                     $.fn.zTree.init($("#treeDemo"), setting, response.data);
106                 },
107                 function () { });
108         }
109         //树图片回调事件
110         function showIconForTree(treeId, treeNode) {
111             return !treeNode.isParent;
112         };
113         //修改事件
114         function Modify() {
115             if (JudgeAway(0)) {
116                 SaveFileDate($("#txtCode").val());
117                 treeHandler(0);
118             } else { showErrorAlert(messageError); }
119         }
120         //新增事件
121         function AddAway() {
122             var lxid = 1;
123             if ($("#txtCode").val() == "") {
124                 if (!confirm("确定是增加根节点菜单吗?")) return;
125                 lxid = 2;
126             }
127             if (JudgeAway(1)) {
128                 SaveFileDate("");
129                 treeHandler(lxid);
130             } else {
131                 showErrorAlert(messageError);
132             }
133         }
134         //新增--修改
135         function treeHandler(lxid) {
136             jsonPost("/wsService/PManagementHandler.ashx?type=UpdateFreeTreeNote", jsonObject,
137                           function (response) {
138                               if (response.code === 0) {
139                                   showSuccessAlert(lxid==0?"修改成功!":"新增成功!");
140                                   checkAway();
141                                   location.reload();
142                               } else { showErrorAlert(response.message); }
143                           }, function () {
144                           });
145         }
146         //删除事件
147         function DelAway() {
148             if (JudgeAway(2)) {
149                 if (confirm("删除节点信息,请慎重!")) {
150                     if (confirm("确认要删除吗?")) {
151                         jsonObject.deleteId = $("#txtCode").val();
152                         jsonPost("/wsService/PManagementHandler.ashx?type=DeleteFreeTreeNote", jsonObject,
153                         function (response) {
154                             if (response.code === 0) {
155                                 showSuccessAlert("删除成功!");
156                                 checkAway();
157                                 location.reload();
158                             } else { showErrorAlert(response.message); }
159                         }, function () {
160                         });
161                     }
162                 }
163             } else { showErrorAlert("请点击要删除的节点!") };
164         }
165         //保存前验证方法:0--修改;1:新增;2;删除
166         //删除不检验
167         function JudgeAway(lxid) {
168             if (lxid != 2) {
169                 if (lxid != 1) {
170                     messageError = "";
171                     var value = $("#classify_name").val();
172                     if (value == "") {
173                         messageError = "分类名称不能为空";
174                         messageError += "<br/>";
175                     }
176                     value = $("#order_value").val();
177                     if (value == "") {
178                         messageError = "排序数值不能为空";
179                         messageError += "<br/>";
180                     }
181                     value = $("#code_value").val();
182                     if (value == "") {
183                         messageError = "助记码不能为空";
184                         messageError += "<br/>";
185                     }
186                     return messageError.length === 0 ? true : false;
187                 }
188             }
189             return true;
190         }
191         //保存内容填充方法
192         function SaveFileDate(zid) {
193             jsonObject = {};
194             var resultInformation = zid == "" ? $("#txtCode").val() + "^" : $("#txtFathCode").val() + "^";
195             resultInformation += zid == "" ? "^" : zid + "^";
196             resultInformation += $("#classify_name").val() + "^";
197             resultInformation += $("#code_value").val() + "^";
198             resultInformation += $("#order_value").val();
199             jsonObject.menuArray = resultInformation;
200         }
201         //节点点击事件
202         function GetNodeAway(event, treeId, nodes) {
203             var fileInfo = event.type == "click" ? true : false;
204             GetSonNode(nodes, fileInfo);
205         }
206         //获取节点信息       
207         function GetSonNode(nodes, fileInfo) {
208             if (nodes.id != "" && nodes.id != null) {
209                 if (nodes.isParent == true) {
210                     //含有子节点信息
211                     //非父节点(根据ID获取二级或三级菜单)
212                     jsonObject.paramId = nodes.id;
213                     jsonPost("/wsService/PManagementHandler.ashx?type=GetChildrenFreeClassTree", jsonObject,
214                         function (response) {
215                             GroupResultData(response.data, nodes, fileInfo);
216                         }, function () { });
217                 } else {
218                     //不包含子节点信息所以直接更新展示内容
219                     GroupResultData("", nodes, fileInfo);
220                 }
221             }
222         }
223         //节点信息填充
224         function GroupResultData(dataArray, notes, fileInfo) {
225             //填充展示信息
226             if (fileInfo) {
227                 $("#txtCode").val(notes.id);//子ID
228                 $("#txtFathCode").val(notes.pId);//父ID
229                 $("#sify_name").html(notes.SifyName);//分类显示
230                 $("#classify_name").val(notes.name);//分类名称
231                 $("#order_value").val(notes.OrderValue);//排序数值
232                 $("#code_value").val(notes.CodeValue);//助 记 码
233             }
234             if (notes.isExpernt != true) {
235                 if (dataArray !== "" && dataArray != null) {
236                     var zTree = $.fn.zTree.getZTreeObj("treeDemo");
237                     notes.isExpernt = true;
238                     //notes.children = dataArray;
239                     dataArray.forEach(function (obj) {
240                         obj.SifyName = "" + notes.name + "" + obj.name + "";
241                         zTree.addNodes(notes, obj);
242                     });
243                 }
244             }
245         }
246         //清空节点信息
247         function checkAway() {
248             //清空输入区数据
249             $("#txtCode").val("");
250             $("#txtFathCode").val("");
251             $("#sify_name").html("");
252             $("#classify_name").val("");
253             $("#order_value").val("");
254             $("#code_value").val("");
255         }
256     </script>
257 </body>
258 </html>
前台HTML页面

第二步、构建实体类。

技术分享
 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 
 6 namespace Webs.common
 7 {
 8     [Serializable]
 9     //树节点识别信息模型
10     public class ZTree
11     {
12         #region ZTree唯一标识不可改变大小写
13         /// <summary>
14         ///节点名称
15         /// </summary>
16         public string name { set; get; }
17         /// <summary>
18         /// 节点Id
19         /// </summary>
20         public string id { set; get; }
21         /// <summary>
22         /// 节点父ID
23         /// </summary>
24         public string pId { set; get; }
25         /// <summary>
26         /// 节点是否展开事件
27         /// </summary>
28         public bool open { set; get; }
29         /// <summary>
30         /// 是否是父节点标识
31         /// </summary>
32         public bool isParent { set; get; }
33         /// <summary>
34         /// 该节点是否包含子节点信息
35         /// </summary>
36         public List<ZTree> children { set; get; }
37         #endregion
38 
39         #region 自定义属性
40         /// <summary>
41         /// 分类展示名称
42         /// </summary>
43         public string SifyName { set; get; }
44         /// <summary>
45         /// 节点自有名称
46         /// </summary>
47         public string ClassifyName { set; get; }
48         /// <summary>
49         /// 排序值
50         /// </summary>
51         public int OrderValue { set; get; }
52         /// <summary>
53         /// 助计码
54         /// </summary>
55         public string CodeValue { set; get; }
56         /// <summary>
57         /// 是否已展开唯一标识
58         /// </summary>
59         public bool isExpernt { get; set; } 
60         #endregion
61     }
62 }
ZTree Model

第三步、后台代码。

技术分享
  1    #region 费用分类
  2         /// <summary>
  3         /// 获取费用分类一级节点信息
  4         /// </summary>
  5         private void GetFreeClassTree()
  6         {
  7             try
  8             {
  9                 string cParamId = stringWithFormId("paramId") == "null" ? "" : stringWithFormId("paramId");
 10                 List<ParamClassify> paramClassifyList = new List<ParamClassify>();
 11                 bool result = RemotingProxy.Param().GetParamClassifyList(cParamId, userInfo.UserId, ref paramClassifyList, ref Message);
 12                 var jsonParent = new ZTree() { id = "-1", ClassifyName = "根节点", open = true, name = "父节点" };
 13                 jsonParent.isParent = true;
 14                 jsonParent.children = new List<ZTree>();
 15                 foreach (var m in paramClassifyList)
 16                 {
 17                     var json = new ZTree();
 18                     json.pId = jsonParent.id;
 19                     json.id = m.CParamId;
 20                     json.SifyName = "根节点;" + m.VClassifyName;
 21                     json.ClassifyName = m.VClassifyName;
 22                     json.name = m.VClassifyName;
 23                     json.isParent = m.IsContainsChidrens;
 24                     json.children = new List<ZTree>();
 25                     json.CodeValue = m.VUnitMnem;
 26                     json.isParent = true;
 27                     json.OrderValue = m.NSortValue;
 28                     jsonParent.children.Add(json);
 29                 }
 30                 Response.Write(result
 31                     ? jsonString(statusCode.success, Message, jsonParent)
 32                     : jsonString(statusCode.fail, Message));
 33             }
 34             catch (Exception ex)
 35             {
 36                 CreatErrorTxt(ex.ToString());
 37                 Response.Write(jsonString(statusCode.fail, Error.DataError));
 38             }
 39         }
 40 
 41         /// <summary>
 42         /// 获取费用分类其它节点信息
 43         /// </summary>
 44         private void GetChildrenFreeClassTree()
 45         {
 46             try
 47             {
 48                 string cParamId = stringWithFormId("paramId");
 49                 List<ParamClassify> paramClassifyList = new List<ParamClassify>();
 50                 bool result = RemotingProxy.Param().GetParamClassifyList(cParamId, userInfo.UserId, ref paramClassifyList, ref Message);
 51                 var children = new List<ZTree>();
 52                 foreach (var m in paramClassifyList)
 53                 {
 54                     var json = new ZTree();
 55                     json.pId = cParamId;
 56                     json.id = m.CParamId;
 57                     json.ClassifyName = m.VClassifyName;
 58                     json.name = m.VClassifyName;
 59                     json.isParent = m.IsContainsChidrens;
 60                     json.children = new List<ZTree>();
 61                     json.CodeValue = m.VUnitMnem;
 62                     json.OrderValue = m.NSortValue;
 63                     children.Add(json);
 64                 }
 65                 Response.Write(result
 66                     ? jsonString(statusCode.success, Message, children)
 67                     : jsonString(statusCode.fail, Message));
 68             }
 69             catch (Exception ex)
 70             {
 71                 CreatErrorTxt(ex.ToString());
 72                 Response.Write(jsonString(statusCode.fail, Error.DataError));
 73             }
 74         }
 75 
 76         /// <summary>
 77         /// 获取节点详细信息
 78         /// </summary>
 79         private void GetTreeNoteInformation()
 80         {
 81             try
 82             {
 83                 string cParamId = stringWithFormId("paramId");
 84                 ParamClassify paramClassify = new ParamClassify();
 85                 bool result = RemotingProxy.Param().GetParamClassify(cParamId, userInfo.UserId, ref paramClassify, ref Message);
 86                 Response.Write(result
 87                     ? jsonString(statusCode.success, Message, paramClassify)
 88                     : jsonString(statusCode.fail, Message));
 89             }
 90             catch (Exception ex)
 91             {
 92                 CreatErrorTxt(ex.ToString());
 93                 Response.Write(jsonString(statusCode.fail, Error.DataError));
 94             }
 95         }
 96 
 97         /// <summary>
 98         /// 新增修改节点信息
 99         /// </summary>
100         private void UpdateFreeTreeNote()
101         {
102             try
103             {
104                 string cParamId ="";
105                 ParamClassify paramClassify = new ParamClassify();
106                 string[] menuIdArray = stringWithFormId("menuArray").Split(^);
107                 paramClassify.CParentParamId = menuIdArray[0]=="-1"?"":menuIdArray[0];//父级ID
108                 paramClassify.CParamId = menuIdArray[1];//自己ID
109                 paramClassify.VClassifyName = menuIdArray[2];//分类名称
110                 paramClassify.VUnitMnem = menuIdArray[3];//助记码
111                 paramClassify.NSortValue = int.Parse(menuIdArray[4]);//排序值
112                 paramClassify.NDelflag = 0;//是否删除
113                 bool result = RemotingProxy.Param().UpdateParamClassify(paramClassify, userInfo.UserId, ref cParamId, ref Message);
114                 Response.Write(result
115                     ? jsonString(statusCode.success, Message, paramClassify)
116                     : jsonString(statusCode.fail, Message));
117             }
118             catch (Exception ex)
119             {
120                 CreatErrorTxt(ex.ToString());
121                 Response.Write(jsonString(statusCode.fail, Error.DataError));
122             }
123         }
124 
125         /// <summary>
126         /// 删除节点信息
127         /// </summary>
128         private void DeleteFreeTreeNote()
129         {
130             try
131             {
132                 string deleteId = stringWithFormId("deleteId");
133                 bool result = RemotingProxy.Param().DeleteParamClassify(deleteId, userInfo.UserId, ref Message);
134                 Response.Write(result
135                     ? jsonString(statusCode.success, Message)
136                     : jsonString(statusCode.fail, Message));
137             }
138             catch (Exception ex)
139             {
140                 CreatErrorTxt(ex.ToString());
141                 Response.Write(jsonString(statusCode.fail, Error.DataError));
142             }
143         }
144         #endregion
Handler

 

以上是关于Ztree前台展示多级菜单,后台配置方法的主要内容,如果未能解决你的问题,请参考以下文章

我用ztree想显示一个动态的树形菜单,但是拼好的串传到JSP就为空,求高手帮帮忙,做出来了能保住饭碗求救

业务逻辑:七完成系统菜单根据登录人动态展示

关于destoon后台添加自定义功能+前台展示标签调用方法

MVC 后台DataTable 前台遍历

使用ztree展示树形菜单结构

ztree树的使用 ----------从后台获取的菜单数据