bbit_动态测试包括什么 Ut_SDV测试

我接触过好多jquery插件的tree,比如dwz的tree,ztree,dtree,以及今天我要介绍的wdtree。dwz的tree，我就不多说了，不推荐使用。dtree要是仅作为显示的关系树来说还是不错的。ztree功能很强大，极力推荐。bbit今天的wdTree类ztree的一个子功能，如果仅是做权限树类的树状结构的话，我觉得wdtree是一个极好的选择。

wdTree is lightweight jQuery plugin for present tree with nested check boxes. Features highlighted:

parents/children checking

lazy load from database

configurable node attributes

总结：wdTree是一个轻量级jQuery插件用于展示带有复选框的树形控件。支持从懒加载节点，可以配置节点属性。

1.简介（官方文档API）

Boolean Whether node being seleted leads to parent/sub node being selected.

String Checkbox image path.

String Whether to toggle node when node clicked.

Object Tree theme. Three themes provided. 'bbit-tree-lines' ,'bbit-tree-no-lines' and 'bbit-tree-arrows'.

Boolean Whether to show check box or not.

String Tree theme. Three themes provided. 'bbit-tree-lines' ,'bbit-tree-no-lines' and 'bbit-tree-arrows'.

String Url for child nodes retrieving.

Fired when check box is clicked on.

Fired when a node is clicked on.

官方文档还是比较简洁的，我的语言组织能力有限，感觉还是英文的文档看着容易理解一点（翻译成中文太别扭了）。bbit

2.demo

需求操作：显示权限树，并做到级联勾选操作，cascadecheck属性貌不好用，在仔细看了源码之后，发现.getTSNs(true)这个方法可以实现该需求。

源码：

jquery.tree.js

 1  function getck(items, c, fn) {
 2             for (var i = 0, l = items.length; i < l; i) {
 3                 (items[i].showcheck == true && items[i].checkstate == 1) && c.push(fn(items[i]));
 4                 if (items[i].ChildNodes != null && items[i].ChildNodes.length > 0) {
 5                     getck(items[i].ChildNodes, c, fn);
 6                 }
 7             }
 8         }
 9         function getCkAndHalfCk(items, c, fn) {//获取半勾选和全勾选状态的节点
10             for (var i = 0, l = items.length; i < l; i) {
11                 (items[i].showcheck == true && (items[i].checkstate == 1 || items[i].checkstate == 2)) && c.push(fn(items[i]));
12                 if (items[i].ChildNodes != null && items[i].ChildNodes.length > 0) {
13                     getCkAndHalfCk(items[i].ChildNodes, c, fn);
14                 }
15             }
16         }
17         me[0].t = {
18             getSelectedNodes: function(gethalfchecknode) {
19                 var s = [];
20                 if (gethalfchecknode) {
21                     getCkAndHalfCk(treenodes, s, function(item) { return item; });
22                 }
23                 else {
24                     getck(treenodes, s, function(item) { return item; });
25                 }
26                 return s;
27             },
28             getSelectedValues: function() {
29                 var s = [];
30                 getck(treenodes, s, function(item) { return item.value; });
31                 return s;
32             },
33             getCurrentItem: function() {
34                 return dfop.citem;
35             },
36             reflash: function(itemOrItemId) {
37                 var id;
38                 if (typeof (itemOrItemId) == "string") {
39                     id = itemOrItemId;
40                 }
41                 else {
42                     id = itemOrItemId.id;
43                 }
44                 reflash(id);
45             }
46         };
47         return me;
48     };
49     //get all checked nodes, and put them into array. no hierarchy
50     $.fn.getCheckedNodes = function() {
51         if (this[0].t) {
52             return this[0].t.getSelectedValues();
53         }
54         return null;
55     };
56     $.fn.getTSNs = function(gethalfchecknode) {
57         if (this[0].t) {
58             return this[0].t.getSelectedNodes(gethalfchecknode);
59         }
60         return null;
61     };
62     $.fn.getCurrentNode = function() {
63         if (this[0].t) {
64             return this[0].t.getCurrentItem();
65         }
66         return null;
67     };
68     $.fn.reflash = function(ItemOrItemId) {
69         if (this[0].t) {
70             return this[0].t.reflash(ItemOrItemId);
71         }
72     };

·····我这下面的例子简单的使用了一下这个wdtree，感觉还可以。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/tongxinshuyu/article-42739-1.html