纯手工 CheckboxTree 实现

数据结构及页面显示格式：

 

INSERT INTO AS_CombRules VALUES('', '', '', '', '', '', '')

 

实现 CheckboxTree 功能：

html代码：

 

1 <td align="center">
2    <input type="checkbox" name="Ids" value="${asc.combRulesID}"
3           onclick="onclickCheckbox(${asc.parentRuleId}, ${asc.combRulesID})"/>
4    <input type="hidden" name="parentRuleId" value="${asc.parentRuleId}"/>
5    <input type="hidden" name="child" value="${asc.child}"/>
6 </td>

 

 

js代码：

 1     //checkboxTree
 2     function onclickCheckbox(parentId, combRulesId) {
 3         var checked = true;
 4         var checkedF = 0;
 5         $("[name=Ids]:checkbox", navTab.getCurrentPanel()).each(function () {
 6             var combRulesID = $(this).val();
 7             var td = $(this).parents("td");
 8             var parentRuleId = td.find("input[name='parentRuleId']").val();
 9             var childCurr = td.find("input[name='child']").val();
10 
11             if (parentId == combRulesID) {
12                 //确定子节点取消数量
13                 $("[name=Ids]:checkbox", navTab.getCurrentPanel()).each(function () {
14                     var td = $(this).parents("td");
15                     var parentRuleIdse = td.find("input[name='parentRuleId']").val();
16                     if (parentRuleIdse == parentId && parentRuleIdse != 0) {
17                         if (!this.checked) {
18                             checkedF = checkedF + 1;
19                         }
20                     }
21                 });
22                 //判断子节点取消数量和子节点的个数相等
23                 if (checkedF == childCurr) {
24                     $(this).attr("checked", false);
25                 } else {
26                     $(this).attr("checked", true);
27                 }
28                 onclickCheckbox(parentRuleId, null);
29             }
30 
31             //根据主目录关联子目录
32             if (combRulesId == parentRuleId) {
33                 //确定父节点选择状态
34                 $("[name=Ids]:checkbox", navTab.getCurrentPanel()).each(function () {
35                     var combRulesIDF = $(this).val();
36                     var td = $(this).parents("td");
37                     if (combRulesId == combRulesIDF) {
38                          checked = this.checked;
39                     }
40                 });
41                 //子节点的选择状态和父节点相同
42                 $(this).attr("checked", checked);
43                 onclickCheckbox(null, combRulesID);
44             }
45         });
46     }

 

 

 

 

 

转载于:https://www.cnblogs.com/goodcheap/p/6927221.html