jsp界面，也可用在aspx、html等前台界面中：
1 <script type="text/javascript"> 2 function show(checkid){ 3 var s = '#check_'+checkid; 4 //alert( $(s).attr("id")); 5 // alert($(s)[0].checked); 6 /*选子节点*/ 7 var nodes = $("#test").treegrid("getChildren",checkid); 8 for(i=0;i<nodes.length;i++){ 9 $(('#check_'+nodes[i].id))[0].checked = $(s)[0].checked; 10 11 } 12 //选上级节点 可根据自己所定义的字段进行逻辑判断，该代码仅供参考 13 if(!$(s)[0].checked){ 14 var parent = $("#test").treegrid("getParent",checkid); 15 $(('#check_'+parent.id))[0].checked = false; 16 while(parent){ 17 parent = $("#test").treegrid("getParent",parent.id); 18 $(('#check_'+parent.id))[0].checked = false; 19 } 20 }else{ 21 var parent = $("#test").treegrid("getParent",checkid); 22 var flag= true; 23 var sons = parent.sondata.split(','); 24 for(j=0;j<sons.length;j++){ 25 if(!$(('#check_'+sons[j]))[0].checked){ 26 flag = false; 27 break; 28 } 29 } 30 if(flag) 31 $(('#check_'+parent.id))[0].checked = true; 32 while(flag){ 33 parent = $("#test").treegrid("getParent",parent.id); 34 if(parent){ 35 sons = parent.sondata.split(','); 36 for(j=0;j<sons.length;j++){ 37 if(!$(('#check_'+sons[j]))[0].checked){ 38 flag = false; 39 break; 40 } 41 } 42 } 43 if(flag) 44 $(('#check_'+parent.id))[0].checked = true; 45 } 46 } 47 } 48 49 function formatcheckbox(val,row){ 50 51 return "<input type='checkbox' onclick=show('"+row.id+"') 52 id='check_"+row.id+"' "+(row.checked?'checked':'')+"/>" + row.name; 53 } 54 function init(){ 55 //去掉结点前面的文件及文件夹小图标 56 $(".tree-icon,.tree-file").removeClass("tree-icon tree-file"); 57 $(".tree-icon,.tree-folder").removeClass("tree-icon tree-folder tree-folder-open tree-folder-closed"); 58 } 59 60 //获取选中的结点 61 function getSelected(){ 62 var idList = ""; 63 $("input:checked").each(function(){ 64 var id = $(this).attr("id"); 65 66 if(id.indexOf('check_type')== -1 && id.indexOf("check_")>-1) 67 idList += id.replace("check_",'')+','; 68 69 }) 70 alert(idList); 71 } 72 73 74 </script> 75 </head> 76 77 <body onload="init()"> 78 <input type="button" value="showselectNode" onclick="getSelected();"> 79 <table id="test" title="Folder Browser" class="easyui-treegrid" style="400px;height:300px" 80 url="treegrid_data.json" 81 rownumbers="true" 82 idField="id" treeField="name"> 83 <thead> 84 <tr> 85 <th field="name" width="160" formatter="formatcheckbox">Name</th> 86 <th field="size" width="60" align="right">Size</th> 87 <th field="date" width="100">Modified Date</th> 88 </tr> 89 </thead> 90 </table> 91 </body> 92 </html>
treegrid_data.json代码，仅供参考，可由后端将值以json的方式传递给给前端：
1 [{ 2 "id":"type_1", 3 "name":"C", 4 "size":"", 5 "date":"02/19/2010", 6 "sondata":"type_2,type_3", 7 "children":[{ 8 "id":"type_2", 9 "name":"Program Files", 10 "size":"120 MB", 11 "date":"03/20/2010", 12 "checked":true, 13 "sondata":"21,22", 14 "children":[{ 15 "id":21, 16 "name":"Java", 17 "size":"", 18 "date":"01/13/2010", 19 "state":"closed", 20 "sondata":"211,212", 21 "children":[{ 22 "id":211, 23 "name":"java.exe", 24 "size":"142 KB", 25 "date":"01/13/2010", 26 "sondata":"" 27 },{ 28 "id":212, 29 "name":"jawt.dll", 30 "size":"5 KB", 31 "date":"01/13/2010", 32 "sondata":"" 33 }] 34 },{ 35 "id":22, 36 "name":"MySQL", 37 "size":"", 38 "date":"01/13/2010", 39 "state":"closed", 40 "sondata":"221,222,223", 41 "children":[{ 42 "id":221, 43 "name":"my.ini", 44 "size":"10 KB", 45 "date":"02/26/2009", 46 "sondata":"" 47 },{ 48 "id":222, 49 "name":"my-huge.ini", 50 "size":"5 KB", 51 "date":"02/26/2009", 52 "sondata":"" 53 },{ 54 "id":223, 55 "name":"my-large.ini", 56 "size":"5 KB", 57 "date":"02/26/2009", 58 "sondata":"" 59 }] 60 }] 61 },{ 62 "id":"type_3", 63 "name":"eclipse", 64 "size":"", 65 "date":"01/20/2010", 66 "sondata":"31,32,33", 67 "children":[{ 68 "id":31, 69 "name":"eclipse.exe", 70 "size":"56 KB", 71 "date":"05/19/2009", 72 "sondata":"" 73 },{ 74 "id":32, 75 "name":"eclipse.ini", 76 "size":"1 KB", 77 "date":"04/20/2010", 78 "sondata":"" 79 },{ 80 "id":33, 81 "name":"notice.html", 82 "size":"7 KB", 83 "date":"03/17/2005", 84 "sondata":"" 85 }] 86 }] 87 }]