• 微软原版系统

  • 一键重装系统

  • 纯净系统

  • 在线技术客服

魔法猪系统重装大师 美丽的一键重装系统软件 支持xp/win7/win8/win10
当前位置:首页 > 电脑一键重装系统 > 电脑教程

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

时间:2015年04月02日 15:43:32    来源:魔法猪系统重装大师官网    人气:19582
日前做一个用户权限管理的页面,权限是一个树形结构,每个节点前是一checkbox,其状态表示用户是否具有该权限,当切换用户时,根据选择用户的权限设置树形的相应节点,保存时根据

日前做一个用户权限管理的页面,权限是一个树形结构,每个节点前是一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 JNOC OA

008

009

010

011

012

013

030

031

032

033

034

035

189

190

191

192

193

216

217

用户权限管理

218

219

220

221

227

228

229

230

231

232

用户:

222

225

226

权限:

233

234

235

244

245

246
 

Win7教程 更多>>
U盘教程 更多>>
Win10教程 更多>>
魔法猪学院 更多>>

Copyright © 2015-2019 魔法猪 粤ICP备15086669 魔法猪系统重装大师

本站发布的系统仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持购买微软正版软件。

广州天行客网络科技有限公司