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.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自 ...
随机推荐
- w3school之CSS学习笔记
由于web自动化测试中,会用到比较复杂的定位方式:CSS定位,这种定位方式比较简洁,定位速度较快,所以继续学习前端的CSS知识,总结下学习笔记,以便后续查看.同时,也希望能帮助到大家. 学习网址:ht ...
- Sping--AOP--XML
IoC: annotation AOP: XML XML比annotation用的多. beans.xml: <?xml version="1.0" encoding=&qu ...
- Linux磁盘配额实验
1.实现磁盘限额的条件 *需要Linux内核支持 *安装quota软件包2.Linux磁盘限额的特点 作用范围:针对指定 文件系统(分区) 限制对象:普通用户帐号.组帐号 限制类型:磁盘容量(默认单位 ...
- PHP 多线程、多进程
多线程:PHP其实并不支持多线程,只是通过一些扩展或者socket方式伪装成多线程,实质不是的.在PHP 5.3 以上版本,使用 pthreads PHP扩展,可以使PHP真正地支持多线程:或者使用 ...
- PHP 安装 redis、memcached、openssl、pdo_mysql等
PHP openssl 扩展的安装 这些插件可以通过在 php.ini 中添加 extension 的方式来加载所需要的插件,其实在 php 的安装包里就已经有相关的插件代码包了,在 php7 ...
- [转载]七天学会NodeJS
链接:http://nqdeng.github.io/7-days-nodejs/ NodeJS基础 什么是NodeJS JS是脚本语言,脚本语言都需要一个解析器才能运行.对于写在HTML页面里的JS ...
- Sping--集合注入
UserDAOImpl.java: package com.bjsxt.dao.impl; import java.util.List; import java.util.Map; import ja ...
- php上传zip文件在线解压文件在指定目录下，CI框架版本
我从网上找的文件php在线解压zip压缩文件 文件为jy.php可以直接执行,但是怎样将其加到CI框架中呢?? jy.php文件 <?php header("content-Type: ...
- 一次性能优化，tps从400+到4k+
项目介绍 路由网关项目watchman ,接收前端http请求转发到后端业务系统,功能安全验证,限流,转发. 使用技术:spring boot+ nreflix zuul,最开始日志使用slf4j+l ...
- Keil C 里面Lib库文件的生成与调用
源:Keil C 里面Lib库文件的生成与调用