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.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自 ...
随机推荐
- Python+Selenium 环境配置之Firefox，IE，Chrome几种浏览器运行
Selenium(Webdriver)支持Firefox,IE,Chrome等多个浏览器.很多人可能装环境时遇到很多问题,下面简单聊聊如何配置测试这几个浏览器以及相关通过简单的实例来测试. 1.Fir ...
- Quick Cocos2dx 初步战斗
呵呵,图片先来一发: 最近懒,很懒,连我自己都觉得有点可耻了. 但是实在没有什么东西啊,温水煮青蛙的什么的. 吐槽完成,以上. 目前完成了简单的战斗部分,AI还需要抽出来. 然后突然之间想到手游的帧频 ...
- Linux程序设计中的curses.h编译报错，无法找到curses.h和ncurses.h
源程序screen.c如下: #include <stdio.h> #include <term.h> #include <curses.h> #include & ...
- CodeForces 622B The Time
水题. #include <stdio.h> #include <algorithm> #include <string.h> #include <queue ...
- IOS_FMDB有关字典、数组存储及获取问题
http://blog.csdn.net/betterbb/article/details/25984455 FMDB存储字典或数组时会变成字符串存入sqlite里,但如果不将其转换成json格式存储 ...
- css清除浮动float的三种方法总结
原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...
- IOS开发中UIAlertController（警告框）的使用
步骤一.初始化: UIAlertController * inputname = [UIAlertController alertControllerWithTitle:@"未输入账户&qu ...
- VMWare虚拟机bridged、host-only和NAT网络模式的区别和用法
VMWare提供了三种工作模式,它们是bridged(bridged 模式).NAT( 网络地址转换模式)和host-only(主机模式) . 1 VMWare虚拟机bridged.host-onl ...
- 从CK+库提取标记点信息
1.CK+动态表情库介绍 The Extended Cohn-Kanade Dataset(CK+) 下载地址 这个数据库是在 Cohn-Kanade Dataset 的基础上扩展来的,发布于2010 ...
- intel Xeon(R) CPU E5-2650 v2 性能测试报告
intel Xeon(R) CPU E5-2650 v2 ...