.Net 的 Web 项目中 关于TreeView 的 checkBox 的操作……
XX.aspx页面中:
<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" Style="left: 24px;
position: relative; top: 56px" οnclick="client_OnTreeNodeChecked(event);" ShowLines="True" meta:resourcekey="TreeViewModulesResource1" ImageSet="BulletedList4" ExpandDepth="0" Target="middle">
<Nodes>
<asp:TreeNode Text="教育" Value="教育">
<asp:TreeNode Text="111" Value="111"></asp:TreeNode>
<asp:TreeNode Text="222" Value="222"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="新闻" Value="新闻">
<asp:TreeNode Text="111" Value="111"></asp:TreeNode>
<asp:TreeNode Text="222" Value="222"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="体育" Value="体育">
<asp:TreeNode Text="111" Value="111"></asp:TreeNode>
<asp:TreeNode Text="222" Value="222"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
页面js 实现:
<script language="javascript"type="text/javascript">
//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 = IsMyChildCheckBoxsUnChecked(childCheckBox);
}
return retVal;
}
同时实现全选:
Html:
<script type="text/javascript" language="javascript" src="JS/TreeView2.js"></script>
<script language ="javascript" type="text/javascript">
function OnTreeNodeChecked()
{
var element = window.event.srcElement;
if (!IsCheckBox(element))
return;
var isChecked = element.checked;
var tree = TV2_GetTreeById("Product_tree");
var node = TV2_GetNode(tree,element);
TV2_SetChildNodesCheckStatus(node,isChecked);
var parent = TV2_GetParentNode(tree,node);
TV2_NodeOnChildNodeCheckedChanged(tree,parent,isChecked);
}
</script>
<script type="text/javascript">
function chkAll()
{
//debugger;
var chkall= document.all["chkall"];
var chkother= document.getElementsByTagName("input");
for (var i=0;i<chkother.length;i++)
{
if( chkother[i].type=='checkbox')
{
if(chkother[i].id.indexOf('Product_tree')>-1)
{
if(chkall.checked==true)
{
chkother[i].checked=true;
}
else
{
chkother[i].checked=false;
}
}
}
}
}
</script>
<html>
<table id="Table1" cellspacing="0" cellpadding="0" width="100%" border="0" >
<tr >
<td align="left" colspan="2" height="34" style="height: 28px; background-color: aliceblue"
valign="middle">
<strong>
地区定向
</strong>
</td>
</tr>
<tr >
<td >
<input id="chkall" type="checkbox" onclick="chkAll();" />全选/取消
</td>
</tr>
<tr>
<td >
<asp:TreeView ID="Product_tree" runat="server" ShowCheckBoxes="All" OnClick="OnTreeNodeChecked()" >
</asp:TreeView>
</td>
</tr>
</table>
</htmL>
TreeView2.js:
/***************************************************************************************
Name: Client Javascript for ASP.NET 2.0 TreeView
Description: ASP.NET 2.0 TreeView lack for client operation. This set of functions provide
some supports. Includes:
* get node
* change checkbox status of parent and child nodes
Author: Zhangtao, zhangtao.it@gmail.com
Date: 2006-03-30
Commonts:
***************************************************************************************/
//set child nodes checkbox status
function TV2_SetChildNodesCheckStatus(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;
}
}
//change parent node checkbox status after child node changed
function TV2_NodeOnChildNodeCheckedChanged(tree,node,isChecked)
{
if(node == null)
return;
var childNodes = TV2_GetChildNodes(tree,node);
if(childNodes == null || childNodes.length == 0)
return;
var isAllSame = true;
for(var i = 0; i < childNodes.length; i++)
{
var item = childNodes[i];
var value = TV2_NodeGetChecked(item);
if(isChecked != value)
{
isAllSame = false;
break;
}
}
var parent = TV2_GetParentNode(tree,node);
if(isAllSame)
{
TV2_NodeSetChecked(node,isChecked);
TV2_NodeOnChildNodeCheckedChanged(tree,parent,isChecked);
}
else
{
TV2_NodeSetChecked(node,false);
TV2_NodeOnChildNodeCheckedChanged(tree,parent,false);
}
}
//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");
//The structure of node: <table>information of node</table><div>child nodes</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
}
function TV2_NodeGetChecked(node)
{
var checkbox = TV2i_NodeGetCheckBox(node);
return checkbox.checked;
}
function TV2_NodeSetChecked(node,isChecked)
{
var checkbox = TV2i_NodeGetCheckBox(node);
if(checkbox != null)
checkbox.checked = isChecked;
}
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);
}
//
//private mothods, with TV2i_ prefix
//
//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);
}
转载于:https://www.cnblogs.com/imghu/archive/2011/08/02/2124544.html
.Net 的 Web 项目中 关于TreeView 的 checkBox 的操作……相关推荐
- Java Web项目中使用Freemarker生成Word文档
Web项目中生成Word文档的操作屡见不鲜,基于Java的解决方案也是很多的,包括使用Jacob.Apache POI.Java2Word.iText等各种方式,其实在从Office 2003开始,就 ...
- java web 操作word文档_Java Web项目中使用Freemarker生成Word文档
Web项目中生成Word文档的操作屡见不鲜.基于Java的解决方式也是非常多的,包含使用Jacob.Apache POI.Java2Word.iText等各种方式,事实上在从Office 2003開始 ...
- JAVA Web项目中所出现错误及解决方式合集(不断更新中)
JAVA Web项目中所出现错误及解决方式合集 前言 一.几个或许会用到的软件下载官网 二.Eclipse的[preferences]下没有[sever]选项 三.Tomcat的安装路径找不到 四.T ...
- maven mybatis mysql_Java Web学习系列——Maven Web项目中集成使用Spring、MyBatis实现对MySQL的数据访问...
标签: 本篇内容还是建立在上一篇Java Web学习系列--Maven Web项目中集成使用Spring基础之上,对之前的Maven Web项目进行升级改造,实现对MySQL的数据访问. 添加依赖Ja ...
- 在java web项目中编写自己的代码生成器
在java web项目中编写自己的代码生成器 转载于:https://www.cnblogs.com/punisher/p/5909943.html
- 在web项目中发布jaxws
概述 在web项目中发布基于jaxws的webservice. 参考文章:用JAX-WS在Tomcat中发布WebService 参考文章说,如果不是servlet3.0及以上,需要配置servlet ...
- Web项目中引进EasyUI的路径问题
场景 Web项目中引入EasyUI,新建test.html,页面中引入EasyUI相关资源文件. 运行后页面并没有改变,打开检查提示404找不到资源. 实现 项目路径为: 路径引用错误: test.h ...
- 由web项目中上传图片所引出的路径问题
我在做javaweb项目的时候,有个项目中需要进行图片的上传,有次我重新部署项目后,发现之前上传的图片不见了,最后找出原因:图片上传在服务器目录上,而不是绝对路径,所以特别想弄清楚javaweb项目中 ...
- maven web项目中的web.xml的版本如何更改
maven web项目中的web.xml的版本如何更改 问题 因web.xml的版本太低不支持el表达式的问题(maven3.6版本通过底层的maven web插件生成的最终的web.xml文件版本只 ...
最新文章
- Spring学习总结1——bean的生命周期
- 死磕Java并发:J.U.C之AQS:CLH同步队列
- python基础教程第二版和第三版哪个好-python基础教程 2版和3版哪个适合新手?!...
- 开发工具,编辑器字体
- V3S中换2.0寸LCD时MINIGUI无显示的问题的解决过程
- MyBatis映射文件(二)
- java m4a文件拼接_面试官:为啥不提倡字符串拼接?看阿里java开发手册怎么说
- WEBTIMER控件研究的心得:丢开书本做一个WebTimer
- DotNet4应用程序打包工具(把DotNet4安装程序打包进你的应用程序;WINAPI开发,无dotNet环境也可顺利执行)【一】整体思路...
- 大型情感剧集Selenium:6_selenium中的免密登陆与cookie操作
- (50)System Verilog类静态变量实例
- 创建的maven子项目怎么访问接口404_【经验分享】新手学Java编程语言怎么入门?...
- 3.11 框架和样式表
- 计算机保研英语,计算机专业保研面试英语自我介绍
- 魔兽n服务器网站,wowN服如何进入_魔兽世界Nostalrius服务器入驻攻略_快吧游戏
- 果园节水灌溉能否实现远程智能控制
- CSDN的文章如何快速转移到微信公众号上
- 一个vue文件应该有的成分_详解vue为什么要求组件模板只能有一个根元素
- utf-8中一个汉字是3个字节,你知道吗?
- 高考数学辅导:解三角形的综合应用-图文(解析版)