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

先放个最终的效果图:

然后是代码

html文件

rush:js;">

TreeGrid

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

rush:js;"> <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!"> jQuery EasyUI Demo

接着是js文件

-1) idList += id.replace("ceshi_",'')+','; }) alert(idList); } function consleclick(){ var node = $('#test').treegrid('expandAll',2); }

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

最后附上数据json文件

rush:js;"> [{ "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","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","children":[{ "id":221,"name":"my.ini","size":"10 KB","date":"02/26/2009" },{ "id":222,"name":"my-huge.ini",{ "id":223,"name":"my-large.ini","date":"02/26/2009" }] }] },{ "id":3,"name":"eclipse","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

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印 &lt;script src=&quot;../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...