DWZ的树结构 tree

 DWZ的树结构是按<ul>,<li>的嵌套格式构成，最顶级的<ul>以class=”tree”标识。treeFolder, treeCheck, expand|collapse则为可选的。
treeFolder:在所有树节点前加上Icon图标。
treeCheck:在所有树节点前加上checkbox，此时需要在<a> 加上三个扩展属性tname="", tvalue="", checked="",其中tname与tvalue对应该checkbox的name与value属性,
          checked表示checkbox的默认状态是否checked. 
expand与collapse：expand表示树的所有第一级节点默认是展开状态，collapse则表示所有第一级节点默认为折叠状态，当expand与collapse都没有时默认则会展开第一个节点。
扩展属性oncheck是自定义函数, 用来接收点击checkbox时返回值, 当点击非子树节点checkbox时返回数据格式为:{checked:true|false,items:{name:name, value:value}}, 
当点击了树节点checkbox时, 此子树节点下所有的checkbox都将选中, 同时返回此子树节点下所有的checkbox的值, 
格式为{checked:true|false, items:{{name:name, value:value}, {name:name, value:value} …… }} 。

[javascript]  view plain  copy

1. <script type="text/javascript">    
2.     
3.  //遍历被选中CheckBox元素的集合 得到Value值    
4.  function treeclick()  {    
5.  var oidStr=""; //定义一个字符串用来装值的集合    
6.     
7. //jquery循环t2下的所有选中的复选框    
8.   $("#t2 input:checked").each(function(i,a){    
9.     //alert(a.value);    
10.     oidStr +=a.value+',';  //拼接字符串    
11.   });    
12.   alert(oidStr);    
13.  }    
14. </script>    

用的是DWZ富客户端框架。它的树表现形式是通过 <ul id="t1" class="tree treeFolder treeCheck expand" oncheck="">代码来控制的，意思是这是一棵带复选框的树。

[html]  view plain  copy

1. <div id="t2"    
2.       style="display: block; overflow: auto; height: 430px; border: solid 1px #CCC; line-height: 21px; background: #FFF;">    
3.       <ul id="t1" class="tree treeFolder treeCheck expand" oncheck="">    
4.        <li>    
5.         <a tname="name" tvalue="value5">XX管理</a>    
6.         <ul>    
7.          <li>    
8.           <a tname="name" tvalue="1" checked="true">数据采集</a>    
9.          </li>    
10.          <li>    
11.           <a tname="name" tvalue="11">数据审核</a>    
12.          </li>    
13.          <li>    
14.           <a tname="name" tvalue="12">数据定制</a>    
15.          </li>    
16.          <li>    
17.           <a tname="name" tvalue="13">数据下载</a>    
18.          </li>    
19.          <li>    
20.           <a tname="name" tvalue="14">数据管理</a>    
21.          </li>    
22.         </ul>    
23.        </li>    
24.        <li>    
25.         <a tname="name" tvalue="2">用户管理</a>    
26.         <ul>    
27.          <li>    
28.           <a tname="name" tvalue="21" checked="true">查看用户</a>    
29.          </li>    
30.          <li>    
31.           <a tname="name" tvalue="22">新增用户</a>    
32.          </li>    
33.          <li>    
34.           <a tname="name" tvalue="23">修改用户</a>    
35.          </li>    
36.          <li>    
37.           <a tname="name" tvalue="24">删除用户</a>    
38.          </li>    
39.         </ul>    
40.        </li>    
41.        <li>    
42.         <a tname="name" tvalue="3">系统管理</a>    
43.         <ul>    
44.          <li>    
45.           <a tname="name" tvalue="31" checked="true">登录后台</a>    
46.          </li>    
47.          <li>    
48.           <a tname="name" tvalue="32">查看日志</a>    
49.          </li>    
50.          <li>    
51.           <a tname="name" tvalue="33">信息设置</a>    
52.          </li>    
53.          <li>    
54.           <a tname="name" tvalue="34">删除日志</a>    
55.          </li>    
56.         </ul>    
57.        </li>    
58.       </ul>    
59.      </div>