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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 Javascript
5个实用的JavaScript新特性
Jun 16 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
大师制作的中短波矿石收音机
2020/04/02 无线电
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
Python实现二分查找算法实例
2015/05/26 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
采购主管的岗位职责
2013/12/17 职场文书
辩论赛主持词
2014/03/18 职场文书
入党推优材料
2014/06/02 职场文书
体育比赛口号
2014/06/09 职场文书
写字楼租赁意向书
2014/07/30 职场文书
好的促销活动方案
2014/08/21 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
简历中自我评价范文
2015/03/11 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
人民币使用说明书
2019/04/17 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python