Asp.net Treeview放在UpdatePanel无刷新，修复checkBox需提交的bug

最新推荐文章于 2017-09-12 15:15:59 发布
最新推荐文章于 2017-09-12 15:15:59 发布
阅读量148 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiaojun148/article/details/84577658
版权

前台

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="mstree.aspx.cs" Inherits="Temp_mstree" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>无标题页</title>

    <script type="text/javascript" src="../Comman/Js/TreeViewDebug.js">    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel runat="server" ID="update1">
            <ContentTemplate>
                <asp:TreeView ID="TreeView1" runat="server" PopulateNodesFromClient="False" ShowCheckBoxes="All"
                    ImageSet="BulletedList" EnableClientScript="true" ShowLines="True" OnSelectedNodeChanged="Tree_SelectedNodeChanged"
                    Style="border-right: silver 1px solid; border-top: silver 1px solid; overflow: auto;
                    border-left: silver 1px solid; width: 250px; border-bottom: silver 1px solid;
                    height: 518px; background-color: #f5f5f5">
                    <Nodes>
                        <asp:TreeNode Text="awwwwwwwwww" Value="a1212" SelectAction="Select">
                            <asp:TreeNode Text="aaaaaaaaaa1" Value="a1121" SelectAction="Select"></asp:TreeNode>
                            <asp:TreeNode Text="aaaa1" Value="a42241" SelectAction="Select"></asp:TreeNode>
                            <asp:TreeNode Text="abbbbb1" Value="a42421" SelectAction="Select"></asp:TreeNode>
                            <asp:TreeNode Text="accccccc1" Value="a54541" SelectAction="Select"></asp:TreeNode>
                            <asp:TreeNode Text="addddddddd1" Value="a2101" SelectAction="Select"></asp:TreeNode>
                        </asp:TreeNode>
                        <asp:TreeNode Text="qqqqqb" Value="b" SelectAction="Select">
                            <asp:TreeNode Text="bxxxxxxxxxxxxx1" Value="b1" SelectAction="SelectExpand"></asp:TreeNode>
                        </asp:TreeNode>
                    </Nodes>
                    <SelectedNodeStyle BackColor="#C1D2EE" BorderColor="Black" />
                </asp:TreeView>
                <input type="submit" runat="server" id="submit1" />
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                </asp:DropDownList>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

 

后台

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Temp_mstree : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        TreeView1.Attributes.Add("onclick", "OnTreeNodeChecked();");
        DropDownList1.Items.Add("Custom");
        DropDownList1.Items.Add("XPFileExplorer");
        DropDownList1.Items.Add("Msdn");
        DropDownList1.Items.Add("WindowsHelp");
        DropDownList1.Items.Add("Simple");
        DropDownList1.Items.Add("Simple2");
        DropDownList1.Items.Add("BulletedList");
        DropDownList1.Items.Add("BulletedList2");
        DropDownList1.Items.Add("BulletedList3");
        DropDownList1.Items.Add("BulletedList4");
        DropDownList1.Items.Add("Arrows");
        DropDownList1.Items.Add("News");
        DropDownList1.Items.Add("Contacts");
        DropDownList1.Items.Add("Inbox");
        DropDownList1.Items.Add("Events");
        DropDownList1.Items.Add("Faq");

    }
    protected void Tree_SelectedNodeChanged(object sender, EventArgs e)
    {
        MessageBox.Show(TreeView1.SelectedNode.Value);
    }
    protected void Tree_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
    {
        setSelect(e.Node);
    }
    void setSelect(TreeNode node)
    {
        if(node.ChildNodes.Count>0)
            foreach (TreeNode childNode in node.ChildNodes)
            {
                childNode.Checked = node.Checked;
                setSelect(childNode);
            }
    }
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        switch (DropDownList1.SelectedItem.ToString())
        {
            case "Custom":
                TreeView1.ImageSet = TreeViewImageSet.Custom;
                break;
        case "XPFileExplorer":
                TreeView1.ImageSet = TreeViewImageSet.XPFileExplorer;
                break;
        case "Msdn":
                TreeView1.ImageSet = TreeViewImageSet.Msdn;
                break;
        case "WindowsHelp":
                TreeView1.ImageSet = TreeViewImageSet.WindowsHelp;
                break;
        case "Simple":
                TreeView1.ImageSet = TreeViewImageSet.Simple;
                break;
        case "Simple2":
                TreeView1.ImageSet = TreeViewImageSet.Simple2;
                break;
        case "BulletedList":
                TreeView1.ImageSet = TreeViewImageSet.BulletedList;
                break;
        case "BulletedList2":
                TreeView1.ImageSet = TreeViewImageSet.BulletedList2;
                break;
        case "BulletedList3":
                TreeView1.ImageSet = TreeViewImageSet.BulletedList3;
                break;
        case "BulletedList4":
                TreeView1.ImageSet = TreeViewImageSet.BulletedList4;
                break;
        case "Arrows":
                TreeView1.ImageSet = TreeViewImageSet.Arrows;
                break;
        case "News":
                TreeView1.ImageSet = TreeViewImageSet.News;
                break;
        case "Contacts":
                TreeView1.ImageSet = TreeViewImageSet.Contacts;
                break;
        case "Inbox":
                TreeView1.ImageSet = TreeViewImageSet.Inbox;
                break;
        case "Events":
                TreeView1.ImageSet = TreeViewImageSet.Events;
                break;
        case "Faq":
                TreeView1.ImageSet = TreeViewImageSet.Faq;
                break;
        }
    }
}

 

