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.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自 ...
随机推荐
- Fourinone 作者博客 -集群复制
http://my.oschina.net/fourinone/blog http://www.iteye.com/blogs/subjects/fourinone http://fourinone. ...
- The 2014 ACM-ICPC Asia Regional Anshan
继续复盘下一场Regional! [A]-_-/// [B]模拟(之前每次遇到模拟.暴搜都直接跳了,题目太长也是一个原因...下次是在不行可以尝试一下) [C]数论 互质.容斥? [D]数学推导(方差 ...
- Nginx http_user_agent 防御 ab 等
日志出现大量: xxxxxxxxxxxxx - - [04/Jul/2013:23:37:49 +0800] "GET /1000.html HTTP/1.0" 200 56471 ...
- POJ 3991 Seinfeld
首先进行一次括号匹配,把正确匹配的全部删去. 删去之后剩下的状态肯定是 L个连续右括号+R个连续左括号. 如果L是偶数,答案是L/2+R/2: 否则答案是 (L-1)/2+(R-1)/2+2: #in ...
- SQL数据库文件修复/用友/金蝶/管家婆/速达/思讯数据库恢复 硬盘恢复
硬盘的故障情况可以分为以下几类: 1.控制电路故障 大部分外电路的问题是电源芯片或主轴驱动芯片烧坏引起的,由于硬盘电路板质量问题.设计缺陷.市电波动.突然断电.芯片老化或者散热不良.静电等原因造成芯片 ...
- ubuntu下常用的apt-get 命令参数
apt-cache search package 搜索包 apt-cache show package 获取包的相关信息,如说明.大小.版本等 sudo apt-get install package ...
- 9.TCP:传输控制协议
1.TCP功能 TCP向应用层提供面向连接的.可靠的字节流服务.TCP可以认为是一个没有选择确认或否认的滑动窗口协议. TCP将用户数据打包构成报文段:它发送数据后启动一个定时器:另一 ...
- max-width
#main { max-width: 600px; margin: 0 auto; } <div id="main"> Using max-width instead ...
- iOS 倒出spa文件 打包
1. 修改Build Settings 修改 Code Signing: codesign failded 意思是签名错误,看看是否xcode -perferences是否没有登录,还有就是钥匙串密码 ...
- Nginx 限流
原文链接:http://colobu.com/2015/10/26/nginx-limit-modules/?utm_source=tuicool&utm_medium=referral 电商 ...