【IT168技术文档】
扩展TreeView控件:
联动复选框(复选框的全选和取消全选)。选中指定的父复选框,则设置其所有子复选框为选中状态;取消选中指定的父复选框,则设置其所有子复选框为取消选中状态。如果某父复选框的所有子复选框为均选中状态,则设置该父复选框为选中状态;如果某复选框的所有子复选框至少有一个为取消选中状态,则设置该父复选框为取消选中状态
使用方法(设置属性):
AllowCascadeCheckbox - 是否启用联动复选框功能
关键代码
相关的js
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); } /**//*联动复选框 结束*/