/**************************************************************************
ASP.NET 2.0 TreeView控件 客户端CheckBox Chanage事件,兼容IE,OPERA,FIREFOX
1. 每勾选一个节点就要遍历勾选它的所有子节点 setChildChecked
同时循环勾选父节点 setParentChecked
2. 每取消勾选一个节点就要遍历取消它的所有子节点 setChildUnChecked
如果同级其他的节点都未勾选,则循环取消父节点 setParentUnChecked
CheckBox的ID形如:TreeView1n1CheckBox
树ID+'n'+编号+'CheckBox' 编号从0开始,
它的所有子节点都会在ID为TreeView1n1Nodes的Div中.
**************************************************************************/
//TreeView onclick触发事件
function client_OnTreeNodeChecked(event)
{
//得到当前所Click的对象
var objNode;
if(!public_IsObjectNull(event.srcElement))
{
//IE
objNode = event.srcElement;
}
else
{
//FF
objNode = event.target;
}
//判断是否Click的CheckBox
if(!public_IsCheckBox(objNode))
return;
var objCheckBox = objNode;
//根据CheckBox状态进行相应处理
if(objCheckBox.checked==true)
{
//递归选中父节点的CheckBox
setParentChecked(objCheckBox);
//递归选中所有的子节点
setChildChecked(objCheckBox);
}
else
{
//递归取消选中所有的子节点
setChildUnChecked(objCheckBox);
//递归取消选中父节点(如果当前节点的所有其他同级节点也都未被选中).
setParentUnChecked(objCheckBox);
}
}
//判断对象是否为空
function public_IsObjectNull(element)
{
if(element==null || element == "undefined")
return true;
else
return false;
}
//判断对象是否为CheckBox
function public_IsCheckBox(element)
{
if(public_IsObjectNull(element))
return false;
if(element.tagName!="INPUT" || element.type!="checkbox")
return false;
else
return true;
}
//得到包含所有子节点的Node(Div对象)
function public_CheckBox2Node(element)
{
var objID = element.getAttribute("ID");
objID = objID.substring(0,objID.indexOf("CheckBox"));
return document.getElementById(objID+"Nodes");
}
//得到父节点的CheckBox
function public_Node2CheckBox(element)
{
var objID = element.getAttribute("ID");
objID = objID.substring(0,objID.indexOf("Nodes"));
return document.getElementById(objID+"CheckBox");
}
//得到本节点所在的Node(Div对象)
function public_GetParentNode(element)
{
var parent = element.parentNode;
var upperTagName = "DIV";
//如果这个元素还不是想要的tag就继续上溯
while (parent && (parent.tagName.toUpperCase() != upperTagName))
{
parent = parent.parentNode ? parent.parentNode : parent.parentElement;
}
return parent;
}
//设置节点的父节点Checked
function setParentChecked(currCheckBox)
{
var objParentNode= public_GetParentNode(currCheckBox);
if(public_IsObjectNull(objParentNode))
return;
var objParentCheckBox = public_Node2CheckBox(objParentNode);
if(!public_IsCheckBox(objParentCheckBox))
return;
objParentCheckBox.checked = true;
setParentChecked(objParentCheckBox);
}
//当父节点的所有子节点都未被选中时,设置父节点UnChecked
function setParentUnChecked(currCheckBox)
{
var objParentNode= public_GetParentNode(currCheckBox);
if(public_IsObjectNull(objParentNode))
return;
//判断currCheckBox的同级节点是否都为UnChecked.
if(!IsMyChildCheckBoxsUnChecked(objParentNode))
return;
var objParentCheckBox = public_Node2CheckBox(objParentNode);
if(!public_IsCheckBox(objParentCheckBox))
return;
objParentCheckBox.checked = false;
setParentUnChecked(objParentCheckBox);
}
//设置节点的子节点UnChecked
function setChildUnChecked(currObj)
{
var currNode;
if(public_IsCheckBox(currObj))
{
currNode = public_CheckBox2Node(currObj);
if (public_IsObjectNull(currNode))
return;
}
else
currNode = currObj;
var currNodeChilds = currNode.childNodes;
var count = currNodeChilds.length;
for(var i=0;i<count;i++)
{
var childCheckBox = currNodeChilds[i];
if(public_IsCheckBox(childCheckBox))
{
childCheckBox.checked = false;
}
setChildUnChecked(childCheckBox);
}
}
//设置节点的子节点Checked
function setChildChecked(currObj)
{
var currNode;
if(public_IsCheckBox(currObj))
{
currNode = public_CheckBox2Node(currObj);
if (public_IsObjectNull(currNode))
return;
}
else
currNode = currObj;
var currNodeChilds = currNode.childNodes;
var count = currNodeChilds.length;
for(var i=0;i<count;i++)
{
var childCheckBox = currNodeChilds[i];
if(public_IsCheckBox(childCheckBox))
{
childCheckBox.checked = true;
}
setChildChecked(childCheckBox);
}
}
//判断该节点的子节点是否都为UnChecked
function IsMyChildCheckBoxsUnChecked(currObj)
{
var retVal = true;
var currNode;
if(public_IsCheckBox(currObj) && currObj.checked == true)
{
return false;
}
else
currNode = currObj;
var currNodeChilds = currNode.childNodes;
var count = currNodeChilds.length;
for(var i=0;i<count;i++)
{
if (retVal == false)
break;
var childCheckBox = currNodeChilds[i];
if(public_IsCheckBox(childCheckBox) && childCheckBox.checked == true)
{
retVal = false;
return retVal;
}
else
retVal = IsMyChildCheckBoxsUnChecked1(childCheckBox);
}
return retVal;
}
----------------------------
后台
tvProj.Attributes.Add("onclick", "client_OnTreeNodeChecked(event)");
=============================================
Asp.Net选择TreeView前面的复选框引起回发
记得以前写过一个代码。需要在TreeView前面的复选框选中时触发后台事件,从而引起页面其他部分数据发生改变。
当时记得好像TreeView前面的复选框的可以引发选中项改变事件,而在某项由选中变成不选中,或者由不选中变成选中时是不能触发后台事件的。
下面把它记下来,希望以后再用到时会有所帮助
1.在页面上需要设置TreeView父项和子项的、
Checked="True" 和ShowCheckBox="True"
2.在绑定TreeVeiw时,给它添加onclick事件代码如下
TreeView1.Attributes.Add("onclick", "postBackByObject()");//添加点击事件
注:postBackByObject是一个JavaScript函数具体代码如下
// 点击复选框时触发事件(此事件会引起回发)
function postBackByObject()
{
var o = window.event.srcElement;
if (o.tagName == "INPUT" && o.type == "checkbox")
{
__doPostBack("UpdatePanel1",""); //此处前面是两个下划线(UpdatePanel1处是因为用了UpdatePanel所以才写这个控件ID的)
}
}
3.postBackByObject函数引发的回传最终是触发TreeNodeCheckChanged事件的。下面只贴代码。
/// <summary>
/// 左边树形控件选择项改变
/// 判断是否选择,加入右边控件
/// </summary>
protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
{
TreeNode node = TreeView1.SelectedNode;
if (node != null && node.Parent != null) //选中节点不为空,非父节点。
{
//添加或移除项
}
else //点击的是复选框
{
if (node.ChildNodes.Count > 0) //选中的是父节点的框
{
SetChildChecked(node); //复选框事件
}
else //选中的是子节点
{
//添加或移除项
}
}
}
/// <summary>
/// 左边树形控件选择项改变
/// 判断是否选择,加入右边控件
/// </summary>
protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
{
SetChildChecked(e.Node);
// 判断是否是根节点
if (e.Node.Parent != null)
{
e.Node.Parent.Checked = e.Node.Checked;
AddSourceTable(e.Node);
}
}
/// <summary>
/// 根据父节点状态设置子节点的状态
/// </summary>
/// <param name="parentNode"></param>
private void SetChildChecked(TreeNode parentNode)
{
foreach (TreeNode node in parentNode.ChildNodes)
{
node.Checked = parentNode.Checked;
.......... //添加或移除项
if (node.ChildNodes.Count > 0)
{
SetChildChecked(node);
}
}
}