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刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
php发送post请求函数分享
2014/03/06 PHP
PHP小教程之实现链表
2014/06/09 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
javascript 写类方式之九
2009/07/05 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
Python深入学习之上下文管理器
2014/08/31 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
Python 支付整合开发包的实现
2019/01/23 Python
python支付宝支付示例详解
2019/08/22 Python
对python中的装包与解包实例详解
2019/08/24 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
python调用接口的4种方式代码实例
2019/11/19 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
jupyter notebook 多行输出实例
2020/04/09 Python
Python如何实现的二分查找算法
2020/05/27 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
怎样做好公众演讲能力?
2019/08/28 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
MySQL七大JOIN的具体使用
2022/02/28 MySQL