实现当TreeView中父节点的CheckBox的点选状态改变时,回发服务器端,并且选中父节点，所有子节点全选中
2015-01-14 18:48
686 查看
实现当TreeView中父节点的CheckBox的点选状态改变时
回发服务器端
触发TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)事件
从而通过代码来控制子节点的CheckBox的点选状态 一同改变
主要步骤及代码示例如下：
1.TreeView绑定onclick事件
通过本事件 引发回发
2.在TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)事件
编写相关代码 控制子节点的CheckBox点选状态
-------------------- HTML 页面部分 -----------------------
<%@ Page Language="C#" CodeFile="1.aspx.cs"
Inherits="Manage_treeviewtest" %>
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
// 点击复选框时触发事件
function postBackByObject()
{
var o = window.event.srcElement;
if (o.tagName == "INPUT" && o.type == "checkbox")
{
__doPostBack("","");
}
}
//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);
}
//getEle()
}
function getEle() {
debugger
var tree = document.getElementById("TreeView1").getElementsByTagName("INPUT");
for (var i = 0; i < tree.length; i++) {
if (tree[i].type == "checkbox" && tree[i].checked) {
alert(tree[i].nextSibling.firstChild.nodeValue + " " + tree[i].nextSibling.firstChild.text);
}
}
}
//判断对象是否为空
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;
}
</script>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TreeView ID="TreeView1" runat="server" ExpandDepth="0"
ShowCheckBoxes="All"
OnTreeNodeCheckChanged="TreeView1_TreeNodeCheckChanged">
</asp:TreeView>
</ContentTemplate>
<Triggers
ca50
>
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
--------------------- cs页面代码 --------------------
public partial class Manage_treeviewtest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
CreartAreaTree();
TreeView1.Attributes.Add("onclick", "postBackByObject(),client_OnTreeNodeChecked(null)");
}
}
/// <summary>
/// 选中某节点下的所有项
/// </summary>
/// <param name="node">节点</param>
/// <param name="state">是否点击</param>
public void selectChildList(TreeNode node,bool state)
{
foreach (TreeNode childnode in node.ChildNodes)
{
childnode.Checked = state;
selectChildList(childnode,state);
}
}
protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
{
CheckChildCheckBox(e.Node.Value, null);
lblFUnitNum.Text = "";
HiddenField1.Value = "";
getSelectedNode(null);
}
public void getSelectedNode(TreeNode pNode)
{
if (pNode == null)
{
foreach (TreeNode node in TreeView1.Nodes)
{
if (node.Checked)
{
HiddenField1.Value += node.Value + ",";
lblFUnitNum.Text += node.Text + ",";
}
getSelectedNode(node);
}
}
else
{
foreach (TreeNode node in pNode.ChildNodes)
{
if (node.Checked)
{
HiddenField1.Value += node.Value + ",";
lblFUnitNum.Text += node.Text + ",";
}
getSelectedNode(node);
}
}
}
//父级选中，子级也选中
private void CheckChildCheckBox(string selectNode, TreeNode pNode)
{
if (pNode == null)
{
foreach (TreeNode node in TreeView1.Nodes)
{
if (node.Parent != null)
{
if (node.Parent.Value == selectNode)
{
if (node.Parent.Checked == true)
{
node.Checked = true;
}
else
{
node.Checked = false;
}
}
//if (node.Checked == false)
//{
// node.Parent.Checked = false;
//}
}
CheckChildCheckBox(selectNode, node);
}
}
else
{
foreach (TreeNode node in pNode.ChildNodes)
{
if (node.Parent != null)
{
if (node.Parent.Value == selectNode)
{
if (node.Parent.Checked == true)
{
node.Checked = true;
}
else
{
node.Checked = false;
}
}
else
{
node.Parent.Checked = true;
}
}
//if (node.Checked == false)
//{
// node.Parent.Checked = false;
//}
CheckChildCheckBox(selectNode, node);
}
}
}
回发服务器端
触发TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)事件
从而通过代码来控制子节点的CheckBox的点选状态 一同改变
主要步骤及代码示例如下：
1.TreeView绑定onclick事件
通过本事件 引发回发
2.在TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)事件
编写相关代码 控制子节点的CheckBox点选状态
-------------------- HTML 页面部分 -----------------------
<%@ Page Language="C#" CodeFile="1.aspx.cs"
Inherits="Manage_treeviewtest" %>
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
// 点击复选框时触发事件
function postBackByObject()
{
var o = window.event.srcElement;
if (o.tagName == "INPUT" && o.type == "checkbox")
{
__doPostBack("","");
}
}
//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);
}
//getEle()
}
function getEle() {
debugger
var tree = document.getElementById("TreeView1").getElementsByTagName("INPUT");
for (var i = 0; i < tree.length; i++) {
if (tree[i].type == "checkbox" && tree[i].checked) {
alert(tree[i].nextSibling.firstChild.nodeValue + " " + tree[i].nextSibling.firstChild.text);
}
}
}
//判断对象是否为空
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;
}
</script>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TreeView ID="TreeView1" runat="server" ExpandDepth="0"
ShowCheckBoxes="All"
OnTreeNodeCheckChanged="TreeView1_TreeNodeCheckChanged">
</asp:TreeView>
</ContentTemplate>
<Triggers
ca50
>
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
--------------------- cs页面代码 --------------------
public partial class Manage_treeviewtest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
CreartAreaTree();
TreeView1.Attributes.Add("onclick", "postBackByObject(),client_OnTreeNodeChecked(null)");
}
}
/// <summary>
/// 选中某节点下的所有项
/// </summary>
/// <param name="node">节点</param>
/// <param name="state">是否点击</param>
public void selectChildList(TreeNode node,bool state)
{
foreach (TreeNode childnode in node.ChildNodes)
{
childnode.Checked = state;
selectChildList(childnode,state);
}
}
protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
{
CheckChildCheckBox(e.Node.Value, null);
lblFUnitNum.Text = "";
HiddenField1.Value = "";
getSelectedNode(null);
}
public void getSelectedNode(TreeNode pNode)
{
if (pNode == null)
{
foreach (TreeNode node in TreeView1.Nodes)
{
if (node.Checked)
{
HiddenField1.Value += node.Value + ",";
lblFUnitNum.Text += node.Text + ",";
}
getSelectedNode(node);
}
}
else
{
foreach (TreeNode node in pNode.ChildNodes)
{
if (node.Checked)
{
HiddenField1.Value += node.Value + ",";
lblFUnitNum.Text += node.Text + ",";
}
getSelectedNode(node);
}
}
}
//父级选中，子级也选中
private void CheckChildCheckBox(string selectNode, TreeNode pNode)
{
if (pNode == null)
{
foreach (TreeNode node in TreeView1.Nodes)
{
if (node.Parent != null)
{
if (node.Parent.Value == selectNode)
{
if (node.Parent.Checked == true)
{
node.Checked = true;
}
else
{
node.Checked = false;
}
}
//if (node.Checked == false)
//{
// node.Parent.Checked = false;
//}
}
CheckChildCheckBox(selectNode, node);
}
}
else
{
foreach (TreeNode node in pNode.ChildNodes)
{
if (node.Parent != null)
{
if (node.Parent.Value == selectNode)
{
if (node.Parent.Checked == true)
{
node.Checked = true;
}
else
{
node.Checked = false;
}
}
else
{
node.Parent.Checked = true;
}
}
//if (node.Checked == false)
//{
// node.Parent.Checked = false;
//}
CheckChildCheckBox(selectNode, node);
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- (JavaScript)实现在客户端动态改变Treeview节点的选中状态
- jquery实现全选、反选、获得所有选中的checkbox
- javascript 实现 TreeView全选（实现子节点全选，中父节点自动全选）
- （转载）jquery实现全选、反选、获得所有选中的checkbox
- 在.Net Framework1.1的环境下，调用TreeView控件，生成树图，点选父节点，则所有的子结点也选中，取消选中的父节点下的子结点，则父节点也取消选中状态。
- VB.Net程序设计：获取TreeView CheckBox所有选中的节点值
- javascript 实现 TreeView全选（实现子节点全选，中父节点自动全选）
- jquery判断checkbox是否选中及改变checkbox状态的实现方法
- 选中CheckBoxList第一项实现全选/反选CheckBoxList所有项
- jquery实现全选、反选、获得所有选中的checkbox
- jquery checkbox选中状态以及实现全选反选
- 实现Treeview 的Checkbox选中根枝叶全选中
- 改变checkbox默认选中状态及取值的实现代码
- 如何让treeview的所有节点前面的checkbox全部取消选中？
- GridView和CheckBox连用，实现全选，分页，并且分页之后选择的复选框的状态依然存在
- jquery实现全选、反选、获得所有选中的checkbox
- javascrip实现：若选中TreeView的父节点checkbox，则其子节点全部选中
- C#winfrom 中 TreeView 控件中带checkbox，怎么实现在父节点上打勾，选中全部子节点？
- ASP.NET 2.0 TreeView中用JavaScript实现选择子接点CheckBox是自动选择上父节点(或者所有父节点)
- jquery实现全选、反 c80f 选、获得所有选中的checkbox (记录专用