Asp.net Treeview放在UpdatePanel无刷新，修复checkBox需提交的bug
前台
<%@ 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 控件会向服务器回发。
