用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 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
vue项目接口域名动态获取操作
Aug 13 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
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
laravel入门知识点整理
2020/09/15 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
Python使用MD5加密字符串示例
2014/08/22 Python
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
简单的命令查看安装的python版本号
2020/08/28 Python
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle