easyui treegrid实现显示checkbox并能获取到选定值的
闲聊：
小颖最近忙疯了，经常被加班，昨天都要下班了，又提了个需求，虽然写的代码不多只有几行，可是测试环境很难跑通，一会就ie崩溃了，所以弄得小颖最近老是头晕。
也不知道最近是怎么了，一向特别爱吃的小颖，最近很没有食欲，中午不好好吃饭，就吃一个苹果，再吃几口米然后就饱了，晚上回去也不是很饿，但是到下午就开始头晕，哎！不知道自己是怎么了，昨天下午我们家大颖给我吃零食，我说我没有胃口，旁边的同事都笑了，都说不相信，我那么爱吃的人，竟然会说没胃口不想吃······，可是我真的不想吃啊啊啊啊啊啊啊。好啦不闲聊了，言归正传，下面一起来看看小颖写的demo吧。
注意：支持狐火和IE浏览器哦！不支持chrome
准备：
效果图：
代码：
html+js
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>tree-demo</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script src="js/jquery.min.js" charset="utf-8"></script>
<script src="js/jquery.easyui.min.js" charset="utf-8"></script>
<script type="text/javascript">
function show(checkid) {
var s = '#check_' + checkid;
/*选子节点*/
var nodes = $("#test").treegrid("getChildren", checkid);
for (i = 0; i < nodes.length; i++) {//当父节点被选中，则其孩子都被选中
$(('#check_' + nodes[i].id))[0].checked = $(s)[0].checked; }
//选上级节点
if (!$(s)[0].checked) {//如果子节点中有没有选中的，则父节点就不会被选中
var parent = $("#test").treegrid("getParent", checkid);
$(('#check_' + parent.id))[0].checked = false;
while (parent) {
parent = $("#test").treegrid("getParent", parent.id);
$(('#check_' + parent.id))[0].checked = false;
}
} else {//如果子节点全部被选中，则父节点被选中
var parent = $("#test").treegrid("getParent", checkid);
var flag = true;
var sons = parent.sondata.split(',');
for (j = 0; j < sons.length; j++) {//如果子节点中存在没有选中的，则flag为false
if (!$(('#check_' + sons[j]))[0].checked) {
flag = false;
break;
}
}
if (flag){
$(('#check_' + parent.id))[0].checked = true;//如果子节点中不存在没有选中的，则flag为true，父节点被选中
}
}
} function formatcheckbox(val, row) {
return "<input type='checkbox' onclick=show('" + row.id + "') id='check_" + row.id + "' />";
}
//获取选中的结点
function getSelected() {
var idList = "";
$("input:checked").each(function() {
var id = $(this).attr("id");
if (id.indexOf("check_") > -1) {
idList += id.replace("check_", '') + ',';
}
});
alert(idList);
}
</script>
</head> <body>
<div style="margin:20px 0;"></div>
<table id="test" class="easyui-treegrid" style="width:700px;height:550px" data-options="
url: 'treegrid_data4.json',
method: 'get',
rownumbers: true,
idField: 'id',
treeField: 'name'
">
<thead>
<tr>
<th data-options="field:'name'" width="320">菜单/操作</th>
<th data-options="field:'size'" width="60" align="center" formatter="formatcheckbox">权限分配</th>
</tr>
</thead>
</table>
<input type="button" value="获取选中的ID值" onclick="getSelected()">
</body> </html>
treegrid_data4.json
[{
"id": 1,
"name": "文档栏目管理",
"size": "",
"date": "02/19/2010",
"sondata": "11,12,13,14",
"children": [{
"id": 11,
"name": "增加",
"size": "",
"date": "03/20/2010"
}, {
"id": 12,
"name": "操作管理",
"size": "",
"date": "01/20/2010"
}, {
"id": 13,
"name": "删除",
"size": "",
"date": "01/20/2010"
}, {
"id": 14,
"name": "修改",
"size": "",
"date": "01/20/2010"
}]
}, {
"id": 2,
"name": "菜单管理",
"size": "",
"date": "02/19/2010",
"sondata": "21,22,23,24",
"children": [{
"id": 21,
"name": "增加",
"size": "",
"date": "03/20/2010"
}, {
"id": 22,
"name": "操作管理",
"size": "",
"date": "01/20/2010"
}, {
"id": 23,
"name": "删除",
"size": "",
"date": "01/20/2010"
}, {
"id": 24,
"name": "修改",
"size": "",
"date": "01/20/2010"
}]
}, {
"id": 3,
"name": "角色管理",
"size": "",
"date": "02/19/2010",
"sondata": "31,32,33,34",
"children": [{
"id": 31,
"name": "增加",
"size": "",
"date": "03/20/2010"
}, {
"id": 32,
"name": "操作管理",
"size": "",
"date": "01/20/2010"
}, {
"id": 33,
"name": "删除",
"size": "",
"date": "01/20/2010"
}, {
"id": 34,
"name": "修改",
"size": "",
"date": "01/20/2010"
}]
}, {
"id": 4,
"name": "用户管理",
"size": "",
"date": "02/19/2010",
"sondata": "41,42,43,44",
"children": [{
"id": 41,
"name": "增加",
"size": "",
"date": "03/20/2010"
}, {
"id": 42,
"name": "操作管理",
"size": "",
"date": "01/20/2010"
}, {
"id": 43,
"name": "删除",
"size": "",
"date": "01/20/2010"
}, {
"id": 44,
"name": "修改",
"size": "",
"date": "01/20/2010"
}]
}]
easyui treegrid实现显示checkbox并能获取到选定值的的更多相关文章
- silverlight中 ComboBox绑定数据库，并获取当前选定值
silverlight中 ComboBox绑定数据库,并获取当前选定值 在silverlight中 用combobox下拉菜单绑定数据库的方法和用DataGrid绑定数据库的方法类似. page.xa ...
- Easyui treegrid 无法显示树形结构解决办法
easyui treegrid 中检查了数据结构没有问题的,但就是不展示树形结构, 检查发现原来是 var columnsAll = [ { title: '任务ID', field: 'TaskID ...
- easy-ui treegrid 实现分页 并且添加自定义checkbox
首先第一点easy-ui treegrid 对分页没有好的实现, 因为在分页的过程中是按照 根节点来分页的 后台只能先按照 根节点做分页查询 再将子节点关联进去, 这样才能将treegrid 按 ...
- 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格
EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...
- EasyUI treegrid 加载checked
EasyUI treegrid 加载checked $(function () { $('#tbDictContTree').treegrid({ title: '数据字典目录管理', iconCl ...
- jquery easyui菜单树显示
目前做了一个easyui项目需要显示多级菜单,菜单配置到数据库中,因此每级菜单都需要到数据库中取,用了jQuery EasyUI方便多了. 效果体验:http://hovertree.com/texi ...
- EasyUi TreeGrid封装
礼物一:树型实体的抽象与封装 所谓树型实体,就是具有树型结构关系的实体,比如省.市.区.对于初学者,可能会创建三张表进行存储,有经验的开发者通过引入ParentId将设计简化为一张表,但是基于Pare ...
- 基于EasyUI Treegrid的权限管理资源列表
1. 前言 最近在开发系统权限管理相关的功能,主要包含用户管理,资源管理,角色管理,组类别管理等小的模块.之前的Web开发中也用过jQueryEasyUI插件,感觉这款插件简单易用,上手很快.以前用到 ...
- Jquery easyui treegrid实现树形表格的行拖拽
前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自 ...
随机推荐
- grep过滤搜索
cat /proc/2666/maps | busybox grep libumcpart.so
- C++------------typedef 函数指针类型定义
摘要bycrazyhacking: typedef 是定义了一种"函数指针"类型,可以再声明很多变量.函数指针的定义是定义了一个变量. int max(int x,i ...
- Spring--AOP--面向切面编程
AOP: 面向切面编程. 通过动态代理实现. AOP就3条线, 2条线给剪断. 实现:动态代理 如果实现interface的话, 用Proxy, InvocationHandler. 不实现inter ...
- MySQL查询in操作 查询结果按in集合顺序显示_Mysql_脚本之家
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- POJ 1696 Space Ant
极角排序 每次选择一个最外围的没选过的点,选择的时候需要利用极角排序进行选择 #include<cstdio> #include<cstring> #include<ve ...
- Java将List/JavaBean转成Json
import java.beans.Introspector; import java.beans.PropertyDescriptor; import java.util.List; /** * ...
- Java Base64、AES、SHA1、MD5加密算法（转载）
package com.example.decript; import java.io.UnsupportedEncodingException; import java.security.Inval ...
- (中等) UESTC 94 Bracket Sequence，线段树+括号。
There is a sequence of brackets, which supports two kinds of operations. we can choose a interval [l ...
- linux命令学习7-jstat命令
最近维护的项目使用的是java开发的,所以对于jvm虚拟机相关的操作还是必须要了解的,就先从最基本的jstat来学习起来. 首先需要会的就是full gc的查看; 下面就从网上收集了一些工具介绍, 慢 ...
- ucos信号量集源码分析
在实际的应用之中,一个任务经常需要等待多个信号量的同时生效,或者说任务需要根据多个信号量的组合作用的结果来决定任务的运行方式,为了实现这种多信号量组合的功能,ucos实现了信号量集的特殊结构. 信号量 ...