用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和JQuery实用代码片段(一)
Apr 07 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
javascript数组的使用
Mar 28 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 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
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
关于Keras Dense层整理
2020/05/21 Python
详解Python中的路径问题
2020/09/02 Python
Python中Selenium模块的使用详解
2020/10/09 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
介绍Java的内部类
2012/10/27 面试题
什么时候用assert
2015/05/08 面试题
白血病募捐倡议书
2014/05/14 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
爬山的活动方案
2014/08/16 职场文书
教师自我剖析材料
2014/09/29 职场文书
手机被没收的检讨书
2014/10/04 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
教师考核鉴定意见
2015/06/05 职场文书
法律讲堂观后感
2015/06/11 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
一篇文章带你复习java知识点
2021/06/28 Java/Android
java版 简单三子棋游戏
2022/05/04 Java/Android
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技