您的位置：首页 > Web前端 > JQuery

jquery树形表格实现方法

2014-10-09 16:26 417 查看

效果图

准备步骤:

具体使用的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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航