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.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自 ...
随机推荐
- [转]Axis2创建WebService实例
以下文章来自http://clq9761.iteye.com/blog/976029,作者clq9761 一.Axis2的下载和安装 1.可从http://ws.apache.org/axis2/ 下 ...
- 注解用法详解——@SuppressWarnings
一.前言 编码时我们总会发现如下变量未被使用的警告提示: 上述代码编译通过且可以运行,但每行前面的“感叹号”就严重阻碍了我们判断该行是否设置的断点了.这时我们可以在方法前添加 @SuppressWar ...
- SpringMVC 接收表单数据的方式 - Samuel - 博客频道 - CSDN.NET
1.@RequestParam @RequestMapping(value = "/xxxx.do") public void create(@RequestParam(value ...
- openstack controller ha测试环境搭建记录（七）——配置glance
在所有集群安装glance软件:yum install -y openstack-glance python-glanceclient 在任一节点创建glance用户:mysql -u root -p ...
- CABasicAnimation 基本动画
几个可以用来实现热门APP应用PATH中menu效果的几个方法 +(CABasicAnimation *)opacityForever_Animation:(float)time //永久闪烁的动画 ...
- STM8S STM8L引脚如何配置最低（转）
源:STM8S STM8L引脚如何配置功耗最低 STM8S无任何外围电路 单片机CAP接104电容 复位接上拉电阻,其它引脚全部悬空,利用以下程序测试电流如下:(以前也用STM8L做过类似实验,情况也 ...
- IFrame跨域访问自定义高度
由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...
- Android L（5.0）源码之图形与图像处理之图形特效——Matrix
最近在研究android 5.0的gallery模块,学习了相关的知识点,准备写点博客总结一下,有时间了会补充完整
- $smary模板缓存
<?php //引入配置文件 $fillname="../cache/testhuancun.html"; //设置一个缓存时间 $time=; //判断如果缓存文件不存在的 ...
- UVa 10523 - Very Easy !!!
题目大意:给你一个公式,直接按照式子计算就可以了,要用到大数. import java.io.*; import java.util.*; import java.math.*; class Main ...