js文件

 

function ShowLegend(ControlID, LegendInfo) {
    alert(LegendInfo);
    var para = "LegendInfo=" + LegendInfo + "&Visible=" + document.all(ControlID).checked;
    var myAjax = new Ajax.Request('../ajax/WebFormChangeLegendVisible.aspx', { method: 'get', parameters: para, onComplete: RefreshMap });
}

function RefreshMap(request) {
    var content = request.responseText;
    parent.mapview.document.forms[0].submit();
}

function OnTreeNodeChecked() {
    var element = window.event.srcElement;
    if (!IsCheckBox(element))
        return;

    var isChecked = element.checked;
    var isIndeterminate = element.Indeterminate;
    var tree = TV2_GetTreeById("TreeView1");
    var node = TV2_GetNode(tree, element);

    TV2_SetChildNodesCheckState(node, isChecked);
    //alert(element.id);

    var parent = TV2_GetParentNode(tree, node);
    TV2_NodeOnChildNodeCheckedChanged(tree, parent, isChecked);

    //document.all("txtSelectID").value = "";
    var aCheckBox = document.getElementsByTagName("input");
    for (var i = 0; i < aCheckBox.length; i++) {
        if (aCheckBox[i].type == "checkbox") {
            if (aCheckBox[i].checked) {
                var sID = aCheckBox[i].id;
                sID = sID.substring(0, sID.indexOf("CheckBox"));
                var obja = document.getElementById(sID.replace('n', 't'));
                var sSelectID = obja.href.replace("javascript:__doPostBack('TreeView1','s')", "");
                sSelectID = sSelectID.replace("')", "");
                var aSelectID = sSelectID.split("\\");
            }
        }
    }

}

//设置子节点CheckBox的状态
function TV2_SetChildNodesCheckState(node, isChecked) {
    var childNodes = TV2i_GetChildNodesDiv(node);
    if (childNodes == null)
        return;

    var inputs = WebForm_GetElementsByTagName(childNodes, "INPUT");
    if (inputs == null || inputs.length == 0)
        return;

    for (var i = 0; i < inputs.length; i++) {
        if (IsCheckBox(inputs[i]))
            inputs[i].checked = isChecked;
        inputs[i].indeterminate = false; //父结点改变状态，子节点灰色消失

    }
}


