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 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
使用JS实现简易计算器
Jun 14 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读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
python查询mysql中文乱码问题
2014/11/09 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
python绘制随机网络图形示例
2019/11/21 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
小学教师听课制度
2014/02/01 职场文书
马智宇结婚主持词
2014/04/01 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
专家推荐信怎么写
2015/03/25 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS