效果圖
准備步驟:
具體使用的Dome可以在這個位置下載
http://download.csdn.net/detail/jine515073/7986227
1.引入jquery.treeTable.js和jquery.treeTable.css
前台代碼如下:
<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="/resources/js/treeTable/vsStyle/jquery.treeTable.css" rel="stylesheet" type="text/css" /> <style type="text/css"> table, td, th { border: 1px solid #8DB9DB; padding: 5px; border-collapse: collapse; font-size: 16px; } </style> <script src="/resources/js/jquery-1.7.2.min.js" type="text/javascript"> </script> <script src="/resources/js/treeTable/jquery.treeTable.js" type="text/javascript"> </script> <script type="text/javascript"> $(function () { var option = { theme: 'vsStyle', expandLevel: 2, beforeExpand: function ($treeTable, id) { //判斷id是否已經有了孩子節點，如果有了就不再加載，這樣就可以起到緩存的作用 if ($('.' + id, $treeTable).length) { return; } //這里的html可以是ajax請求 //var html = '<tr id="8" pId="6"><td>員工伙食費</td><td>5000</td><td>1000</td></tr>' $treeTable.addChilds(html); }, onSelect: function ($treeTable, id) { window.console && console.log('onSelect:' + id); } }; $('#treeTable1').treeTable(option); }); </script> </head> <body> <form id="form1" runat="server"> <div> <table id="treeTable1" style="width: 100%"> <asp:Repeater ID="Repeater1" runat="server" > <HeaderTemplate> <tr> <td style="width: 200px;">收支項目</td> </tr> </HeaderTemplate> <ItemTemplate> <tr id="<%#Eval("pid") %>" pid="<%#Eval("fatherid") %>"> <td><%#Eval("Categories") %></td> </tr> </ItemTemplate> </asp:Repeater> </table> </div> </form> </body> </html>
后台代碼:
DataTable dt = new DataTable(); dt.Columns.Add("pid"); dt.Columns.Add("fatherid"); dt.Columns.Add("Categories"); dt.Columns.Add("Month"); dt.Columns.Add("Year"); this.Repeater1.DataSource = dt; this.Repeater1.DataBind();
細心的朋友會發現,多級數據,在數據庫是沒有按照上下級排序好的,但是這個控件需要按照上下級排序正確后,才能正常顯示,所以要補充一個數據庫排序的代碼
with cte(SortID,CategoryID,CategoryName,ParentID) as ( select cast(row_number() over(order by CategoryID) as varchar(10)) SortID,CategoryID,CategoryName,ParentID from Category where ParentID=0 and CompanyID=@CompanyID AND Type=4 union all select cast(SortID+cast(row_number() over(order by a.CategoryID)as varchar(10)) as varchar(10)),a.CategoryID,a.CategoryName,a.ParentID from Category a join cte on cte.CategoryID=a.ParentID )
select CategoryID,CategoryName,ParentID from cte order by SortID