//当子节点CheckBox状态改变引发的父结点状态改变
function TV2_NodeOnChildNodeCheckedChanged(tree, node, isChecked, isIndeterminate) {
    if (node == null)
        return;

    var childNodes = TV2_GetChildNodes(tree, node);

    if (childNodes == null || childNodes.length == 0)
        return;

    var isAllSame = true;
    var Nodegray = isIndeterminate;  //节点的灰色
    for (var i = 0; i < childNodes.length; i++)  //循环子节点
    {
        var item = childNodes[i];               //获取一个子节点
        var value = TV2_NodeGetChecked(item);   //获取子节点的checked状态
        var value2 = TV2_NodeGetindeterminate(item);   //获取子节点的isIndeterminate状态
        if (isChecked != value)       //如果checkbox的选中状态不相同
        {
            isAllSame = false;
            Nodegray = true;
            break;
        }
        if (value2) {
            Nodegray = true;
        }
    }

    var parent = TV2_GetParentNode(tree, node);
    if (isAllSame)   //为真：即checkbox的选中状态相同
    {
        TV2_NodeSetChecked(tree, node, isChecked, Nodegray);  //设置当前节点状态
        TV2_NodeOnChildNodeCheckedChanged(tree, parent, isChecked, Nodegray);   //向父结点递归
    }
    else            //为假，即checkbox的选中状态不相同，或出于灰色状态
    {
        TV2_NodeSetChecked(tree, node, true, Nodegray); //设置当前节点状态
        TV2_NodeOnChildNodeCheckedChanged(tree, parent, true, Nodegray);         //向父结点递归
    }
}


//get node relative element(etc. checkbox)
function TV2_GetNode(tree, element) {
    var id = element.id.replace(tree.id, "");
    id = id.toLowerCase().replace(element.type, "");
    id = tree.id + id;

    var node = document.getElementById(id);
    if (node == null) //leaf node, no "A" node
        return element;
    return node;
}

//get parent node
function TV2_GetParentNode(tree, node) {
    var div = WebForm_GetParentByTagName(node, "DIV");

    var table = div.previousSibling;
    if (table == null)
        return null;

    return TV2i_GetNodeInElement(tree, table);
}

//get child nodes array
function TV2_GetChildNodes(tree, node) {
    if (TV2_NodeIsLeaf(node))
        return null;

    var children = new Array();
    var div = TV2i_GetChildNodesDiv(node);
    var index = 0;

    for (var i = 0; i < div.childNodes.length; i++) {
        var element = div.childNodes[i];
        if (element.tagName != "TABLE")
            continue;

        var child = TV2i_GetNodeInElement(tree, element);
        if (child != null)
            children[index++] = child;
    }
    return children;
}

function TV2_NodeIsLeaf(node) {
    return !(node.tagName == "A"); //Todo
}

//读取结点的Checked状态
function TV2_NodeGetChecked(node) {
    var checkbox = TV2i_NodeGetCheckBox(node);
    return checkbox.checked;
}

//读取节点的indeterminate状态
function TV2_NodeGetindeterminate(node) {
    var checkbox = TV2i_NodeGetCheckBox(node);
    return checkbox.Indeterminate;
}

//判断：只要该节点有一个子节点被选中，则该节点一定被选中，若有一个子节点为灰色，则该节点为灰色
function TV2_NodeSetChecked(tree, node, isChecked, isIndeterminate) {
    var checkbox = TV2i_NodeGetCheckBox(node);
    if (checkbox != null) {
        var childNodes = TV2_GetChildNodes(tree, node);  //获取子节点的集合
        for (var i = 0; i < childNodes.length; i++) {
            var item = childNodes[i];               //获取一个子节点
            var value = TV2_NodeGetChecked(item);   //子节点的选中状态
            var value2 = TV2_NodeGetindeterminate(item); //子节点的灰色状态
            if (value) {
                isChecked = true;
                break;
            }
            if (value2)//子节点为灰色
            {
                isInDeterminate = true;
                break;
            }
        }
        checkbox.checked = isChecked;   //结点选中状态
        checkbox.indeterminate = isIndeterminate; //结点是否灰色
    }
}

function IsCheckBox(element) {
    if (element == null)
        return false;
    return (element.tagName == "INPUT" && element.type.toLowerCase() == "checkbox");
}

//get tree
function TV2_GetTreeById(id) {
    return document.getElementById(id);
}


//get div contains child nodes
function TV2i_GetChildNodesDiv(node) {
    if (TV2_NodeIsLeaf(node))
        return null;

    var childNodsDivId = node.id + "Nodes";
    return document.getElementById(childNodsDivId);
}

