- 浏览: 186649 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
di1984HIT:
记录一下。嘿嘿
eclipse中关闭js报错的方法 -
di1984HIT:
谢谢,学习了
jdk输出带缩进格式xml的方法 -
雪狐狼:
为何,每次查询需要 构建datatable?
YUI DataTable 服务器端翻页与排序 -
lijunwyf41:
nd:"nd", // 表示已经发送请求的 ...
jqGrid <-- json --> spring,hibernate之服务器端分页,排序 -
yiyu:
最近不看YUI了,发现一个国产的前端框架,是金蝶出的,叫Ope ...
YUI 3 学习笔记(5)- Attribute类
日前做一个用户权限管理的页面,权限是一个树形结构,每个节点前是一checkbox,其状态表示
用户是否具有该权限,当切换用户时,根据选择用户的权限设置树形的相应节点,保存时根据当
前用户的选中情况保存数据。
画面如下:
其间主要碰到三个问题
1)带checkbox的TreeView的显示
2)根据用户权限数据对权限树赋值
3)根据树形中checkbox的状态获取权限数据
其解决办法如下:
1)
HTML中展现TreeView的div需要将class设为"ygtv-checkbox"
另外javascript里要做如下处理(详细功用参见注释):
2)
可以用TreeView的getNodeByIndex或者getNodeByProperty取得节点,然后
使用Node的unhighlight不选,用highlight选中节点,代码片段如下:
在设定当前用户的权限时,非叶子节点的状态可能是选中、部分选中和未选中,我
们不必自己判断,只要仅对叶子节点进行设置,然后让YUI自己去改变其上级节点状
态就可以了。
其中unhighlight,highlight的参数表示是否不改变该节点的上下级节点状态,在
清除所有checkbox时不需要改变,但在设定当前用户的权限时正好可以利用这一功能。
3)
YUI的带checkbox的TreeView其实不是真正的checkbox,是用css切换图片实现的,所以
好像无法像一组checkbox一样直接取得选中信息(我是没找到),不过可以根据Node的
highlightState属性知道该节点的状态,其中0表示未选中,1未部分选中,2未选中,所
以下面这段代码可以将选中的权限的ID组成一个数组:
总的感觉YUI是一个比较全面的库,虽然写法有些繁琐,但作为一个还算面面俱到的库使用
起来还是感觉蛮不错的,我只是另外少数地方用到了prototype,感觉就它们俩一般问题都
能搞定了。
最后,贴出整个页面的代码,其中很多是和TreeView无关的代码。我和后台交互的是json
格式的数据,具体我就不说明了,根据代码也能猜出个大概其了。
用户是否具有该权限,当切换用户时,根据选择用户的权限设置树形的相应节点,保存时根据当
前用户的选中情况保存数据。
画面如下:
其间主要碰到三个问题
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);
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); } }
在设定当前用户的权限时,非叶子节点的状态可能是选中、部分选中和未选中,我
们不必自己判断,只要仅对叶子节点进行设置,然后让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 ++; } }
总的感觉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 respJSON = 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 respJSON = 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 respJSON = 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 respJSON = 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>
发表评论
-
使用fuelux tree
2016-04-19 21:06 2701bootstrap这么火,就是fuelux又是同一家推 ... -
eclipse中关闭js报错的方法
2013-05-18 12:35 1553eclipse中引入yui报错,关闭validation后不 ... -
YUI DataTable不显示标题栏的方法
2010-09-07 14:32 1703今天碰到一个怪异的需求,用YUI做的表格不要各字段的标题,即下 ... -
YUI中的模块化使用对话框
2010-08-12 16:30 3881最近在试着用YUI 2.8.1,想到一个将对话框模块化的方法, ... -
YUI 3 学习笔记(5)- Attribute类
2010-03-08 16:07 2028Attribute类用于向一个类添加属性,它给类增加了set和 ... -
YUI 3 学习笔记(4)- Base基类
2010-03-05 17:29 1543Base是一个基础类,通过继承Base可以以一种统一的方式创建 ... -
YUI 3 学习笔记(3)- Event
2010-03-03 16:02 2199YUI的Event包可以用来操 ... -
YUI 3 学习笔记(2)- Node
2010-03-01 17:46 2527Node是用来操作DOM node的工具,实际上每一个Node ... -
YUI 3 学习笔记(1)-YUI Global对象
2010-03-01 15:38 2081YUI3模块已经发布,配套的工具及部件虽然现在还不全,但也计划 ... -
html5 canvas 小试:绘制2次曲线
2010-02-23 17:27 2254canvas是html5中新增加的元素,可以用来在html中通 ... -
设置innerHTML后翻滚的奇怪现象
2010-01-28 16:47 1150最近碰到一个奇怪的问题,记录一下。 处理过程是这样的,画面的 ... -
ie和firefox上都运行流畅的网页分割条
2010-01-13 14:15 2000这两天因工作需要做了一个网页分割条,期间碰到不少问题,好在最后 ... -
检测浏览器支持的javascript版本
2010-01-05 11:31 1512今天找到一段检测浏览器支持的javascript版本的代码,感 ... -
使用YUI layout时菜单被遮挡问题的解决
2009-10-16 14:00 1431使用YUI layout时菜单被遮挡问题的解决 今天在使用Y ... -
javascript中定义类的几种方法
2009-09-02 15:59 1118在javascript中有几种定义类的方式,以下分别列出并说明 ... -
从服务器获取Chart的数据
2009-08-11 11:04 3029ExtJs提供了绘制图表的功能,可以绘制折线图、条形图和饼图。 ... -
ExtJs树的动态加载
2009-08-06 10:37 4802有时候我们不希望一开始就取得整个树的数据然后初始化树,而是希望 ... -
使用Smooth Navigational Menu实现动态菜单
2009-02-10 14:34 1405在企业应用中一般需要根据登录用户的身份动态生成系统菜单,本文演 ... -
jquery学习笔记(5) AJAX
2009-02-05 10:43 11531. 添加HTML $('#dictionary').loa ... -
jquery学习笔记(4) DOM Manipulation
2009-02-04 14:43 1039本文是Learning JQuery的学习笔记 1. att ...
相关推荐
YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...
适合图灵程序设计丛书web开发系列-javascript基础教程的学习使用
YUI 2 is a JavaScript and CSS library with more than 30 unique components including low-level DOM utilities and high-level user-interface widgets. Currently at version 2.9.0, YUI 2 is robust, proven, ...
4. **国际化与本地化**:YUI 2.9支持多语言环境,提供Localizer模块,使得应用可以根据用户的语言设置动态调整界面语言,适应全球化的市场需求。 5. **布局管理**:Layout Manager组件允许开发者创建响应式布局,...
方法一:如何根据条件判断是否默认选中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用户权限。 运行“节点服务器”。 转到
YUI(Yahoo! User Interface Library)是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、可扩展的网络应用程序。YUI3.7.3是YUI的一个特定版本,它在发布时被视为最新的版本,提供了许多改进和新...
【标题】"yui:IRKit中的智能生活"揭示了一个基于JavaScript的项目,它与IRKit设备集成,致力于实现家居智能化。IRKit是一款能够接收、发送红外信号的小型硬件设备,使得用户可以通过编程来控制各种红外遥控器所能...
【yui:最小的vim配色方案】 在程序员的世界里,Vim是一款备受推崇的文本编辑器,以其高效、轻量级和高度可定制性著称。为了提升Vim的使用体验,用户们通常会根据个人喜好配置各种插件和配色方案。"yui"便是这样一...
《深入理解YUI 3.9.0 r2:界面设计与资源优化》 YUI,全称为Yahoo! User Interface Library,是由雅虎公司开发的一个开源JavaScript库,它旨在简化Web应用程序的构建,特别是对于界面设计和交互效果的实现。在3.9.0...
var tree = new YUI().use('treeview', 'treeview-dragdrop', function(Y) { var treeData = [...]; var treeView = new Y.TreeView({ srcNode: '#treeContainer', dragDrop: true }).render(); treeView.setData...
**YUI:Yahoo! User Interface Library** YUI是雅虎公司开发的一个开源JavaScript库,它为Web开发者提供了丰富的工具和组件,以构建高效、可扩展的网页应用。这个压缩包"YUI.rar"包含了YUI的源代码以及相关的HTML和...
《深入理解YUI:基于“yui.rar 例子”的解析》 YUI,全称Yahoo! User Interface Library,是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、易于维护的网页应用。本篇文章将结合“yui.rar 例子”...
选择-yui 使用,请确保获取原生 js 文件, 和 。 那么你都准备好了。 使用 selected.yui.js 而不是 selected.prototype 或 selected.jquery 他们 (HarvestHQ) 正准备发布 ChosenJS 的完全原生版本,所以我不打算...
### YUI 详细说明文档 #### 一、YAHOO工具库 YUI是一个由Yahoo!开发的强大且灵活的开源JavaScript框架,它包含了丰富的库和工具集,旨在帮助开发者更轻松地构建高质量的Web应用程序。YAHOO工具库是YUI的核心组成...
**yuicompressor-maven-plugin详解** `yuicompressor-maven-plugin`是一款强大的Maven插件,主要用于优化前端资源,特别是JavaScript和CSS文件。这个插件是基于YUI Compressor,一个由Yahoo开发的开源工具,它能...
《深入理解YUI3:基于yui3-master.zip的探讨》 YUI(Yahoo! User Interface Library)是由雅虎公司开发的一套开源JavaScript库,它为Web开发者提供了丰富的功能和工具,以创建交互性强、性能优秀的网页应用。YUI3是...
在"YUI2 库与例子都有了"这个压缩包文件中,包含了版本2.8.0r4的YUI库,这是一次重要的更新,包含了多项改进和修复。 YUI2的核心组成部分包括: 1. **核心库(Core)**:这是YUI的基础,提供事件处理、DOM操作、...
yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...
具体到文件`YUI_TreeView.doc`,这很可能是关于YUI TreeView组件的文档。TreeView是YUI中的一个UI组件,用于展示层次结构的数据,常见于文件目录浏览、组织架构图等场景。它支持动态加载、拖放操作、节点展开与折叠...