JqueryEasyUI如何实现treegrid上显示checkbox并取选定值

这篇文章主要介绍“Jquery EasyUI如何实现treegrid上显示checkbox并取选定值”，在日常操作中，相信很多人在Jquery EasyUI如何实现treegrid上显示checkbox并取选定值问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Jquery EasyUI如何实现treegrid上显示checkbox并取选定值”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了宜阳免费建站欢迎大家使用！

先放个最终的效果图：

然后是代码：

html文件：

TreeGrid

consle

 
 

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

接着是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方式。

到此，关于“Jquery EasyUI如何实现treegrid上显示checkbox并取选定值”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

网站题目：JqueryEasyUI如何实现treegrid上显示checkbox并取选定值
文章URL：http://shouzuofang.com/article/pdgjoj.html