//find node in element
function TV2i_GetNodeInElement(tree, element) {
    var node = TV2i_GetNodeInElementA(tree, element);
    if (node == null) {
        node = TV2i_GetNodeInElementInput(tree, element);
    }
    return node;
}

//find "A" node
function TV2i_GetNodeInElementA(tree, element) {
    var as = WebForm_GetElementsByTagName(element, "A");
    if (as == null || as.length == 0)
        return null;

    var regexp = new RegExp("^" + tree.id + "n\d+$");

    for (var i = 0; i < as.length; i++) {
        if (as[i].id.match(regexp)) {
            return as[i];
        }
    }
    return null;
}

//find "INPUT" node
function TV2i_GetNodeInElementInput(tree, element) {
    var as = WebForm_GetElementsByTagName(element, "INPUT");
    if (as == null || as.length == 0)
        return null;

    var regexp = new RegExp("^" + tree.id + "n\d+");
    for (var i = 0; i < as.length; i++) {
        if (as[i].id.match(regexp)) {
            return as[i];
        }
    }
    return null;
}

//get checkbox of node
function TV2i_NodeGetCheckBox(node) {
    if (IsCheckBox(node))
        return node;

    var id = node.id + "CheckBox";
    return document.getElementById(id);
}

function showtab(m, n, count) {
    var strPic1 = 'url(../image/1.bmp)';
    var strPic2 = 'url(../image/2.bmp)';
    if (m == 8) {
        strPic1 = 'url(../image/switch03_1.gif)';
        strPic2 = 'url(../image/switch03_2.gif)';
    }

    for (var i = 1; i <= count; i++) {
        if (i == n) {
            getObject(m + '_' + i).style.background = strPic1;
            getObject('tab_' + m + '_' + i).style.display = '';
        }
        else {
            getObject(m + '_' + i).style.background = strPic2;
            getObject('tab_' + m + '_' + i).style.display = 'none';
        }
    }
}
function getObject(objectId) {
    if (document.getElementById && document.getElementById(objectId)) {
        // W3C DOM
        return document.getElementById(objectId);
    } else if (document.all && document.all(objectId)) {
        // MSIE 4 DOM
        return document.all(objectId);
    } else if (document.layers && document.layers[objectId]) {
        // NN 4 DOM.. note: this won't find nested layers
        return document.layers[objectId];
    } else {
        return false;
    }
} // getObject

function Init() {
    //var w = document.body.scrollWidth;
    var w = document.body.clientWidth;
    //var h = document.body.scrollHeight;
    var h = document.body.clientHeight;

    getObject("tabTree").style.height = h - 90;
    getObject("divHRTree").style.height = h - 100;
}

TreeView.EnableClientScript 属性

获取或设置一个值，指示 TreeView 控件是否呈现客户端脚本以处理展开和折叠事件。

若要在兼容的浏览器上呈现客户端脚本，则为 true；否则为 false。默认值为 true。

使用 EnableClientScript 属性可指定 TreeView 控件是否在兼容的浏览器上呈现客户端脚本以处理展开和折叠事件。当此属性设置为 true 时，兼容的浏览器执行代码以展开和折叠客户端上的节点。要使客户端脚本正常工作，必须提前获知树节点数据。使用客户端脚本可防止每次展开或折叠节点时向服务器回发。

未能提前获知树节点数据时，如果 PopulateNodesFromClient 属性也设置为 true，则可以从客户端填充节点。在这种情况下，您还必须提供一个事件处理方法，以便 TreeNodePopulate 事件填充节点。有关客户端节点填充的更多信息，请参见 PopulateNodesFromClient。

如果 EnableClientScript 属性设置为 false，则每次展开或折叠节点时 TreeView 控件会向服务器回发。

 

