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>
第二步、构建实体类。
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 }
第三步、后台代码。
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
以上是关于Ztree前台展示多级菜单，后台配置方法的主要内容，如果未能解决你的问题，请参考以下文章