1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyTree.aspx.cs" Inherits="test_test_dhtmlTree" %> 2 3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4<html xmlns="http://www.w3.org/1999/xhtml"> 5<head runat="server"> 6 <title></title> 7 <script src="js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> 8</head> 9<body> 10 <form id="form1" runat="server"> 11 <!--树图层开始--> 12 <div id="tvModel" onclick="postBackByObject(event)"> 13 <asp:Label ID="lTree" runat="server" CssClass="treeFont"></asp:Label> 14 </div> 15 <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> 16 <!--树图层结束--> 17 <script type="text/javascript"> 18 function ShowChild(vlink) { 19 var vCurrent = $(vlink); //得到鼠标点击的span元素 20 var vImg = vCurrent.children("img"); //得到span的子元素图像元素 21 var vImgSrc = vImg.attr("src"); //得到图像的src; 22 23 var vchild = vCurrent.parent("td").parent("tr").parents("table").next("div"); //得到对应的所有子节点所在的层 24 if (vImgSrc == "images/treeImage/plus.gif")//切换图像折叠或者展开 25 { 26 27 vImg.attr("src", "images/treeImage/add.gif"); 28 } 29 else { 30 vImg.attr("src", "images/treeImage/plus.gif"); 31 } 32 vchild.toggle(); //子层显示或者隐藏 33 } 34 </script> 35 <script type="text/javascript"> 36 function postBackByObject(e) { //兼容FireFox的写法，FireFox没有window.event.srcElement; 37 var o = e.target || window.event.srcElement; 38 if (o == null) { 39 return; 40 } 41 if (o.tagName == "INPUT" && o.type == "checkbox" && (o.id.indexOf("ckedit_") != -1 || o.id.indexOf("cksearch_") != -1)) //选中了设置权限的CheckBox 42 { 43 return; 44 } 45 if (o.tagName == "INPUT" && o.type == "checkbox") //点击treeview的checkbox是触发 46 { 47 var d = o.id; //获得当前checkbox的id; 48 var e = d.replace("ck_", "Nodes"); //通过查看脚本信息,获得包含所有子节点div的id 49 var div = window.document.getElementById(e); //获得div对象 50 if (div != null) //如果不为空则表示,存在自节点 51 { 52 var check = div.getElementsByTagName("INPUT"); //获得div中所有的已input开始的标记 53 for (i = 0; i < check.length; i++) { 54 if (check[i].type == "checkbox") //如果是checkbox 55 { 56 check[i].checked = o.checked; //字节点的状态和父节点的状态相同,即达到全选 57 } 58 59 } 60 PostParentNode(o); 61 } 62 else //点子节点的时候,使父节点的状态改变,即不为全选 63 { 64 PostParentNode(o); 65 } 66 } 67 } 68 69 function PostParentNode(o) { 70 var divid = o.parentElement.parentElement.parentElement.parentElement.parentElement; //子节点所在的div 71 var id = divid.id.replace("Nodes", "ck_"); //获得根节点的id 72 var vCheckBox = window.document.getElementById(id); //父CheckBox,新增递归调用 add bywfz 73 var checkbox = divid.getElementsByTagName("INPUT"); //获取所有子节点数 74 var s = 0; 75 for (i = 0; i < checkbox.length; i++) { 76 if (checkbox[i].checked) //判断有多少子节点被选中 77 { 78 s++; 79 } 80 } 81 if (s > 0) //如果全部选中 或者 选择的是另外一个根节点的子节点 ， 82 { // 则开始的根节点的状态仍然为选中状态 83 window.document.getElementById(id).checked = true; 84 if (vCheckBox.tagName == "INPUT" && vCheckBox.type == "checkbox") { 85 PostParentNode(vCheckBox); //递归调用 86 } 87 } 88 else { //否则为没选中状态 89 window.document.getElementById(id).checked = false; 90 if (vCheckBox.tagName == "INPUT" && vCheckBox.type == "checkbox") { 91 PostParentNode(vCheckBox); //递归调用 92 } 93 } 94 } 95 </script> 96 </form> 97</body> 98</html> 99 100 101 102using System; 103using System.Collections.Generic; 104using System.Linq; 105using System.Web; 106using System.Text; 107using System.Data; 108using System.Web.UI; 109using System.Web.UI.WebControls; 110 111public partial class test_test_dhtmlTree : System.Web.UI.Page 112{ 113 protected void Page_Load(object sender, EventArgs e) 114 { 115 116 if (!Page.IsPostBack) 117 { 118 ViewState["dtTree"] = createDT(); 119 ViewState["dtAction"] = createActionDT(); 120 BindTree(); 121 } 122 } 123 124 #region 绑定顶级树 125 /// <summary> 126 /// ck_开头表示树上的带CheckBox的节点，后面的参数是该节点的编号 127 /// </summary> 128 protected void BindTree()//外层树根节点 129 { 130 StringBuilder sb = new StringBuilder(); 131 132 DataTable dt = (DataTable)ViewState["dtTree"]; 133 DataRow[] drArr = dt.Select(" parent_id='0' "); 134 135 foreach (DataRow dr1 in drArr) 136 { 137 string name = dr1["module_name"].ToString(); 138 string id = dr1["module_id"].ToString(); 139 string sParent = @"<table cellpadding='0' cellspacing='0' style='border-width:0;' > 140 <tr > 141 <td > 142 <span id='sParent' style='cursor:hand' onclick='javascript:ShowChild(this)'> 143 <img src='images/treeImage/plus.gif' alt='折叠' style='border-width:0;' /></span> 144 </td> 145 <td style='white-space:nowrap;'><input type='checkbox' name='ck_" + id + "' id='ck_" + id + @"' /> 146 <span id='strParent'>" + name + @"</span> 147 </td> 148 </tr> 149 </table>"; //父节点字符串; 150 sb.Append(sParent); 151 string sChild = BindChild(dt,id, 1); 152 sb.Append(sChild); 153 }//循环结束 154 this.lTree.Text = sb.ToString(); 155 } 156 #endregion 157 158 #region 加载子节点 159 /// <summary> 160 /// 加载子节点 161 /// </summary> 162 /// <param name="parentId">父节点编号</param> 163 /// <param name="level">第几层子树，层数不同，跟页面最左侧的间隔也不同，要添加td</param> 164 /// <returns></returns> 165 protected string BindChild(DataTable dt, string parentId, int level) //产生子树 166 { 167 StringBuilder sb = new StringBuilder(); 168 sb.Append("<div id='Nodes" + parentId + "' style='display:block;'>"); //层的id和父节点上的id相同，可以实现选中父节点自动选择子节点。。根据id用js实现 169 DataRow[] drArr = dt.Select(" parent_id='" + parentId + "' "); 170 171 foreach (DataRow dr1 in drArr) 172 { 173 string name = dr1["module_name"].ToString(); 174 string id = dr1["module_id"].ToString(); 175 string strBreak = ""; 176 string sChild = @" 177 <table cellpadding='0' cellspacing='0' style='border-width:0;' > 178 <tr>"; 179 sb.Append(sChild); 180 for (int i = 1; i <= level; i++) 181 { 182 strBreak = strBreak + "<td><div style='width:20px;height:1px'></div></td>";//不同层级间隔不同 183 } 184 sb.Append(strBreak); 185 if (HasChild(dt,id) == true) //有子节点的有折叠效果，反之没有 186 { 187 sb.Append(@"<td > 188 <span id='tvModeln0' style='cursor:hand' onclick='javascript:ShowChild(this)'> 189 <img src='images/treeImage/plus.gif' alt='折叠' style='border-width:0;' /></span> 190 </td>"); 191 } 192 else 193 { 194 sb.Append(@"<td ><img src='images/treeImage/blank.gif' alt='' /></td>"); 195 } 196 if (HasChild(dt, id) == true) 197 { 198 sChild = @"<td style='white-space:nowrap;'> 199 <input type='checkbox' name='ck_" + id + "' id='ck_" + id + @"' /> 200 <span id='tvModelt1'>" + name + @" </span> 201 </td> 202 </tr> 203 </table>"; 204 } 205 else//没有子节点的，添加代表权限选择的checkBox 206 { 207 string LoopAction = string.Empty; 208 DataRow[] drAction = ((DataTable)ViewState["dtAction"]).Select(" module_id='" + id + "' "); 209 for (int k = 0; k < drAction.Length; k++) 210 { 211 string RamID = id + k.ToString().PadLeft(4, '0'); 212 LoopAction += drAction[k]["action_name"]; 213 LoopAction += "<input type='checkbox' name='ckedit_" + RamID + "' id='ckedit_" + RamID + @"' value='" + id + "@" + drAction[k]["action_id"] + "' />"; 214 } 215 sChild = @"<td style='white-space:nowrap;'> 216 <input type='checkbox' name='ck_" + id + "' id='ck_" + id + @"' /> 217 <span id='tvModelt1'>" + name + @" </span> 218 </td> 219 <td><div style='width:40px;height:1px'></div></td> 220 <td align='right'>" + LoopAction + @" 221 </td> 222 </tr> 223 </table>"; 224 } 225 sb.Append(sChild); 226 if (HasChild(dt,id) == true) 227 { 228 229 sb.Append(BindChild(dt,id, level + 1)); 230 } 231 } 232 sb.Append("</div>"); 233 return sb.ToString(); 234 } 235 #endregion 236 237 #region 检查当前项是否有下级 238 protected bool HasChild(DataTable dt, string parentId) 239 { 240 bool blReturn = false; 241 DataRow[] drArr = dt.Select(" parent_id='" + parentId + "' "); 242 if (drArr.Length > 0) 243 { 244 blReturn = true; 245 } 246 return blReturn; 247 } 248 #endregion 249 250 #region 按钮事件 251 protected void Button1_Click(object sender, EventArgs e) 252 { 253 System.Collections.Specialized.NameValueCollection dic = Request.Form; 254 string[] keys = dic.AllKeys; 255 foreach (string key in keys) 256 { 257 if (key.ToUpper().IndexOf("CKEDIT_") != -1)//选中可维护节点 258 { 259 Response.Write("key:" + key + " " + "value:" + Request.Form[key] + "<br/>"); 260 } 261 } 262 } 263 #endregion 264 265 #region 创建数据 266 protected DataTable createDT() 267 { 268 DataTable dt = new DataTable(); 269 dt.Columns.Add("module_id"); 270 dt.Columns.Add("module_name"); 271 dt.Columns.Add("parent_id"); 272 dt.Columns.Add("module_url"); 273 dt.Columns.Add("module_order"); 274 275 dt.Rows.Add("M01", "广东", "0", "", "1"); 276 277 dt.Rows.Add("M0101", "深圳", "M01", "", "100"); 278 dt.Rows.Add("M010101", "南山区", "M0101", "", "1000"); 279 dt.Rows.Add("M010102", "罗湖区", "M0101", "", "1001"); 280 dt.Rows.Add("M010103", "福田区", "M0101", "", "1002"); 281 dt.Rows.Add("M010104", "宝安区", "M0101", "", "1003"); 282 dt.Rows.Add("M010105", "龙岗区", "M0101", "", "1004"); 283 284 dt.Rows.Add("M0102", "广州", "M01", "", "101"); 285 dt.Rows.Add("M010201", "越秀区", "M0102", "", "1105"); 286 dt.Rows.Add("M010202", "海珠区", "M0102", "", "1106"); 287 dt.Rows.Add("M010203", "天河区", "M0102", "", "1107"); 288 dt.Rows.Add("M010204", "白云区", "M0102", "", "1108"); 289 dt.Rows.Add("M010205", "黄埔区", "M0102", "", "1109"); 290 dt.Rows.Add("M010206", "荔湾区", "M0102", "", "1110"); 291 dt.Rows.Add("M010207", "罗岗区", "M0102", "", "1111"); 292 dt.Rows.Add("M010208", "南沙区", "M0102", "", "1112"); 293 return dt; 294 } 295 296 protected DataTable createActionDT() 297 { 298 DataTable dt = new DataTable(); 299 dt.Columns.Add("action_id"); 300 dt.Columns.Add("module_id"); 301 dt.Columns.Add("action_name"); 302 dt.Columns.Add("action_order"); 303 304 dt.Rows.Add("a0001", "M010101", "查看", "1"); 305 dt.Rows.Add("a0002", "M010101", "编辑", "2"); 306 dt.Rows.Add("a0003", "M010101", "删除", "3"); 307 dt.Rows.Add("a0004", "M010101", "锁定", "4"); 308 309 dt.Rows.Add("a0005", "M010203", "查看", "5"); 310 dt.Rows.Add("a0006", "M010203", "编辑", "6"); 311 dt.Rows.Add("a0007", "M010203", "删除", "7"); 312 dt.Rows.Add("a0008", "M010203", "锁定", "8"); 313 314 return dt; 315 } 316 #endregion 317}
asp.net权限目录树，适合网站权限设计
Wesley13
2021-10-11
1121 0 0
点赞
收藏
评论区
加载中...