相对于之前发过一个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

asp TreeView控件的使用的更多相关文章

  1. 【ASP.NET 进阶】TreeView控件学习

    这几天上班没事做,也不好打酱油,学点没接触过的新东西吧,基本了解了下TreeView控件. TreeView 控件用于在树结构中显示分层数据,例如目录或文件目录等. 下面看代码吧: 1.效果图 2.静 ...

  2. ASP.NET - TreeView控件，只操作最后一级节点

    效果: 使用母板页进行,左右页面进行跳转. 绑定TreeView控件:http://www.cnblogs.com/KTblog/p/4792302.html 主要功能: 点击节点的时候,只操作最后一 ...

  3. TreeView控件例子

    XmL文件代码: <?xml version="1.0" encoding="utf-8" ?> <Area> <Province ...

  4. TreeView控件绑定数据库

    1.在设计视图里面的代码 <form id="form1" runat="server"> <div> <h1>两个表< ...

  5. ASP.NET控件属性大全

    ASP.NET控件属性大全 DataGridView 控件DataGridView 控件提供用来显示数据的可自定义表.使用 DataGridView 类,可以自定义单元格.行.列和边框. 注意Data ...

  6. TreeView控件使用

    treeView1.SelectedNode = treeView1.Nodes[0];  //选中当前treeview控件的根节点为当前节点添加子节点:  TreeNode tmp; tmp = n ...

  7. 基于Treeview控件遍历本地磁盘

    一.前言 Treeview控件常用于遍历本地文件信息,通常与Datagridview与ImageList搭配.ImageList控件用于提供小图片给TreeView控件,DatagridView通常显 ...

  8. asp.net <asp:Content>控件

    <asp:Content ID="Content2" ContentPlaceHolderID="CPH_MainContent" runat=" ...

  9. Win32中TreeView控件的使用方法，类似于资源管理器中文件树形显示方式

    首先是头文件,内容如下: #include <tchar.h> #include "..\CommonFiles\CmnHdr.h" #include <Wind ...

随机推荐

  1. C# MVC jsonp初接触成功

    利用jsonp进行跨域请求资源 C# MVC ApiControllers准备如下: 1.需要在引用处右键管理NuGet安装jsonp插件 2.在Application_Start()中配置 Glob ...

  2. mysql中使用 where 1=1和 0=1 的作用

    操作mysql的时候,经常使用where语句进行查询.当where语句不存在的时候,经常在后面加一个where 1=1 where 1=1; 这个条件始终为True,在不定数量查询条件情况下,1=1可 ...

  3. python 学习（json）（转）

    Json简介:Json,全名 JavaScript Object Notation,是一种轻量级的数据交换格式.Json最广泛的应用是作为AJAX中web服务器和客户端的通讯的数据格式.现在也常用于h ...

  4. 集群间Session共享问题解决方案

    两个基本概念的生命周期 session: 当新客户端发现一个HTTP请求时服务端会创建一个session.并分配一个sessionID作为服务端来客户端的识别,session对象会保存在服务端.此时s ...

  5. Mysql查询重复记录

    第一步 使用group by 和 having cout 查找重复字段 SELECT t1.`order_book_id` FROM `quant_stock_info` t1 GROUP BY t1 ...

  6. Thinkphp回顾之(四)查询方法深入学习

    本次讲的查询方法主要有:表达式查询,模糊查询,between语句,in语句,区间查询,统计数据,普通方式查询,但大多数都只是引入数组而已,明白了第一个,其他的也就差不多全明白了,唯一要注意的是在后台中 ...

  7. 如何用Java实现DVD的一些功能

    /* 这个代码中涉及到的知识点很多,大家要慢慢悟!! */ import java.util.*; import java.text.*; class DvdSet { //定义三个属性 String ...

  8. java 入门学习

    想要学习java,首先你要明白java是干嘛的,它有什么吸引之处,懂程序的都应该知道,java是很多计算机语言的根本,无论在什么时代,科技如何更新,java都不会落后,现在的我在学习初级java,下面 ...

  9. MongoDB 可视化工具RoboMongo --- windows

    去官网下载安装包https://robomongo.org/download随便找一个目录进行安装(当然不要在c盘,和mongo安装路径无关) 安装完成后,启动MongoDB MongoDB的安装和使 ...

  10. EF 如何更新少量字段

    EF更新少量字段需要解决两个问题 1.动态的将需要更新的字段提取出来 2.将提取出来的字段设为更新状态 通常更新的时候,都是根据条件将实体取出来,然后赋值字段,最后更新整个实体,所以在方法上看似是更新 ...