月光小提琴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Asp.Net TreeView Checkbox
03-22
本示例"AspNet TreeView Checkbox"就是关于如何在Asp.Net的TreeView控件中集成Checkbox，并实现父子级Checkbox的联动功能。 首先，要理解Asp.Net TreeView的基本用法。TreeView控件由TreeNode对象组成，每个...
Asp.net 2.0 Treeview 无限级无刷新示例
weixin_33972649的博客
08-23 75
&lt;%@ Page Language="C#" %&gt;&lt;%@ Import Namespace="System.IO" %&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;&lt;script 
C# Asp.net 中的Treeview 点击不刷新页面的
HelloNull2010的专栏
11-27 1276
<br /><%@ Page Language="C#" AutoEventWireup="true" CodeFile="huozhu.aspx.cs" Inherits="huozhu" SmartNavigation="true" %><br /> <br />>找到方法了，主要是在页面的源里面，加入SmartNavigation="true"，这样子可以防止闪烁~~~~ <br /> <br />>网上搜来结果，的确挺好用的。但是觉得不够正道，呵呵。<br />也有很多其他方法的，试了一些，都没实现
TreeView点击之后保持点击节点的方法
huangbomeizi的专栏
06-27 1555
由于微软的TreeView设计成提交式的，所以有的人写程序的时候喜欢在把node.NavigateUrl写成本页再加上一个参数（我原来也喜欢这么做）,这样做的后果是一提交之后，treeView又回到原来的样式，原来点的节点又缩回去，让用户不知道点了哪一个节点，网上有很多人给了思路，以下是解决方法。一：首先在给节点赋值的时候不要给NavigateUrl赋值。把整个TreeView的TreeVie
ASP.NET 中防止TreeView展开时刷新
dongcuiwei9616的博客
05-20 233
TreeView控件的EnableClientScript属性设置为False(默认为True) 转载于:https://www.cnblogs.com/ZSCFang/archive/2011/05/20/2052124.html
asp.net treeview checkbox 相关问题
10-29
本文将深入探讨如何处理与ASP.NET TreeView控件中的Checkbox相关的常见问题。 首先，我们来看一个简单的示例，它展示了如何动态地生成包含Checkbox的TreeView。在`Display`方法中，数据被加载到一个TreeView中，每...
Asp.net treeview实现无限级树实现代码
10-29
最近研究了一下treeview，发现有两种实现无限级树的方法，文字不想多写，直入主题。
ASP.NET TreeView阻止重复点击回发及滚动条保持
aobian0880的博客
02-28 375
　　在做一个网站，左侧一个树形结构，右侧一个frame，点击树形结构，重定向frame。然后遇到几个问题问题： 重复点击treeview的节点，frame重新刷新为空白。如果使用NavigateUrl方式，SelectNode的样式又无法应用。 如果treeview结构很高，点击节点，页面重新刷新后，滚动条回到了顶端。 　　所有的节点点击都是通过_doPostBack函数来...
asp.net 无刷新的TreeView
03-14
无刷新的TreeView 电子书 通过异步方式 加载树节点
TreeView无刷新操作
11-09
TreeView无限级的绑定，添加，删除，修改。 使用Ajax+ashx+access数据库实现TreeView无刷新操作。
Asp.net中Treeview终极解决方案！！
baron的专栏
03-12 3218
最近在做权限模块，挺头痛的东西。不包括权限部分的业务，还包括权限部分的界面实现。由于采用了微软的Treeview控件来分配权限，所以碰到网上热烈讨论的有关TreeView操作的刷新问题，在众位先人和同事的帮助下，终于使Treeview的问题得到了较好的解决。1、前台控制展开，收缩，Check/UnCheck，后台控制SelectedIndexChanged。解决方法：将autopostback设置
asp:TreeView UpdatePanel学习笔记
yongzhe277的专栏
09-12 722
TreeVew控件由Treenode(节点)构成，一个节点主要是将数据存储在两个属性， Text属性和 value属性。 值 Text 属性显示在 TreeView 控件，Value 属性用来存储节点的其他数据，如用于处理回发事件的相关数据。TreeView控件中的节点有两种模式：选择模式和导航模式。默认处于选择模式，若要使其处于导航模式，将NavigateUrl设置为与节点相关联的页面。若设置
asp.net treeview 节点添加 移动 修改
最新发布
09-11
ASP.NET TreeView是一个用于展示层次结构数据的控件，它以树状的方式展示数据，并允许对节点进行添加、移动和修改。 要向TreeView控件添加节点，可以使用TreeView的Nodes集合来操作。可以通过创建新的TreeNode对象...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值