- 浏览: 473555 次
- 性别:
- 来自: 武汉
最新评论
-
zyzyzy123:
请问有工程吗,我现在正在实现打电话的功能,但是一直不通,怀疑是 ...
实用的java 串口通信程序 -
wuhaitong:
引用[img][/img][*][url][/url] ...
jbpm -
迷糊_le:
maven命令, 蛮好的,谢谢
maven eclipse -
Wuaner:
不错的文章 , 谢谢分享!
Hadoop -
yuqihengsheng:
strong 很细
HighLighter
日前做一个用户权限管理的页面,权限是一个树形结构,每个节点前是一checkbox,其状态表示
用户是否具有该权限,当切换用户时,根据选择用户的权限设置树形的相应节点,保存时根据当
前用户的选中情况保存数据。
画面如下:
其间主要碰到三个问题
1)带checkbox的TreeView的显示
2)根据用户权限数据对权限树赋值
3)根据树形中checkbox的状态获取权限数据
其解决办法如下:
1)
HTML中展现TreeView的div需要将class设为"ygtv-checkbox"
<div id="divMenuTree" class="ygtv-checkbox"></div>
另外javascript里要做如下处理(详细功用参见注释):
- menuTree = new YAHOO.widget.TreeView("divMenuTree", treeJSON);
- //点击节点时变换checkbox状态
- menuTree.subscribe('clickEvent', menuTree.onEventToggleHighlight);
- //节点状态变化时相应改变其父、子节点的状态
- menuTree.setNodesProperty('propagateHighlightUp', true);
- menuTree.setNodesProperty('propagateHighlightDown', true);
menuTree = new YAHOO.widget.TreeView("divMenuTree", treeJSON); //点击节点时变换checkbox状态 menuTree.subscribe('clickEvent', menuTree.onEventToggleHighlight); //节点状态变化时相应改变其父、子节点的状态 menuTree.setNodesProperty('propagateHighlightUp', true); menuTree.setNodesProperty('propagateHighlightDown', true);
2)
可以用TreeView的getNodeByIndex或者getNodeByProperty取得节点,然后
使用Node的unhighlight不选,用highlight选中节点,代码片段如下:
- //清除所有checkbox
- for(var i=1; i<=menuTree.getNodeCount(); i++) {
- menuTree.getNodeByIndex(i).unhighlight(true);
- }
- //设定当前用户的权限
- //只勾选叶子节点的checkbox,它们的上级节点状态会自动跟着变化,不用设置
- for(var i=0; i<menus.size(); i++) {
- var node = menuTree. getNodeByProperty('data', menus[i]);
- if (!node.hasChildren(true)) {
- node.highlight(false);
- }
- }
//清除所有checkbox for(var i=1; i<=menuTree.getNodeCount(); i++) { menuTree.getNodeByIndex(i).unhighlight(true); } //设定当前用户的权限 //只勾选叶子节点的checkbox,它们的上级节点状态会自动跟着变化,不用设置 for(var i=0; i<menus.size(); i++) { var node = menuTree. getNodeByProperty('data', menus[i]); if (!node.hasChildren(true)) { node.highlight(false); } }
在设定当前用户的权限时,非叶子节点的状态可能是选中、部分选中和未选中,我
们不必自己判断,只要仅对叶子节点进行设置,然后让YUI自己去改变其上级节点状
态就可以了。
其中unhighlight,highlight的参数表示是否不改变该节点的上下级节点状态,在
清除所有checkbox时不需要改变,但在设定当前用户的权限时正好可以利用这一功能。
3)
YUI的带checkbox的TreeView其实不是真正的checkbox,是用css切换图片实现的,所以
好像无法像一组checkbox一样直接取得选中信息(我是没找到),不过可以根据Node的
highlightState属性知道该节点的状态,其中0表示未选中,1未部分选中,2未选中,所
以下面这段代码可以将选中的权限的ID组成一个数组:
- var menuIDs = new Array();
- var idx = 0;
- for(var i=1; i<=menuTree.getNodeCount(); i++) {
- var node = menuTree.getNodeByIndex(i);
- if (node.highlightState > 0) {
- menuIDs[idx] = node.data;
- idx ++;
- }
- }
var menuIDs = new Array(); var idx = 0; for(var i=1; i<=menuTree.getNodeCount(); i++) { var node = menuTree.getNodeByIndex(i); if (node.highlightState > 0) { menuIDs[idx] = node.data; idx ++; } }
总的感觉YUI是一个比较全面的库,虽然写法有些繁琐,但作为一个还算面面俱到的库使用
起来还是感觉蛮不错的,我只是另外少数地方用到了prototype,感觉就它们俩一般问题都
能搞定了。
最后,贴出整个页面的代码,其中很多是和TreeView无关的代码。我和后台交互的是json
格式的数据,具体我就不说明了,根据代码也能猜出个大概其了。
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>JNOC OA</title>
- <link rel="stylesheet" type="text/css" href="../../js/yui_2.8.1/reset/reset.css">
- <link rel="stylesheet" type="text/css" href="../../js/yui_2.8.1/fonts/fonts.css">
- <link type="text/css" rel="stylesheet" href="../../css/common.css"/>
- <style type="text/css">
- table#pageTable {
- width: 80%;
- }
- table#pageTable tr#user {
- background-color:#FFFFCC;
- }
- table#pageTable tr#privilege {
- background-color:#CCFFFF;
- }
- table#pageTable th {
- vertical-align: top;
- }
- </style>
- <script type="text/javascript" src="../../js/prototype_1.6.1/prototype.js"></script>
- <script type="text/javascript" src="../../js/yui_2.8.1/yahoo/yahoo.js"></script>
- <script type="text/javascript" src="../../js/yui_2.8.1/yuiloader/yuiloader.js"></script>
- <script type="text/javascript" src="../../js/common.js"></script>
- <script type="text/javascript">
- var menuTree;
- function showMenuTree() {
- YAHOO.util.Connect.setDefaultPostHeader(false);
- YAHOO.util.Connect.initHeader("Accept", "application/json", true);
- var request = YAHOO.util.Connect.asyncRequest('POST', JNOCOA_ROOT_PATH + '/menuInfo/getMenuJSON.do', {
- success: function(resp){
- var resprespJSON = resp.responseText.evalJSON();
- if (respJSON.successed) {
- var treeJSON = respJSON.returnObject.evalJSON();
- menuTree = new YAHOO.widget.TreeView("divMenuTree", treeJSON);
- menuTree.subscribe('clickEvent', menuTree.onEventToggleHighlight);
- menuTree.setNodesProperty('propagateHighlightUp', true);
- menuTree.setNodesProperty('propagateHighlightDown', true);
- menuTree.render();
- }
- else {
- alert(respJSON.errors[0].message);
- }
- },
- failure: function(error){
- alert("读取菜单数据错误:" + error.statusText);
- }
- }, null);
- }
- function loadUsers() {
- YAHOO.util.Connect.setDefaultPostHeader(false);
- YAHOO.util.Connect.initHeader("Accept", "application/json", true);
- var request = YAHOO.util.Connect.asyncRequest('POST', JNOCOA_ROOT_PATH + '/userInfo/getAllUser.do', {
- success: function(resp){
- var resprespJSON = resp.responseText.evalJSON();
- if (respJSON.successed) {
- users = respJSON.returnObject;
- var seleUser = $("userList");
- for (var i=0; i<users.length; i++) {
- oOption = document.createElement('option');
- oOption.appendChild(document.createTextNode(users[i].name));
- oOption.setAttribute('value', users[i].id);
- seleUser.appendChild(oOption);
- }
- YAHOO.util.Event.addListener(seleUser, "change", refreshPrivilege);
- }
- else {
- alert(respJSON.errors[0].message);
- }
- },
- failure: function(error){
- alert("读取用户数据错误:" + error.statusText);
- }
- }, null);
- }
- function refreshPrivilege() {
- var selectedIdx = this.selectedIndex;
- var userID = parseInt(this.options[selectedIdx].getAttribute('value'));
- //准备POST数据:用户ID
- var data = $H( { id : userID }).toJSON();
- YAHOO.util.Connect.setDefaultPostHeader(false);
- YAHOO.util.Connect.initHeader("Accept", "application/json", true);
- YAHOO.util.Connect.initHeader("Content-Type", "application/json; charset=utf-8", true);
- var request = YAHOO.util.Connect.asyncRequest('POST', JNOCOA_ROOT_PATH + '/privilege/get.do', {
- success: function(resp){
- var resprespJSON = resp.responseText.evalJSON();
- if (respJSON.successed) {
- menus = respJSON.returnObject.menuIDs;
- //清除所有checkbox
- for(var i=1; i<=menuTree.getNodeCount(); i++) {
- menuTree.getNodeByIndex(i).unhighlight(true);
- }
- //勾选叶子节点的checkbox,它们的上级节点状态会自动跟着变化,不用设置
- for(var i=0; i<menus.size(); i++) {
- var node = menuTree. getNodeByProperty('data', menus[i]);
- if (!node.hasChildren(true)) {
- node.highlight(false);
- }
- }
- } else {
- alert(respJSON.errors[0].message);
- }
- },
- failure: function(error){
- alert("读取用户权限数据错误:" + error.statusText);
- }
- }, data);
- }
- function savePrivilege() {
- if (!menuTree) {
- return;
- }
- var selectedIdx = $('userList').selectedIndex;
- var userID = parseInt($('userList').options[selectedIdx].getAttribute('value'));
- var menuIDs = new Array();
- var idx = 0;
- for(var i=1; i<=menuTree.getNodeCount(); i++) {
- var node = menuTree.getNodeByIndex(i);
- if (node.highlightState > 0) {
- menuIDs[idx] = node.data;
- idx ++;
- }
- }
- var data = $H( { userID : userID, menuIDs : menuIDs }).toJSON();
- YAHOO.util.Connect.setDefaultPostHeader(false);
- YAHOO.util.Connect.initHeader("Accept", "application/json", true);
- YAHOO.util.Connect.initHeader("Content-Type", "application/json; charset=utf-8", true);
- var request = YAHOO.util.Connect.asyncRequest('POST', JNOCOA_ROOT_PATH + '/privilege/change.do', {
- success: function(resp){
- var resprespJSON = resp.responseText.evalJSON();
- if (respJSON.successed) {
- alert('已成功修改用户权限。');
- } else {
- alert(respJSON.errors[0].message);
- }
- },
- failure: function(error){
- alert("修改用户权限失败:" + error.statusText);
- }
- }, data);
- }
- new YAHOO.util.YUILoader( {
- require : [ 'menu', 'event', 'connection', 'datasource', 'datatable', 'treeview' ],
- base : '../../js/yui_2.8.1/',
- filter : 'RAW',
- onSuccess : function() {
- YAHOO.util.Event.onContentReady("menubar", function() {
- getMenu();
- });
- YAHOO.util.Event.onContentReady("userList", function() {
- loadUsers();
- });
- YAHOO.util.Event.onContentReady("divMenuTree", function() {
- showMenuTree();
- });
- },
- onFailure : function(o) {
- alert("YUI模块加载错误: " + YAHOO.lang.dump(o));
- }
- }).insert();
- </script>
- </head>
- <body class="yui-skin-sam">
- <div id="banner"></div>
- <div id="menu">
- <div id="menubar" class="yuimenubar yuimenubarnav">
- <div class="bd">
- <ul class="first-of-type">
- <li class="yuimenubaritem first-of-type">
- <a class="yuimenubaritemlabel">数据录入</a>
- </li>
- <li class="yuimenubaritem">
- <a class="yuimenubaritemlabel">数据修改</a>
- </li>
- <li class="yuimenubaritem">
- <a class="yuimenubaritemlabel">数据检索</a>
- </li>
- <li class="yuimenubaritem">
- <a class="yuimenubaritemlabel">报表</a>
- </li>
- <li class="yuimenubaritem">
- <a class="yuimenubaritemlabel">系统</a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div id="desktop">
- <div id="pageTitle">用户权限管理</div>
- <table id="pageTable">
- <tr id="user">
- <th width="10%">用户:</th>
- <td>
- <select id="userList">
- <option value="-1">请选择用户</option>
- </select>
- <button onclick="savePrivilege()">保存</button>
- </td>
- </tr>
- <tr id="privilege">
- <th>权限:</th>
- <td><div id="divMenuTree" class="ygtv-checkbox"></div></td>
- </tr>
- </table>
- </div>
- <div id="footer">
- <table width="100%">
- <tr>
- <td id="loginUser" width="200px"></td>
- <td width="500px"></td>
- <td width="100px" align="right"><a href="javascript:logout();">退出</a></td>
- </tr>
- </table>
- </div>
- </body>
- </html>
发表评论
-
Apache + Tomcat集群配置详解
2013-10-15 19:57 703Apache + Tomcat集群配置详解 ... -
maven eclipse
2013-06-05 08:41 10541. 安装m2eclipse插件 要用Eclipse构 ... -
ZooKeeper API
2013-05-16 17:27 8841)ZooKeeper API 简介 ZooKeeper ... -
给DIV添加滚动条
2012-08-02 10:51 1100直接为div指定overflow ... -
jboss数据源
2012-03-21 15:19 880jboss.xml in ejb/META-INF ... -
Apache+Jobss cluster安装配置
2012-03-21 11:21 1099系统环境:OS:linux AS4 2.6.9-78.EL A ... -
Spring 事务
2012-02-14 12:26 988Spring 事务不回滚的问题关键是:不能对该异常用 ... -
Apache 负载均衡+Tomcat集群
2012-01-17 08:45 1089一、本机环境 1.Windows 7 64位操作系统 2. ... -
ESB企业服务总线
2011-12-20 15:37 1294ESB是企业服务总线(Ente ... -
定庄记忆法
2011-08-13 10:53 1026桩可以分为大中小三类 ... -
Android开发环境搭建全程演示(jdk+eclip+android sdk)
2011-07-12 13:44 907Android开发环境搭建全程演示(jdk+eclip+a ... -
jbpm
2011-05-17 14:44 2012JBPM_ACTION action记录表 JBPM_DECI ... -
企业信息化十年
2010-12-02 22:06 9202000年之前:宇宙大爆炸 ... -
首先,遍历map有以下方法:
2010-10-22 13:00 1455首先,遍历map有以下方 ... -
职场能力
2010-10-02 17:49 1057如今职场竞争越发激烈,一大群求职者竞聘同一个(或少数几个)岗位 ... -
tomcat 配置
2010-09-24 10:39 9761、 PermGen space的全称是Permanent ... -
Spring中的Assert工具类
2010-09-05 21:02 885方法入参检测工具 ... -
comments
2010-09-02 21:25 1109Item Description Comments ... -
tomcat 配置
2010-09-02 06:43 1404Tomcat内存溢出的原因 在生产环境中tomcat内存设置 ... -
wget
2010-07-21 08:56 1227wget功能的强大就不用多说了,在高手手里,它就像是个无往不利 ...
相关推荐
YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...
yui:最小的vim配色方案
方法一:如何根据条件判断是否默认选中table表格前面的复选框 ... {type:'checkbox'} , {field: 'userName',sort: true, title: '用户名称'} , {field: 'account',sort: true, title: '登录账户'} , {field: 'dele
nodejs-yui 这是带有yui的node.js 首先在您的计算机上安装node.js。 将此文件解压缩到目录中。 从终端窗口进入目录并运行'npm install'可能是需要此权限的sudo用户权限。 运行“节点服务器”。 转到
适合图灵程序设计丛书web开发系列-javascript基础教程的学习使用
NULL 博文链接:https://lsqwzz.iteye.com/blog/1228250
选择-yui 使用,请确保获取原生 js 文件, 和 。 那么你都准备好了。 使用 selected.yui.js 而不是 selected.prototype 或 selected.jquery 他们 (HarvestHQ) 正准备发布 ChosenJS 的完全原生版本,所以我不打算...
yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...
YUI教程YUI 入门教程YUI 入门教程YUI 入门教程
Yui,这是一个由node.js和discord.js构成的Discord机器人。 自托管机器人 我不支持或鼓励对该机器人进行自我托管。 此处的代码用于学习和提高透明度。 只要您遵守许可,我们都不会在乎您是否托管自己的Yui版本。 ...
在Web方面,其必须与各种DOM技术结合才能发挥作用。因此,一些具有开拓创新精神的开发者们便开发出了各种丰富的第三方框架,通过第三方的支持代码实现浏览器兼容性的统一、代码的简化以及功能的增强。 本书作者便...
YUI3.7.3 服务器上最新的版本 快来下载 带API
ui yasuda用户界面-IRKit中的Smart Living安装npm install开始npm start结构(假设) | | | | 消费类电子产品
雅虎的东西,简单的操作很好用 使用例子:java -jar D:\yuicompressor\yuicompressor\yuicompressor.jar E:\js\all.js -o E:\wap\wap2\js\all-min.js --charset utf-8 当然要装jdk了 不然就玩完了
使用方法渲染的方式生成数据表格,添加了checkbox,但发现checkbox位置不居中,如下图所示 2、解决办法 通过layui官方社区,找到如下代码,只需要添加如下样式即可解决 .layui-table-cell .layui-form-checkbox...
yui3-master.zip
yui 源码下载,3.9.0 r2 包,最新版本
数据表格 t2 = { elem: '#test2', data: tableData2, ... {type:'checkbox',field:'id'}, {field:'cstMoldNo', title: '客户模号',edit:'text'}, {field:'cstProdName', title: '产品名称',edit:'text'}, {fiel
Discord-bot-Yui “游戏设计界”的Discord机器人 设置 转到不和谐网站上以生成您的令牌并将其复制到config.json 按“开始”,您将看到“就绪”并享受它! 公告 更新2021/03/23 基本功能设置。
YUI2 库与例子都有了。很强大。 YUI2 库与例子都有了。很强大。