`
yiyu
  • 浏览: 186649 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

YUI:带checkbox的TreeView的赋值与读值

阅读更多
日前做一个用户权限管理的页面,权限是一个树形结构,每个节点前是一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);


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>
  • 大小: 10.4 KB
分享到:
评论

相关推荐

    yui_2.9.0前端UI

    YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...

    yui_2.9.0用于javascript基础教程

    适合图灵程序设计丛书web开发系列-javascript基础教程的学习使用

    YUI类库2.9.0下载download

    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, ...

    yui2.9

    4. **国际化与本地化**:YUI 2.9支持多语言环境,提供Localizer模块,使得应用可以根据用户的语言设置动态调整界面语言,适应全球化的市场需求。 5. **布局管理**:Layout Manager组件允许开发者创建响应式布局,...

    layui默认选中table的CheckBox复选框方法

    方法一:如何根据条件判断是否默认选中table表格前面的复选框 ... {type:'checkbox'} , {field: 'userName',sort: true, title: '用户名称'} , {field: 'account',sort: true, title: '登录账户'} , {field: 'dele

    nodejs-yui:这是带有yui的node.js

    nodejs-yui 这是带有yui的node.js 首先在您的计算机上安装node.js。 将此文件解压缩到目录中。 从终端窗口进入目录并运行'npm install'可能是需要此权限的sudo用户权限。 运行“节点服务器”。 转到

    YUI3.7.3 最新版本 带API

    YUI(Yahoo! User Interface Library)是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、可扩展的网络应用程序。YUI3.7.3是YUI的一个特定版本,它在发布时被视为最新的版本,提供了许多改进和新...

    yui:IRKit中的智能生活

    【标题】"yui:IRKit中的智能生活"揭示了一个基于JavaScript的项目,它与IRKit设备集成,致力于实现家居智能化。IRKit是一款能够接收、发送红外信号的小型硬件设备,使得用户可以通过编程来控制各种红外遥控器所能...

    yui:最小的vim配色方案

    【yui:最小的vim配色方案】 在程序员的世界里,Vim是一款备受推崇的文本编辑器,以其高效、轻量级和高度可定制性著称。为了提升Vim的使用体验,用户们通常会根据个人喜好配置各种插件和配色方案。"yui"便是这样一...

    yui 资源包

    《深入理解YUI 3.9.0 r2:界面设计与资源优化》 YUI,全称为Yahoo! User Interface Library,是由雅虎公司开发的一个开源JavaScript库,它旨在简化Web应用程序的构建,特别是对于界面设计和交互效果的实现。在3.9.0...

    YUI3 中tree的两种实现

    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.rar_html_javascript YUI_yui_yui javascript

    **YUI:Yahoo! User Interface Library** YUI是雅虎公司开发的一个开源JavaScript库,它为Web开发者提供了丰富的工具和组件,以构建高效、可扩展的网页应用。这个压缩包"YUI.rar"包含了YUI的源代码以及相关的HTML和...

    yui.rar 例子

    《深入理解YUI:基于“yui.rar 例子”的解析》 YUI,全称Yahoo! User Interface Library,是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、易于维护的网页应用。本篇文章将结合“yui.rar 例子”...

    chosen-yui:选择 JS -- 转换为 YUI

    选择-yui 使用,请确保获取原生 js 文件, 和 。 那么你都准备好了。 使用 selected.yui.js 而不是 selected.prototype 或 selected.jquery 他们 (HarvestHQ) 正准备发布 ChosenJS 的完全原生版本,所以我不打算...

    YUI 详细说明文档

    ### YUI 详细说明文档 #### 一、YAHOO工具库 YUI是一个由Yahoo!开发的强大且灵活的开源JavaScript框架,它包含了丰富的库和工具集,旨在帮助开发者更轻松地构建高质量的Web应用程序。YAHOO工具库是YUI的核心组成...

    yuicompressor-maven-plugin

    **yuicompressor-maven-plugin详解** `yuicompressor-maven-plugin`是一款强大的Maven插件,主要用于优化前端资源,特别是JavaScript和CSS文件。这个插件是基于YUI Compressor,一个由Yahoo开发的开源工具,它能...

    yui3-master.zip

    《深入理解YUI3:基于yui3-master.zip的探讨》 YUI(Yahoo! User Interface Library)是由雅虎公司开发的一套开源JavaScript库,它为Web开发者提供了丰富的功能和工具,以创建交互性强、性能优秀的网页应用。YUI3是...

    YUI2 库与例子都有了

    在"YUI2 库与例子都有了"这个压缩包文件中,包含了版本2.8.0r4的YUI库,这是一次重要的更新,包含了多项改进和修复。 YUI2的核心组成部分包括: 1. **核心库(Core)**:这是YUI的基础,提供事件处理、DOM操作、...

    yuicompressor-yui compressor

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...

    关于yui的学习

    具体到文件`YUI_TreeView.doc`,这很可能是关于YUI TreeView组件的文档。TreeView是YUI中的一个UI组件,用于展示层次结构的数据,常见于文件目录浏览、组织架构图等场景。它支持动态加载、拖放操作、节点展开与折叠...

Global site tag (gtag.js) - Google Analytics