用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 相关文章推荐
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
详解js加减乘除精确计算
Mar 19 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
vue引入静态js文件的方法
Jun 20 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 Javascript
vue编写简单的购物车功能
Jan 08 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
PHP多文件上传类实例
2015/03/07 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
基于Python列表解析(列表推导式)
2018/06/23 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
培训主管的岗位职责
2013/11/23 职场文书
九年级历史教学反思
2014/01/27 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
软件售后服务承诺书
2014/05/21 职场文书
2014年药房工作总结
2014/11/22 职场文书
事业单位年度考核评语
2014/12/31 职场文书
环保证明
2015/06/23 职场文书
致运动员的广播稿
2015/08/19 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python