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

最新推荐文章于 2024-08-26 12:09:31 发布
最新推荐文章于 2024-08-26 12:09:31 发布
阅读量137 收藏
点赞数
分类专栏： javascript 文章标签： YUI Yahoo json JavaScript 数据结构 ViewUI
日前做一个用户权限管理的页面，权限是一个树形结构，每个节点前是一checkbox，其状态表示
用户是否具有该权限，当切换用户时，根据选择用户的权限设置树形的相应节点，保存时根据当
前用户的选中情况保存数据。

画面如下：
[img]http://dl.iteye.com/upload/attachment/306901/0bb3402c-b05c-3b48-a0bd-7528ad8fa72a.png[/img]

其间主要碰到三个问题

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>
chinabluedolphin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt QTreeWidget(树形控件)的用法
LittleMouse
07-29 1万+
Qt QTreeWidget 新建一个Qt Widgets Application，拖拽一个Tree Widget 到 ui 界面上，最后实现的效果如下： 添加代码 //test.h //在头文件里添加两个公用函数还有一个槽函数的声明 #include public: void initTreeWidget(); void updateParentItem(QTreeWidge
nodejs-yui:这是带有yui的node.js
05-04
nodejs-yui 这是带有yui的node.js 首先在您的计算机上安装node.js。 将此文件解压缩到目录中。 从终端窗口进入目录并运行'npm install'可能是需要此权限的sudo用户权限。 运行“节点服务器”。 转到
C#（在TreeView中使用CheckBox）
刘筱筑的专栏
04-18 3664
树结构中的节点共有两层（父节点是分类名称子节点是属于该类的项的名称）都是从数据库中读出而且是在读出的过程中将具体的数据项名称进行分类的。要想实现：treeview的AfterCheck事件中的：    1.父节点勾选则子节点全部勾选    2.父节点不勾选则子节点全部不勾选    3.子节点全部不勾选则父节点不够选而且父节点的文本呈黑色    4.子节点部分勾选则父节点不勾选而且文本呈灰色   
easyui复选框树动态加载后台数据，实现自动选中数据库中数据。后台语言是.NET...
weixin_30595035的博客
07-25 200
最近公司做项目用到了easyui复选框树来实现加载不同类型产品。因为我刚刚毕业，现在也算是实习吧，所以一脸懵逼啊。在公司里的一个哥的帮助下 ，我写出来这个EasyUi复选框树了，虽然东西不难，但也是自己弄出来的，有成就感，进步总要一点一点的，经验需要积累。 先上一下图片吧 ，轻喷啊 我是应届生。。。。 查看了一下API， 给一组Json数据，其中要包括必要的树控件的属性，这下...
yui：最小的vim配色方案
02-01
【yui：最小的vim配色方案】 在程序员的世界里，Vim是一款备受推崇的文本编辑器，以其高效、轻量级和高度可定制性著称。为了提升Vim的使用体验，用户们通常会根据个人喜好配置各种插件和配色方案。"yui"便是这样一...
chosen-yui:选择 JS -- 转换为 YUI
07-19
选择-yui 使用，请确保获取原生 js 文件， 和 。 那么你都准备好了。 使用 selected.yui.js 而不是 selected.prototype 或 selected.jquery 他们 (HarvestHQ) 正准备发布 ChosenJS 的完全原生版本，所以我不打算...
Yui:一款由eris和love打造的超棒Discord机器人！
04-30
Yui，这是一个由node.js和discord.js构成的Discord机器人。 自托管机器人 我不支持或鼓励对该机器人进行自我托管。 此处的代码用于学习和提高透明度。 只要您遵守许可，我们都不会在乎您是否托管自己的Yui版本。 ...
discord-bot-Yui:游戏设计IP宇宙的不和谐机器人
05-17
Discord-bot-Yui “游戏设计界”的Discord机器人 设置 转到不和谐网站上以生成您的令牌并将其复制到config.json 按“开始”，您将看到“就绪”并享受它！ 公告 更新2021/03/23 基本功能设置。
实战YUI 的 Menu 组件
song2012的专栏
11-16 170
Menu家族成员 YAHOO.widget.Menu YAHOO.widget.Overlay 的子类,其他menu容器的超类. Menu类创建一个容器(Container)并放置一列垂直的列表.每项菜单称为MenuItem. YAHOO.widget.ContextMenu Menu的子类,创建一个...
easyui tree递归回绑数据 选中checkbox
Nicholas_long的博客
08-15 1699
老规矩先看效果图: 在网上百度过好多方法最常用的是一下方式 var node = $('#tt').tree('find', 1);//找到id为”tt“这个树的节点id为”1“的对象$('#tt').tree('check', node.target);//设置选中该节点 采用以上的方式可能会有问题，当然 因数据而异 仔细看文档有所发现 可以设置checked：true 这里有一...
c#——Winform TreeView 赋值（id,name,pid）类型数据
世界中心的专栏
07-28 4687
没想到给treeview赋值这么麻烦 还要用递归 不想多说，直接上代码 var dgvTree = e.Control as DataGridViewTreeViewEditingControl; var items = _presenter.GetPtTree(); //得到所有父节点为null的形成的数组
关于TreeView中CheckBox的使用
热门推荐
fan_xiaohu的专栏
05-08 2万+
      项目设计中要使用TreeView中CheckBox（在TreeView的属性中的CheckBoxes设为ture）。想达到一个这样的效果：            1、选中一个节点，则子节点的状态为当前节点的状态并设置展开或折叠。如：本来默认全部是折叠的，当选择Laboratory并使其Checked为true时，其子节点的状态都为true并展开节点，反之。关闭节点。    
uni-cli 编译和打包并自动打开微信开发者工具
最新发布
weixin_41104307的博客
08-26 284
需求：平时使用uni-cli开发，是为了获得vscode更好的提到提示以及其他的便捷工具以及提升效率；带有一个缺点，那便是 uni-cli 编译之后，你需要手动打开 微信开发者工具，找到项目下的 dist/dev/mp-weixin 或者 dist/build/mp-weixin。这可能需要花费你几秒中的时间，粗看没啥，细算就很浪费。特别是打完包，还要关闭之前的dev项目,找到build项目 发包；这有的还费 预计10秒 -- 因此，作为懒人的我，决定去偷个懒。
YUI全解析：功能与组件详解
YUI还包括一系列实用的组件，如Connection Manager用于异步数据通信，Button、ButtonGroup用于创建可定制的按钮控件，AutoComplete用于输入提示，DataTable用于数据表格展示，DragDrop支持拖放功能，TreeView用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值