Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法


Posted in Javascript onApril 29, 2016

先放个最终的效果图:

Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法

然后是代码:

html文件:

<body>
<h1>TreeGrid</h1>
<div>
<a id="consle" href="#">consle</a>
</div>
<table id="test" title="Folder Browser" style="width:400px;height:300px" > 
</table> 
</body>

说明:没什么内容,标题,然后是一个表格,我为了做些测试放了个按钮consle,不用删掉即可,当然要引用几个js文件和css文件:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="ws.js"></script>

接着是js文件:

$(function(){
$('#test').treegrid({ 
url:"data/treegrid_data.json", 
idField:'id', 
treeField:'name', 
animate:"true",
rownumbers:"true",
columns:[[ 
{title:'Task Name',field:'name',formatter:function(value,rowData,rowIndex){
return " " + rowData.name;
},width:180}, 
{field:'size',title:'Persons',width:60,align:'right'}, 
{field:'date',title:'Begin Date',width:80}
]] 
});
$("#consle").bind("click",consleclick)
});
function set_power_status(){ 
var idList = ""; 
$("input:checked").each(function(){
var id = $(this).attr("id");
if(id.indexOf("ceshi_")>-1)
idList += id.replace("ceshi_",'')+',';
})
alert(idList);
}
function consleclick(){
var node = $('#test').treegrid('expandAll',2);
}

说明:调用了easyUI的treegrid,为了显示checkbox,对第一列做了个formatter,为了展示效果绑定了取得选中checkbox的事件,不用可以去掉,也可以去掉alert,更改为其他的事件处理函数。

最后附上数据json文件:

[{
"id":1,
"name":"C",
"size":"",
"date":"02/19/2010",
"children":[{
"id":2,
"name":"Program Files",
"size":"120 MB",
"date":"03/20/2010",
"children":[{
"id":21,
"name":"Java",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":211,
"name":"java.exe",
"size":"142 KB",
"date":"01/13/2010"
},{
"id":212,
"name":"jawt.dll",
"size":"5 KB",
"date":"01/13/2010"
}]
},{
"id":22,
"name":"MySQL",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":221,
"name":"my.ini",
"size":"10 KB",
"date":"02/26/2009"
},{
"id":222,
"name":"my-huge.ini",
"size":"5 KB",
"date":"02/26/2009"
},{
"id":223,
"name":"my-large.ini",
"size":"5 KB",
"date":"02/26/2009"
}]
}]
},{
"id":3,
"name":"eclipse",
"size":"",
"date":"01/20/2010",
"children":[{
"id":31,
"name":"eclipse.exe",
"size":"56 KB",
"date":"05/19/2009"
},{
"id":32,
"name":"eclipse.ini",
"size":"1 KB",
"date":"04/20/2010"
},{
"id":33,
"name":"notice.html",
"size":"7 KB",
"date":"03/17/2005"
}]
}]
}]

说明:

这个json直接从官网down的,随处可见,也可改为url方式。

本文非原创摘自:http://blog.sina.com.cn/s/blog_4782108f0101eul4.html

Javascript 相关文章推荐
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
百度地图自定义控件分享
Mar 04 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
angular分页指令操作
Jan 09 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 #Javascript
Treegrid的动态加载实例代码
Apr 29 #Javascript
Easyui 之 Treegrid 笔记
Apr 29 #Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 #Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 #Javascript
JavaScript函数柯里化详解
Apr 29 #Javascript
easyui validatebox验证
Apr 29 #Javascript
You might like
PHP实现微信对账单处理
2018/10/01 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
JS实现随机点名器
2020/04/12 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
Python unittest模块用法实例分析
2018/05/25 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
python中正则表达式与模式匹配
2019/05/07 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
python计算无向图节点度的实例代码
2019/11/22 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
团日活动总结报告
2014/06/25 职场文书
班主任工作实习计划
2015/01/16 职场文书