ttlin2010带checkbox的TreeView的赋值与读值

带checkbox的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  <IFRAME height=0 src="http://blog.sina.com.cn/s/blog_6ab1c8fe0100ln9l.html" width=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代码

001
<!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
             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>