asp TreeView控件的使用
相对于之前发过一个TreeView控件的使用方法
本次利用js操作,页面无刷新,性能提高
Css编码可能时我的模板页样式被继承下来,导致页面变乱,不需要的可以去掉
前台
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style> .tn td { height: 18px; line-height: 18px; display: flex; } .tn tr { display: flex; } .tn a { line-height: 18px; color: black; } </style>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<asp:TreeView ID="tv_roleaction" runat="server" ShowCheckBoxes="All" CssClass="tn" ShowLines="True" CollapseImageToolTip="折叠"> </asp:TreeView>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var nodecheck = { init: function () { //配合asp treeview使用 //需在页面加载时设置 this.TreeView.Attributes.Add("onclick", "nodecheck.init()"); var element = event.srcElement; if (element.tagName == "INPUT" && element.type == "checkbox") { var checkedState = element.checked; while (element.tagName != "TABLE") { //获取当前节点所在的table element = element.parentElement; } this.SetChildChecked(element, checkedState); this.SetParentChecked(element, checkedState); } }, SetChildChecked: function (table, checked) { table = table.nextSibling; if (table == null || !table.translate) //判断有没有子节点 return; var childTables = table.getElementsByTagName("TABLE");//获取所有子节点所在的table for (var tableIndex = 0; tableIndex < childTables.length; tableIndex++) { this.SetNodeChecked(childTables[tableIndex], checked); } }, SetParentChecked: function (table, checked) { if (table == null || table.rows[0].cells.length == 2) { return; } var parentTable = table.parentElement.previousElementSibling;//获得父级table if (parentTable == null || !parentTable.translate) //没有父节点就停止 return; //判断父节点下有没有被选中的节点 node = parentTable.nextSibling; var ifnochecked = true; if (node == null || !node.translate) //判断有没有子节点 --没有子节点就停止 return; var childTables = node.getElementsByTagName("TABLE");//获取所有子节点所在的table for (var tableIndex = 0; tableIndex < childTables.length; tableIndex++) { if (this.GetNodeChecked(childTables[tableIndex])) { ifnochecked = false; this.SetNodeChecked(parentTable, true); break; } } if (ifnochecked) { this.SetNodeChecked(parentTable, false); } this.SetParentChecked(parentTable, checked); }, SetNodeChecked: function (table, checked) { //设置节点选中状态 if (this.GetNode(table).length == 1) { checkboxes[0].checked = checked; } }, GetNodeChecked: function (table) { //获取节点选中状态 if (this.GetNode(table).length == 1) { return checkboxes[0].checked; } }, GetNode: function (table) { //获取节点 var checkboxIndex = table.rows[0].cells.length - 1; var cell = table.rows[0].cells[checkboxIndex]; return checkboxes = cell.getElementsByTagName("INPUT"); } };
后台
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //调用递归函数,完成树形结构的生成 AddTree(0, (TreeNode)null); this.tv_roleaction.Attributes.Add("onclick", "nodecheck.init()"); } } //递归添加树的节点 public void AddTree(int ParentID, TreeNode pNode) { DataView dvTree = new DataView(SysActionBLL.GetInstance().GetList("")); //过滤ParentID,得到当前的所有子节点 dvTree.RowFilter = "[FPARENTACTIONID] = " + ParentID; foreach (DataRowView Row in dvTree) { TreeNode Node = new TreeNode(); Node.Value = Row["FACTIONID"].ToString(); Node.Text = Row["FACTIONNAME"].ToString(); Node.Expanded = true; if (pNode == null) { //添加根节点 tv_roleaction.Nodes.Add(Node); } else { //?添加当前节点的子节点 pNode.ChildNodes.Add(Node); } //判断当前角色是否拥有该权限 if (roleaction.Count > 0 && roleaction.Find(p => p.ToString() == Row["FACTIONID"].ToString()) != null) { Node.Checked = true; } AddTree(Int32.Parse(Row["FACTIONID"].ToString()), Node); //再次递归 } } /// <summary> /// 保存 /// </summary> protected void btnSave_click(object sender, EventArgs e) { //获取选中节点的value集合 List<object> roleaction = new List<object>(); foreach (TreeNode node in tv_roleaction.CheckedNodes) { roleaction.Add(node.Value); } }
有错误的请多多指教,共同进步(๑•ᴗ•๑)
By听雨的人
By听雨的人