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
);
}
/**/
/*
联动复选框 结束
*/
查看全文
相关阅读:
sql server 笔记(数据类型/新建、修改、删除数据表/)
在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误。未找到或无法访问服务器。请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接。 (provider: Nam
jquery 操作 checkbox select
layui常见问题
Sublime Text 3下载-汉化-插件配置
CSS前端开发学习总结、一
如何用 JavaScript 下载文件
腾讯大王卡、天王卡代申请
新人报道~cnblogs
Node.js
原文地址:https://www.cnblogs.com/toumh/p/1077358.html
最新文章
蓝桥真题----拉丁方块填数字
反弹shell的各种操作
POJ1068 --(模拟)
最后一个空格问题
原生js实现头像大屏随机显示
单线程 及 多线程 详解
处理iphone的 .play() 不能播放问题
添加背景音乐(解决苹果手机不能自动播放问题)
原生 js 实现摇一摇功能
Echarts在Vue中的使用
热门文章
Vue 获取dom元素之 ref 和 $refs 详解
通过Angular-cli创建新项目
Angular-cli 的安装
vue2.0 生命周期详解
layui upload封装
多个ajax请求时控制执行顺序或全部执行后的操作
es6笔记
VUE环境搭建及打包上线
jquery常用方法
layui常用方法
Copyright © 2011-2022 走看看