用js脚本控制asp.net下treeview的NodeCheck的实现代码


Posted in Javascript onMarch 02, 2010

增加CheckBox联动的情况选择:
1.单选TreeView中的任一节点
2.当一节点CheckBox属性值改变时:子节点的CheckBox属性值跟随其改动,父节点不变;
父节点的所有子节点的CheckBox属性值都为false时才为false;有一个子节点的CheckBox属性值true时则为true.
3.当一节点CheckBox属性值改变时:子节点、父节点的CheckBox属性值跟随其改动;
父节点的所有子节点的CheckBox属性值都为false时才为false;有一个子节点的CheckBox属性值true时则为true.
javascript代码

function OnTreeNodeChecked(id, type) { 
//获取触发事件的对象 
var element = window.event.srcElement; 
//如果对象不是checkbox则不处理 
if (!IsCheckBox(element)) 
return; 
//获取checked状态 
var isChecked = element.checked; 
//获取tree对象 
var tree = TV2_GetTreeById(id); 
//获取element的相对结点(如果是叶结点,则就为element,否则为其<A>结点) 
var node = TV2_GetNode(tree, element); 
switch (type) { 
case "1": 
SetNodesUnChecked(tree); 
element.checked = true; 
break; 
case "2": 
TV2_SetChildNodesCheckStatus(node, isChecked); 
break; 
case "3": 
TV2_SetChildNodesCheckStatus(node, isChecked); 
var parent = TV2_GetParentNode(tree, node); 
TV2_NodeOnChildNodeCheckedChanged(tree, parent, isChecked); 
} 
} 
//set all nodes checkbox nochecked 
function SetNodesUnChecked(TreeNode) { 
var inputs = WebForm_GetElementsByTagName(TreeNode, "INPUT"); 
if (inputs == null || inputs.length == 0) 
return; 
for (var i = 0; i < inputs.length; i++) { 
if (IsCheckBox(inputs[i])) 
inputs[i].checked = false; 
} 
} 
//set child nodes checkbox status 
function TV2_SetChildNodesCheckStatus(node, isChecked) { 
//返回当前node所在的div层 
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, true); 
TV2_NodeOnChildNodeCheckedChanged(tree, parent, true); 
} 
} 
//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) { 
//如果node.tagName == "A"则不处理 
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); 
}

html代码
<asp:TreeView ID="TreeView1" runat="server" ImageSet="Msdn" ShowCheckBoxes="All" 
ShowLines="True" BorderWidth="0px" Height="430px" Width="250px" Font-Size="Small" 
OnClick="OnTreeNodeChecked()"> 
</asp:TreeView>
Javascript 相关文章推荐
表单验证的完整应用案例探讨
Mar 29 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
JS匿名函数实例分析
Nov 26 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
react antd实现动态增减表单
Jun 03 Javascript
javascript 静态对象和构造函数的使用和公私问题
Mar 02 #Javascript
新老版本juqery获取radio对象的方法
Mar 01 #Javascript
几个比较经典常用的jQuery小技巧
Mar 01 #Javascript
基于JQuery的密码强度验证代码
Mar 01 #Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 #Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 #Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 #Javascript
You might like
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
SONY SRF-M100的电路分析
2021/03/02 无线电
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
php实现源代码加密的方法
2015/07/11 PHP
php实现Mysql简易操作类
2015/10/11 PHP
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
Python subprocess模块学习总结
2014/03/13 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
Python之列表实现栈的工作功能
2019/01/28 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
学习委员自我鉴定
2014/01/13 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
Mysql文件存储图文详解
2021/06/01 MySQL