[导入]TreeView级联选择(后续)
做完了才想起来,应该把这个功能附加在一个TreeView中,不用做大的改动,就把那一堆脚本给加进去就Ok了。
做一个Web控件工程,让类继承自TreeView,重写Render方法,在工程中添加一个资源文件,在资源文件中添加一个文件资源,将那些JavaScript脚本方法作为文件添加进资源。
具体内容:
1.MyTreeView.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace com.xaccp
{
[DefaultProperty("Text")]
[ToolboxData("<{0}:MyTreeView runat=server></{0}:MyTreeView>")]
public class MyTreeView : TreeView
{
bool autoSelect=false;
/// <summary>
/// 自动选择,默认为false
/// </summary>
public bool AutoSelect
{
get { return autoSelect; }
set
{
autoSelect = value;
this.ShowCheckBoxes = TreeNodeTypes.All;
}
}
{
[DefaultProperty("Text")]
[ToolboxData("<{0}:MyTreeView runat=server></{0}:MyTreeView>")]
public class MyTreeView : TreeView
{
bool autoSelect=false;
/// <summary>
/// 自动选择,默认为false
/// </summary>
public bool AutoSelect
{
get { return autoSelect; }
set
{
autoSelect = value;
this.ShowCheckBoxes = TreeNodeTypes.All;
}
}
protected override void Render(HtmlTextWriter writer)
{
base.Render(writer);
string ss = global::com.xaccp.Resource1.MyTreeViewJs;
ss = "<script type='text/javascript' language='javascript'>" + ss;
ss += "AutoSelectHandle(\"" + this.ClientID + "\");";
ss += "</script>";
if (this.ShowCheckBoxes==TreeNodeTypes.All && autoSelect)
{
writer.Write(ss);
}
}
}
}
{
base.Render(writer);
string ss = global::com.xaccp.Resource1.MyTreeViewJs;
ss = "<script type='text/javascript' language='javascript'>" + ss;
ss += "AutoSelectHandle(\"" + this.ClientID + "\");";
ss += "</script>";
if (this.ShowCheckBoxes==TreeNodeTypes.All && autoSelect)
{
writer.Write(ss);
}
}
}
}
2.资源文件中包含的js脚本MyTreeViewJS.js:
function SelectAllParent(obj,x)
{
//如果传过来的CheckBox选中了
if(obj.checked==true)
{
//获得某个CheckBox所在的div
var parentDiv=obj.parentElement.parentElement.parentElement.parentElement.parentElement;
//如果没有这个div,那么意味着到根节点了。
if(parentDiv==null)
{
return;
}
//获得这个div的父节点的CheckBox的id
var parentId=parentDiv.id.replace("Nodes","CheckBox");
//获得父节点的CheckBox
var temp=document.getElementById(parentId);
//如果有父节点,那么不是根节点
if(temp!=null)
{
//设置父节点的CheckBox为选中
document.getElementById(parentId).checked=true;
//继续以这个父节点找爷爷节点。
SelectAllParent(document.getElementById(parentId),x);
}
}
else
{
//设置一个变量
var result=false;
//还是获取这个CheckBox的父div
var parentDiv=obj.parentElement.parentElement.parentElement.parentElement.parentElement;
if(parentDiv==null)
{
return;
}
var items=parentDiv.childNodes;
//遍历div中的每个table
for(var i=0;i<items.length;i++)
{
if(items[i].tagName=='TABLE')
{
//找到装有CheckBox的tr
var tr=items[i].childNodes[0].childNodes[parseInt(x)];
//找到td集合
var tds=tr.childNodes;
//找到最后一个td
var lastTd=tds[tds.length-1];
//获得最后一个td中的第一个元素,就是checkbox
if(lastTd.childNodes.length==0)
{
break;
}
var input=lastTd.childNodes[0].id;
//如果其中有一个兄弟节点选中了
if(document.getElementById(input).checked==true)
{
//那么结果为真
result=true;
//那么以这个CheckBox继续向上遍历
SelectAllParent(document.getElementById(input),x);
return;
}
}
}
//如果循环都跑完了,result依然false,
//意味着这个节点的父节点的选中状态应该为false
document.getElementById(parentDiv.id.replace("Nodes","CheckBox")).checked=result;
//接着用这个父节点,去找爷爷节点。
SelectAllParent(document.getElementById(parentDiv.id.replace("Nodes","CheckBox")),x);
}
}
//看是否应用了样式
//如果没有应用样式,table中应该只有1行
//如果应用了样式,table中应该有3行
//CheckBox一般会在第二行中出现
function HasStyle(tree)
{
var x=document.getElementById(tree).childNodes[0].childNodes[0].childNodes.length;
return parseInt(x-1);
}
//选中子节点
//obj为某个点中的CheckBox
//x为0:没有应用样式,1:应用了样式
function SelectAllChild(obj,x)
{
//获得子节点的id
var childrenId=obj.id.replace("CheckBox","Nodes");
//获得子节点
var temp=document.getElementById(childrenId);
//如果有子节点
if(temp!=null)
{
//获取其中的子节点,目的是找那些TABLE
//因为在Table中有CheckBox
var items=document.getElementById(childrenId).childNodes;
var count=items.length;
for(var i=0;i<count;i++)
{
if(items[i].tagName=='TABLE')
{
//找到tr
var tr=items[i].childNodes[0].childNodes[parseInt(x)];
//找到td集合
var tds=tr.childNodes;
//找到最后一个td
var lastTd=tds[tds.length-1];
//获得最后一个td中的第一个元素,就是checkbox
var input=lastTd.childNodes[0].id;
//设置这个checkbox的状态为父节点的状态
document.getElementById(input).checked=obj.checked;
//接着看这个子节点还有没有孙子节点。
SelectAllChild(document.getElementById(input),parseInt(x));
}
}
}
}
//遍历每个CheckBox,给它们加上onclick处理过程
function AutoSelectHandle(treeID)
{
var x=HasStyle(treeID);
//获得所有的input标记
var objs = document.getElementsByTagName("input");
//遍历
for(var i=0;i<objs.length;i++)
{
//如果是CheckBox
if(objs[i].type=='checkbox')
{
var obj=objs[i];
//如果CheckBox的id中包括TreeView在客户端的id
//那么意味着这个CheckBox是TreeView中的CheckBox
if(obj.id.indexOf(treeID)!=-1)
{
//注册事件处理过程
objs[i].onclick=function()
{
//选中子节点
SelectAllChild(this,parseInt(x));
//选中父节点
SelectAllParent(this,x);
};
}
}
}
}
{
//如果传过来的CheckBox选中了
if(obj.checked==true)
{
//获得某个CheckBox所在的div
var parentDiv=obj.parentElement.parentElement.parentElement.parentElement.parentElement;
//如果没有这个div,那么意味着到根节点了。
if(parentDiv==null)
{
return;
}
//获得这个div的父节点的CheckBox的id
var parentId=parentDiv.id.replace("Nodes","CheckBox");
//获得父节点的CheckBox
var temp=document.getElementById(parentId);
//如果有父节点,那么不是根节点
if(temp!=null)
{
//设置父节点的CheckBox为选中
document.getElementById(parentId).checked=true;
//继续以这个父节点找爷爷节点。
SelectAllParent(document.getElementById(parentId),x);
}
}
else
{
//设置一个变量
var result=false;
//还是获取这个CheckBox的父div
var parentDiv=obj.parentElement.parentElement.parentElement.parentElement.parentElement;
if(parentDiv==null)
{
return;
}
var items=parentDiv.childNodes;
//遍历div中的每个table
for(var i=0;i<items.length;i++)
{
if(items[i].tagName=='TABLE')
{
//找到装有CheckBox的tr
var tr=items[i].childNodes[0].childNodes[parseInt(x)];
//找到td集合
var tds=tr.childNodes;
//找到最后一个td
var lastTd=tds[tds.length-1];
//获得最后一个td中的第一个元素,就是checkbox
if(lastTd.childNodes.length==0)
{
break;
}
var input=lastTd.childNodes[0].id;
//如果其中有一个兄弟节点选中了
if(document.getElementById(input).checked==true)
{
//那么结果为真
result=true;
//那么以这个CheckBox继续向上遍历
SelectAllParent(document.getElementById(input),x);
return;
}
}
}
//如果循环都跑完了,result依然false,
//意味着这个节点的父节点的选中状态应该为false
document.getElementById(parentDiv.id.replace("Nodes","CheckBox")).checked=result;
//接着用这个父节点,去找爷爷节点。
SelectAllParent(document.getElementById(parentDiv.id.replace("Nodes","CheckBox")),x);
}
}
//看是否应用了样式
//如果没有应用样式,table中应该只有1行
//如果应用了样式,table中应该有3行
//CheckBox一般会在第二行中出现
function HasStyle(tree)
{
var x=document.getElementById(tree).childNodes[0].childNodes[0].childNodes.length;
return parseInt(x-1);
}
//选中子节点
//obj为某个点中的CheckBox
//x为0:没有应用样式,1:应用了样式
function SelectAllChild(obj,x)
{
//获得子节点的id
var childrenId=obj.id.replace("CheckBox","Nodes");
//获得子节点
var temp=document.getElementById(childrenId);
//如果有子节点
if(temp!=null)
{
//获取其中的子节点,目的是找那些TABLE
//因为在Table中有CheckBox
var items=document.getElementById(childrenId).childNodes;
var count=items.length;
for(var i=0;i<count;i++)
{
if(items[i].tagName=='TABLE')
{
//找到tr
var tr=items[i].childNodes[0].childNodes[parseInt(x)];
//找到td集合
var tds=tr.childNodes;
//找到最后一个td
var lastTd=tds[tds.length-1];
//获得最后一个td中的第一个元素,就是checkbox
var input=lastTd.childNodes[0].id;
//设置这个checkbox的状态为父节点的状态
document.getElementById(input).checked=obj.checked;
//接着看这个子节点还有没有孙子节点。
SelectAllChild(document.getElementById(input),parseInt(x));
}
}
}
}
//遍历每个CheckBox,给它们加上onclick处理过程
function AutoSelectHandle(treeID)
{
var x=HasStyle(treeID);
//获得所有的input标记
var objs = document.getElementsByTagName("input");
//遍历
for(var i=0;i<objs.length;i++)
{
//如果是CheckBox
if(objs[i].type=='checkbox')
{
var obj=objs[i];
//如果CheckBox的id中包括TreeView在客户端的id
//那么意味着这个CheckBox是TreeView中的CheckBox
if(obj.id.indexOf(treeID)!=-1)
{
//注册事件处理过程
objs[i].onclick=function()
{
//选中子节点
SelectAllChild(this,parseInt(x));
//选中父节点
SelectAllParent(this,x);
};
}
}
}
}
将生成的程序集MyTreeView.dll添加到Web站点的Bin目录中,然后在工具箱中,点右键“选择项”,将这个dll添加进来。
下来就可以将工具箱中的MyTreeView拖入网页中,开始设计了,当然,如果要有这个效果,必须将ShowCheckBoxs选为All。
彻底解放土鳖。
文章来源:http://blog.sina.com.cn/s/blog_49458c270100c2so.html