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 相关文章推荐
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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解析xml方法实例详解
2015/05/12 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
JS 自动安装exe程序
2008/11/30 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
python关闭windows进程的方法
2015/04/18 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
最新党员思想汇报
2014/01/01 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
gojs实现蚂蚁线动画效果
2022/02/18 Javascript