用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 相关文章推荐
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
jQuery each函数源码分析
May 25 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
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
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
JS实现小米轮播图
2020/09/21 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
Python中使用ElementTree解析XML示例
2015/06/02 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
Python内置异常类型全面汇总
2020/05/28 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
python 实现音频叠加的示例
2020/10/29 Python
台湾生鲜宅配:大口市集
2017/10/14 全球购物
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
就业自荐信
2013/12/04 职场文书
产品发布会策划方案
2014/05/12 职场文书
机关保密承诺书
2014/06/03 职场文书
研修心得体会
2014/09/04 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
新生入学欢迎词
2015/01/26 职场文书
通用员工手册范本
2015/05/14 职场文书
教研活动主持词
2015/07/03 职场文书