• 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(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);
                    }
            }
    C# Code
    有错误的请多多指教,共同进步(๑•ᴗ•๑)
    By听雨的人
  • 相关阅读:
    [ES6] Objects create-shorthand && Destructuring
    [ES6] Spread Operator
    [ES6] Rest Parameter
    [ES6] Function Params
    [React] Extracting Private React Components
    [Javascript] Array methods in depth
    生物-大脑极限:大脑极限
    生物-永生计划:永生计划
    物理-纳米技术-纳米技术应用:纳米技术应用
    物理-纳米技术:纳米技术
  • 原文地址:https://www.cnblogs.com/GoCircle/p/6231985.html
Copyright © 2020-2023  润新知