先放個最終的效果圖：
然后是代碼：
html文件：
<body><h1>TreeGrid</h1><div><a id="consle" href="#">consle</a></div><table id="test" title="Folder Browser" style="width:400px;height:300px" > </table> </body>
說明：沒什么內容，標題，然后是一個表格，我為了做些測試放了個按鈕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!"><title>jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" ><link rel="stylesheet" type="text/css" ><script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script><script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="ws.js"></script>
接著是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方式。
本文非原創摘自：http://blog.sina.com.cn/s/blog_4782108f0101eul4.html
新聞熱點
疑難解答
