asp TreeView控件的使用

相对于之前发过一个TreeView控件的使用方法

本次利用js操作，页面无刷新，性能提高

Css编码可能时我的模板页样式被继承下来，导致页面变乱，不需要的可以去掉

前台

    <style>
        .tn td {
            height: 18px;
            line-height: 18px;
            display: flex;
        }

        .tn tr {
            display: flex;
        }

        .tn a {
            line-height: 18px;
            color: black;
        }
    </style>

Css Code

                        <asp:TreeView ID="tv_roleaction" runat="server" ShowCheckBoxes="All" CssClass="tn" ShowLines="True" CollapseImageToolTip="折叠">
                        </asp:TreeView>

Html Code

        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");
            }
        };

Js Code

后台

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                //调用递归函数，完成树形结构的生成
                AddTree(, (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 >  && 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);
                }
        }

C# Code