zoukankan
html css js c++ java
用JS实现VS2005 TreeView的checkBox的父子节点级联取自YYControls
项目中需要实现树的父子节点级联功能,所以想到了YYControls控件,但是又不好直接使用这个控件,所以就把里面的代码直接提取出来了,在此也感谢YYControls的作者!
注:只
适
用于VS2005的TreeView控件
<
SCRIPT LANGUAGE
=
"
JavaScript
"
>
<!--
//
调用方法:
//
在页面文件中使用下面语句将树名添加到yy_stv_ccTreeView_pre数组中:
//
参数中的'menuTreename'即为树名称
yy_stv_ccTreeView_pre.push(
"
menuTreename
"
);
//
-->
<
/
SCRIPT>
核心JS代码
//
将以下代码另存为JS文件,直接加载在目标文件中即可
/**/
/*
Helper 开始
*/
String.prototype.yy_stv_startsWith
=
function
(s)
{
//
/ <summary>StartsWith()</summary>
var
reg
=
new
RegExp(
"
^
"
+
s);
return
reg.test(
this
);
}
function
yy_stv_addEvent(obj, evtType, fn)
{
//
/ <summary>绑定事件</summary>
//
FF
if
(obj.addEventListener)
{
obj.addEventListener(evtType, fn,
true
);
return
true
;
}
//
IE
else
if
(obj.attachEvent)
{
var
r
=
obj.attachEvent(
"
on
"
+
evtType, fn);
return
r;
}
else
{
return
false
;
}
}
/**/
/*
Helper 结束
*/
/**/
/*
联动复选框 开始
*/
var
yy_stv_ccTreeView_pre
=
new
Array();
//
cs中动态向其灌数据(TreeView内控件ID的前缀数组)
function
yy_stv_ccClickCheckbox(e)
{
//
/ <summary>单击复选框时</summary>
var
evt
=
e
||
window.event;
//
FF || IE
var
obj
=
evt.target
||
evt.srcElement
//
FF || IE
yy_stv_foreachChildCheckbox(obj);
yy_stv_foreachParentCheckbox(obj);
}
function
yy_stv_checkParentCheckbox(table, checked)
{
//
/ <summary>设置父复选框的状态</summary>
var
nodes
=
table.parentNode.parentNode.childNodes;
for
(
var
i
=
1
; i
<
nodes.length; i
++
)
{
if
(nodes[i]
==
table.parentNode)
{
if
(
typeof
(nodes[i
-
1
])
==
'
undefined
'
||
typeof
(nodes[i
-
1
].rows)
==
'
undefined
'
)
return
;
for
(
var
x
=
0
; x
<
nodes[i
-
1
].rows.length; x
++
)
{
for
(
var
j
=
0
; j
<
nodes[i
-
1
].rows[x].cells.length; j
++
)
{
//
debugger;
var
chk
=
nodes[i
-
1
].rows[x].cells[j].childNodes[
0
];
if
(
typeof
(chk)
!=
'
undefined
'
&&
chk.tagName
==
"
INPUT
"
&&
chk.type
==
"
checkbox
"
)
{
chk.checked
=
checked;
yy_stv_foreachParentCheckbox(nodes[i
-
1
]);
return
;
}
}
}
}
}
}
function
yy_stv_foreachChildCheckbox(obj)
{
//
/ <summary>单击父复选框时,设置其子复选框的选中状态</summary>
var
checked;
if
(obj.tagName
==
"
INPUT
"
&&
obj.type
==
"
checkbox
"
)
{
checked
=
obj.checked;
do
{
obj
=
obj.parentNode;
}
while
(obj.tagName
!=
"
TABLE
"
)
}
var
nodes
=
obj.parentNode.childNodes;
for
(
var
i
=
0
; i
<
nodes.length
-
1
; i
++
)
{
if
(nodes[i]
==
obj
&&
nodes[i
+
1
].tagName
==
"
DIV
"
)
{
var
elements
=
nodes[i
+
1
].getElementsByTagName(
"
INPUT
"
);
for
(j
=
0
; j
<
elements.length; j
++
)
{
if
(elements[j].type
==
'
checkbox
'
)
{
elements[j].checked
=
checked;
}
}
}
}
}
function
yy_stv_foreachParentCheckbox(obj)
{
//
/ <summary>单击某一复选框时,设置其父复选框的选中状态</summary>
var
checkedNum
=
0
;
var
uncheckedNum
=
0
;
if
(obj.tagName
==
"
INPUT
"
&&
obj.type
==
"
checkbox
"
)
{
do
{
obj
=
obj.parentNode;
}
while
(obj.tagName
!=
"
TABLE
"
)
}
var
tables
=
obj.parentNode.getElementsByTagName(
"
TABLE
"
);
if
(
typeof
(tables)
==
'
undefined
'
)
return
;
for
(
var
i
=
0
; i
<
tables.length; i
++
)
{
for
(
var
x
=
0
; x
<
tables[i].rows.length; x
++
)
{
for
(
var
j
=
0
; j
<
tables[i].rows[x].cells.length; j
++
)
{
var
chk
=
tables[i].rows[x].cells[j].childNodes[
0
];
if
(
typeof
(chk)
!=
'
undefined
'
&&
chk.tagName
==
"
INPUT
"
&&
chk.type
==
"
checkbox
"
)
{
if
(chk.checked)
checkedNum
++
;
else
uncheckedNum
++
;
}
}
}
}
if
(uncheckedNum
==
0
)
{
yy_stv_checkParentCheckbox(obj,
true
);
}
else
{
yy_stv_checkParentCheckbox(obj,
false
);
}
}
function
yy_stv_attachCheckboxClickListener()
{
//
/ <summary>监听所有联动复选框的单击事件</summary>
var
elements
=
document.getElementsByTagName(
"
INPUT
"
);
for
(i
=
0
; i
<
elements.length; i
++
)
{
if
(elements[i].type
==
'
checkbox
'
)
{
for
(j
=
0
; j
<
yy_stv_ccTreeView_pre.length; j
++
)
{
if
(elements[i].id.yy_stv_startsWith(yy_stv_ccTreeView_pre[j]))
{
yy_stv_addEvent(elements[i],
'
click
'
, yy_stv_ccClickCheckbox);
break
;
}
}
}
}
}
if
(document.all)
{
window.attachEvent(
'
onload
'
, yy_stv_attachCheckboxClickListener);
}
else
{
window.addEventListener(
'
load
'
, yy_stv_attachCheckboxClickListener,
false
);
}
/**/
/*
联动复选框 结束
*/
查看全文
相关阅读:
Python正课101 —— 前端 入门
Python正课100 —— 数据库 进阶5
Python正课99 —— 数据库 进阶4
Navicat15安装教程
Python正课98 —— 数据库 进阶3
Python正课97 —— 数据库 进阶2
Python正课96 —— 数据库 进阶1
解决:MySQL报错
Python正课95 —— 数据库 入门
作业3
原文地址:https://www.cnblogs.com/toumh/p/1077358.html
最新文章
2017秋季面向对象程序设计(Java)教材、教学纲要、考核要求
面向对象程序设计(Java)本学期课程改革说明
TP5 数据保存、更新问题(save、saveAll)
php实现实例化类后自动进行错误以及异常处理(简易版)
js相同的正则多次调用test()返回的值却不同的问题
php_excel导出
TP5开启缓存
中文正则验证
支付系统订单模型该如何设计?
获取客户端ip地址
热门文章
tp5 引入 没有命名空间的类库的方法(以微信支付SDK为例)
day07 流程控制
day07 作业
day06 可变不可变类型
day05 作业
day05 程序与用户交互和基本运算符
day05 垃圾回收机制(超小白讲解)
day04 作业
day04 python入门(变量,基本数据类型)
day03 编程语言介绍
Copyright © 2011-2022 走看看