Jquery易用户界面实现树形网格上显示检验盒并取选定值的方法

先放个最终的效果图：

然后是代码：

超文本标记语言文件：

正文h1树网格/h1 diva id=' consle ' href=' # ' consle/a/div表id=' test ' title=' Folder Browser ' style=' width :400 px；高度：300像素/表/体说明：没什么内容，标题，然后是一个表格，我为了做些测试放了个按钮康塞尔，不用删掉即可，当然要引用几个射流研究…文件和钢性铸铁文件：

meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 ' meta name=' keywords ' content=' jquery，ui，easy，easyui，web ' meta name=' description ' content=' easy ui帮助您轻松构建网页！' title jquery Easyui Demo/title link rel='样式表type=' text/CSS ' href=' http://www .珍妮丝。com/EasyUI/themes/default/EasyUI。CSS ' link rel='样式表type=' text/CSS ' href=' http://www .珍妮丝。com/EasyUI/themes/icon。CSS '脚本类型=' text/JavaScript ' src=' http 3360http://代码。jquery。com/接着是射流研究…文件：

$(function(){$('#test ')).树网格({ URL : '数据/树网格_数据。JSON '、idField:'id '、treeField:'name '、animate:'true '、rownumbers: ' true '、第3360列[[{ title : ' Task Name '、Field:'name '、formatter:function(value，rowData，row index){ return ' ' row data。名称；},宽度：180}，{field:'size '，title:'Persons '，width:60，align:'right'}，{field:'date '，title:'Begin Date '，width :80 }]})；$(“# console”).bind('click '，consleclick)})；函数set _ power _ status(){ var idList=' '；$(“输入3360已检查”).每个（函数(){var id=$(this)).attr(' id ')；if(id.indexOf('史策_')-1)idList=id.replace('史策_ ','') ',';})警报(IdList)；}函数consleclick(){ var node=$(' # test ').treegrid('expandAll '，2)；}说明：调用了程序的树网格，为了显示复选框，对第一列做了个格式化程序，为了展示效果绑定了取得选中检验盒的事件，不用可以去掉，也可以去掉警惕，更改为其他的事件处理函数。

最后附上数据数据文件：

[{'id':1，' name':'C '，' size': ' '，' date':'02/19/2010 '，' children':[{'id':2，' name':'Program Files '，' size':'120 MB '，' date':'03/20/2010 '，' children ' :[{ ' id ' 3360说明：

这个数据直接从官网向下的，随处可见，也可改为全球资源定位器(统一资源定位符)方式。

本文非原创摘自：http://博客。新浪。com。cn/s/blog _ 4782108 f 0101 e ul4。超文本标记语言