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

前端之家收集整理的这篇文章主要介绍了Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先放个最终的效果图:

然后是代码

html文件

TreeGrid

说明:没什么内容标题,然后是一个表格,我为了做些测试放了个按钮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!"> 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文件

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

原文链接:https://www.f2er.com/jquery/49078.html

猜你在找的jQuery相关文章