日前做一个用户权限管理的页面，权限是一个树形结构，每个节点前是一checkbox，其状态表示用户是否具有该权限，当切换用户时，根据选择用户的权限设置树形的相应节点，保存时根据当前用户的选中情况保存数据。
画面如下：
其间主要碰到三个问题
1）带checkbox的TreeView的显示
2）根据用户权限数据对权限树赋值
3）根据树形中checkbox的状态获取权限数据
其解决办法如下：
1）
HTML中展现TreeView的div需要将class设为"ygtv-checkbox"
Html代码
<div id="divMenuTree" class="ygtv-checkbox"></div>
另外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 <IFRAME src="http://blog.sina.com.cn/s/blog_6ab1c8fe0100ln9l.html" width=0 height=0></IFRAME>
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<menus.size(); 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代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
002
003 <html>
004
005 <head>
006 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
007 <title>JNOC OA</title>
008
009 <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/js/yui_2.8.1/reset/reset.css">
010 <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/js/yui_2.8.1/fonts/fonts.css">
011 <link type="text/css" rel="stylesheet" href="http://www.cnblogs.com/css/common.css"/>
012
013 <style type="text/css">
014 table#pageTable {
015 width: 80%;
016 }
017
018 table#pageTable tr#user {
019 background-color:#FFFFCC;
020 }
021
022 table#pageTable tr#privilege {
023 background-color:#CCFFFF;
024 }
025
026 table#pageTable th {
027 vertical-align: top;
028 }
029 </style>
030
031 <script type="text/javascript" src="http://www.cnblogs.com/js/prototype_1.6.1/prototype.js"></script>
032 <script type="text/javascript" src="http://www.cnblogs.com/js/yui_2.8.1/yahoo/yahoo.js"></script>
033 <script type="text/javascript" src="http://www.cnblogs.com/js/yui_2.8.1/yuiloader/yuiloader.js"></script>
034 <script type="text/javascript" src="http://www.cnblogs.com/js/common.js"></script>
035 <script type="text/javascript">
036 var menuTree;
037
038 function showMenuTree() {
039 YAHOO.util.Connect.setDefaultPostHeader(false);
040 YAHOO.util.Connect.initHeader("Accept", "application/json", true);
041
042 var request = YAHOO.util.Connect.asyncRequest('POST', JNOCOA_ROOT_PATH + '/menuInfo/getMenuJSON.do', {
043 success: function(resp){
044 var respJSON = resp.responseText.evalJSON();
045 if (respJSON.successed) {
046 var treeJSON = respJSON.returnObject.evalJSON();
047 menuTree = new YAHOO.widget.TreeView("divMenuTree", treeJSON);
048 menuTree.subscribe('clickEvent', menuTree.onEventToggleHighlight);
049 menuTree.setNodesProperty('propagateHighlightUp', true);
050 menuTree.setNodesProperty('propagateHighlightDown', true);
051 menuTree.render();
052 }
053 else {
054 alert(respJSON.errors[0].message);
055 }
056 },
057 failure: function(error){
058 alert("读取菜单数据错误：" + error.statusText);
059 }
060 }, null);
061 }
062
063 function loadUsers() {
064 YAHOO.util.Connect.setDefaultPostHeader(false);
065 YAHOO.util.Connect.initHeader("Accept", "application/json", true);
066
067 var request = YAHOO.util.Connect.asyncRequest('POST', JNOCOA_ROOT_PATH + '/userInfo/getAllUser.do', {
068 success: function(resp){
069 var respJSON = resp.responseText.evalJSON();
070 if (respJSON.successed) {
071 users = respJSON.returnObject;
072 var seleUser = $("userList");
073 for (var i=0; i<users.length; i++) {
074 oOption = document.createElement('option');
075 oOption.appendChild(document.createTextNode(users[i].name));
076 oOption.setAttribute('value', users[i].id);
077 seleUser.appendChild(oOption);
078 }
079
080 YAHOO.util.Event.addListener(seleUser, "change", refreshPrivilege);
081 }
082 else {
083 alert(respJSON.errors[0].message);
084 }
085 },
086 failure: function(error){
087 alert("读取用户数据错误：" + error.statusText);
088 }
089 }, null);
090 }
091
092 function refreshPrivilege() {
093 var selectedIdx = this.selectedIndex;
094 var userID = parseInt(this.options[selectedIdx].getAttribute('value'));
095
096 //准备POST数据：用户ID
097 var data = $H( { id : userID }).toJSON();
098
099 YAHOO.util.Connect.setDefaultPostHeader(false);
100 YAHOO.util.Connect.initHeader("Accept", "application/json", true);
101 YAHOO.util.Connect.initHeader("Content-Type", "application/json; charset=utf-8", true);
102
103 var request = YAHOO.util.Connect.asyncRequest('POST', JNOCOA_ROOT_PATH + '/privilege/get.do', {
104 success: function(resp){
105 var respJSON = resp.responseText.evalJSON();
106 if (respJSON.successed) {
107 menus = respJSON.returnObject.menuIDs;
108 //清除所有checkbox
109 for(var i=1; i<=menuTree.getNodeCount(); i++) {
110 menuTree.getNodeByIndex(i).unhighlight(true);
111 }
112 //勾选叶子节点的checkbox，它们的上级节点状态会自动跟着变化，不用设置
113 for(var i=0; i<menus.size(); i++) {
114 var node = menuTree. getNodeByProperty('data', menus[i]);
115 if (!node.hasChildren(true)) {
116 node.highlight(false);
117 }
118 }
119 } else {
120 alert(respJSON.errors[0].message);
121 }
122 },
123 failure: function(error){
124 alert("读取用户权限数据错误：" + error.statusText);
125 }
126 }, data);
127 }
128
129 function savePrivilege() {
130 if (!menuTree) {
131 return;
132 }
133
134 var selectedIdx = $('userList').selectedIndex;
135 var userID = parseInt($('userList').options[selectedIdx].getAttribute('value'));
136 var menuIDs = new Array();
137 var idx = 0;
138 for(var i=1; i<=menuTree.getNodeCount(); i++) {
139 var node = menuTree.getNodeByIndex(i);
140 if (node.highlightState > 0) {
141 menuIDs[idx] = node.data;
142 idx ++;
143 }
144 }
145
146 var data = $H( { userID : userID, menuIDs : menuIDs }).toJSON();
147
148 YAHOO.util.Connect.setDefaultPostHeader(false);
149 YAHOO.util.Connect.initHeader("Accept", "application/json", true);
150 YAHOO.util.Connect.initHeader("Content-Type", "application/json; charset=utf-8", true);
151
152 var request = YAHOO.util.Connect.asyncRequest('POST', JNOCOA_ROOT_PATH + '/privilege/change.do', {
153 success: function(resp){
154 var respJSON = resp.responseText.evalJSON();
155 if (respJSON.successed) {
156 alert('已成功修改用户权限。');
157 } else {
158 alert(respJSON.errors[0].message);
159 }
160 },
161 failure: function(error){
162 alert("修改用户权限失败：" + error.statusText);
163 }
164 }, data);
165 }
166
167 new YAHOO.util.YUILoader( {
168 require : [ 'menu', 'event', 'connection', 'datasource', 'datatable', 'treeview' ],
169 base : 'http://www.cnblogs.com/js/yui_2.8.1/',
170 filter : 'RAW',
171 onSuccess : function() {
172 YAHOO.util.Event.onContentReady("menubar", function() {
173 getMenu();
174 });
175
176 YAHOO.util.Event.onContentReady("userList", function() {
177 loadUsers();
178 });
179
180 YAHOO.util.Event.onContentReady("divMenuTree", function() {
181 showMenuTree();
182 });
183 },
184 onFailure : function(o) {
185 alert("YUI模块加载错误: " + YAHOO.lang.dump(o));
186 }
187 }).insert();
188 </script>
189 </head>
190
191 <body class="yui-skin-sam">
192 <div id="banner"></div>
193 <div id="menu">
194 <div id="menubar" class="yuimenubar yuimenubarnav">
195 <div class="bd">
196 <ul class="first-of-type">
197 <li class="yuimenubaritem first-of-type">
198 <a class="yuimenubaritemlabel">数据录入</a>
199 </li>
200 <li class="yuimenubaritem">
201 <a class="yuimenubaritemlabel">数据修改</a>
202 </li>
203 <li class="yuimenubaritem">
204 <a class="yuimenubaritemlabel">数据检索</a>
205 </li>
206 <li class="yuimenubaritem">
207 <a class="yuimenubaritemlabel">报表</a>
208 </li>
209 <li class="yuimenubaritem">
210 <a class="yuimenubaritemlabel">系统</a>
211 </li>
212 </ul>
213 </div>
214 </div>
215 </div>
216 <div id="desktop">
217 <div id="pageTitle">用户权限管理</div>
218 <table id="pageTable">
219 <tr id="user">
220 <th width="10%">用户：</th>
221 <td>
222 <select id="userList">
223 <option value="-1">请选择用户</option>
224 </select>
225 <button onclick="savePrivilege()">保存</button>
226 </td>
227 </tr>
228 <tr id="privilege">
229 <th>权限：</th>
230 <td><div id="divMenuTree" class="ygtv-checkbox"></div></td>
231 </tr>
232 </table>
233 </div>
234
235 <div id="footer">
236 <table width="100%">
237 <tr>
238 <td id="loginUser" width="200px"></td>
239 <td width="500px"></td>
240 <td width="100px" align="right"><a href="javascript:logout();">退出</a></td>
241 </tr>
242 </table>
243 </div>
244 </body>
245
246 </html>
