树型结构TreeView权限的赋值与读值_tree树形控件

作者 :姑苏慕容 2024-01-03 11:02:06 围观 : 次评论

豪士君测试所用平台

纪录美好生活，一起观趣事，这里包罗IT知识，豪仕知识网是信息的海洋，有你听不到的故事，接下来我们一起来看看树型结构TreeView权限的赋值与读值。

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

画面如下：

其间主要碰到三个问题

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

其解决办法如下： 1）

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

Html代码

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

1 Javascript代码

2 menuTree = new YAHOO.widget.TreeView("pMenuTree", 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<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代码：

002

003

004

005

006

007 JNOC OA

008

009

010

011

012

013

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

030

031

032

033

034

035

189

190

191

192

193

194

195

196

197

198 数据录入

199

200

201 数据修改

202

203

204 数据检索

205

206

207 报表

208

209

210 系统

211

212

213

214

215

216

217 用户权限管理

218

219

220

用户：

221

222

223 请选择用户

224

225

226

227

228

229

权限：

230

231

232

233

234

235

236

237

238

239

240 退出

241

242

243

244

245

246