树型结构TreeView权限的赋值与读值

日前做一个用户权限管理的页面，权限是一个树形结构，每个节点前是一checkbox，其状态表示用户是否具有该权限，当切换用户时，根据选择用户的权限设置树形的相应节点，保存时根据当前用户的选中情况保存数据。

画面如下：

其间主要碰到三个问题

1）带checkbox的TreeView的显示
2）根据用户权限数据对权限树赋值
3）根据树形中checkbox的状态获取权限数据

其解决办法如下：
1）

HTML中展现TreeView的div需要将class设为"ygtv-checkbox"

Html代码

另外javascript里要做如下处理（详细功用参见注释）：

1 Javascript代码

2 menuTree = new YAHOO.widget.TreeView("divMenuTree", treeJSON);

3 //点击节点时变换checkbox状态

4 menuTree.subscribe('clickEvent', menuTree.onEventToggleHighlight);

5 //节点状态变化时相应改变其父、子节点的状态

6 menuTree.setNodesProperty('propagateHighlightUp', true);

7 menuTree.setNodesProperty('propagateHighlightDown', true);

 2）
可以用TreeView的getNodeByIndex或者getNodeByProperty取得节点，然后使用Node的unhighlight不选，用highlight选中节点，代码片段如下：

01 Javascript代码

02 //清除所有checkbox

03 for(var i=1; i<=menuTree.getNodeCount(); i++) {

04 menuTree.getNodeByIndex(i).unhighlight(true);

05 }

06 //设定当前用户的权限

07 //只勾选叶子节点的checkbox，它们的上级节点状态会自动跟着变化，不用设置

08 for(var i=0; i

09 var node = menuTree. getNodeByProperty('data', menus[i]);

10 if (!node.hasChildren(true)) {

11 node.highlight(false);

12 }

13 }

在设定当前用户的权限时，非叶子节点的状态可能是选中、部分选中和未选中，我们不必自己判断，只要仅对叶子节点进行设置，然后让YUI自己去改变其上级节点状态就可以了。
其中unhighlight，highlight的参数表示是否不改变该节点的上下级节点状态，在清除所有checkbox时不需要改变，但在设定当前用户的权限时正好可以利用这一功能。

3）
YUI的带checkbox的TreeView其实不是真正的checkbox，是用css切换图片实现的，所以好像无法像一组checkbox一样直接取得选中信息（我是没找到），不过可以根据Node的highlightState属性知道该节点的状态，其中0表示未选中，1未部分选中，2未选中，所以下面这段代码可以将选中的权限的ID组成一个数组：

Javascript代码

1 var menuIDs = new Array();

2 var idx = 0;

3 for(var i=1; i<=menuTree.getNodeCount(); i++) {

4 var node = menuTree.getNodeByIndex(i);

5 if (node.highlightState > 0) {

6 menuIDs[idx] = node.data;

7 idx ++;

8 }

9 }

 总的感觉YUI是一个比较全面的库，虽然写法有些繁琐，但作为一个还算面面俱到的库使用起来还是感觉蛮不错的，我只是另外少数地方用到了prototype，感觉就它们俩一般问题都能搞定了。

最后，贴出整个页面的代码，其中很多是和TreeView无关的代码。我和后台交互的是json格式的数据，具体我就不说明了，根据代码也能猜出个大概其了。

HTML代码：

002

003

004

005

006

007

008

009

010

011

012

013

030

031

032

033

034

035

189

190

191

192

193

216

234

235

244

245

246