Jqtreetable 原理
将数据按照规则(#)从数据库查询出来,然后绑定到数据控件就行了。
数据规则:如果树显示如下
-1
-1.1
-1.2
-1.10
-2
-2.1
-10
-10.1
那么绑定到控件的数据源也必须如此,但实际情况,我们数据库这些节点的顺序是打乱的。
这点跟mztreeview 有很大的区别,所以我们要做的就是找到根节点,判断是否有子节点,
如果有子节点,将子节点排序,用递归构造一个新的数据源。
性能担忧啊,所以Jqtreetable 只适合静态绑定一些数据,动态从数据库行不通。
官方http://www.hanpau.com/index.php?page=jqtreetable
Mztreeview 1.2 也能实现类似的 Jqtreetable 类似的效果,但是表格的第二列只能是树的ID
如何扩展 参考:
MzTreeView + CheckBox 复选框 + 自定义表格 演示 (MzTreeView v1.2 www.lxasp.com 修改版)
http://www.lxasp.com/_tmp/jstree/checktab.html
HTML 代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>树-Table </title>
<script language="javaScript" src="js/jquery-1.2.6.min.js"></script>
<script language="javaScript" src="js/jqtreetable.js"></script>
<link rel="Stylesheet" href="css/jqtreetable.css" type="text/css" />
<script type="text/javascript">
$(function(){//Initialise the treetable
var map1=[0, 0, 2, 3, 4, 4, 6, 4, 2, 9, 10, 0, 0, 13, 0, 0, 0, 17, 17, 0],
var options1 = {openImg: "../images/tv-collapsable.gif", shutImg: "../images/tv-expandable.gif", leafImg: "../images/tv-item.gif", lastOpenImg: "../images/tv-collapsable-last.gif", lastShutImg: "../images/tv-expandable-last.gif", lastLeafImg: "../images/tv-item-last.gif", vertLineImg: "../images/vertline.gif", blankImg: "../images/blank.gif", collapse: false, column: 1, striped: true, highlight: true, state:true};
$("#treet1").jqTreeTable(map1, options1);
});
</script>
</head>
<body>
<table class="tablemain"><thead><tr><th>Row No</th><th>Description</th><th>Path to Row</th><th>Level</th><th>Status</th></tr></thead>
<tbody id="treet1">
<tr><td>1</td><td>Child of 0</td><td>[0, 1]</td><td>1</td><td></td></tr>
<tr><td>2</td><td>Child of 0</td><td>[0, 2] </td><td>1</td><td></td></tr>
<tr><td>3</td><td>Child of 2</td><td>[0, 2, 3] </td><td>2</td><td></td></tr>
<tr><td>4</td><td>Child of 3</td><td>[0, 2, 3, 4] </td><td>3</td><td></td></tr>
<tr><td>5</td><td>Child of 4</td><td>[0, 2, 3, 4, 5] </td><td>4</td><td></td></tr>
<tr><td>6</td><td>Child of 4</td><td>[0, 2, 3, 4, 6] </td><td>4</td><td></td></tr>
<tr><td>7</td><td>Child of 6</td><td>[0, 2, 3, 4, 6, 7] </td><td>5</td><td></td></tr>
<tr><td>8</td><td>Child of 4</td><td>[0, 2, 3, 4, 8] </td><td>4</td><td></td></tr>
<tr><td>9</td><td>Child of 2</td><td>[0, 2, 9] </td><td>2</td><td></td></tr>
<tr><td>10</td><td>Child of 9</td><td>[0, 2, 9, 10] </td><td>3</td><td></td></tr>
<tr><td>11</td><td>Child of 10</td><td>[0, 2, 9, 10, 11] </td><td>4</td><td></td></tr>
<tr><td>12</td><td>Child of 0</td><td>[0, 12] </td><td>1</td><td></td></tr>
<tr><td>13</td><td>Child of 0</td><td>[0, 13] </td><td>1</td><td></td></tr>
<tr><td>14</td><td>Child of 13</td><td>[0, 13, 14] </td><td>2</td><td></td></tr>
<tr><td>15</td><td>Child of 0</td><td>[0, 15] </td><td>1</td><td></td></tr>
<tr><td>16</td><td>Child of 0</td><td>[0, 16] </td><td>1</td><td></td></tr>
<tr><td>17</td><td>Child of 0</td><td>[0, 17] </td><td>1</td><td></td></tr>
<tr><td>18</td><td>Child of 17</td><td>[0, 17, 18] </td><td>2</td><td></td></tr>
<tr><td>19</td><td>Child of 17</td><td>[0, 17, 19] </td><td>2</td><td></td></tr>
<tr><td>20</td><td>Child of 0</td><td>[0, 20] </td><td>1</td><td></td></tr>
</tbody></table>
</body>
</html>
后续工作 ,动态绑定
前台
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>官方:http://www.hanpau.com/index.php?page=jqtreetable</title>
<script language="javaScript" src="js/jquery-1.2.6.min.js"></script>
<script language="javaScript" src="js/jqtreetable.js"></script>
<link rel="Stylesheet" href="css/jqtreetable.css" type="text/css" />
<script type="text/javascript">
$(function(){//Initialise the treetable
map2=<%=strmap%>;
var options1 = {openImg: "images/treetable/tv-collapsable.gif", shutImg: "images/treetable/tv-expandable.gif", leafImg: "images/treetable/tv-item.gif", lastOpenImg: "images/treetable/tv-collapsable-last.gif", lastShutImg: "images/treetable/tv-expandable-last.gif", lastLeafImg: "images/treetable/tv-item-last.gif", vertLineImg: "images/treetable/vertline.gif", blankImg: "images/treetable/blank.gif", collapse: true, column: 0, striped: false, highlight: false, state:false};
$("#treet2").jqTreeTable(map2, options1);
});
</script>
</head>
<body>
<table class="tablemain2">
<asp:Repeater runat="server" ID="repdanger">
<HeaderTemplate><thead><tr><th>编号</th><th>危险点</th><th>措施</th><tbody id="treet2"></HeaderTemplate>
<ItemTemplate><tr><td><%#Eval("dan_id")%></td>
<td><%#Eval("dan_text")%></td>
<td><%#Eval("dan_step")%> </td>
<td></td>
</tr></ItemTemplate>
<FooterTemplate></tbody></FooterTemplate>
</asp:Repeater>
</table>
</html>
后台
namespace SafeRiskPrj.WEB
{
public partial class test : System.Web.UI.Page
{
protected string strmap = "";
protected int count = 0;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
Binddanger();
}
}
/// <summary>
/// 绑定treetable -商业解决方案
///
/// dtnew.Rows.Add 花费 94 毫秒
/// dtnew.ImportRow 花费 125 毫秒
/// </summary>
public void Binddanger()
{
Danger ddao = new Danger();
DataTable dt = ddao.getyxdanger().Tables[0];
DataTable dtnew = dt.Clone(); //如果ImportRow,2个表的结构必须一致,所以 Clone();
DataRow[] rowlist = dt.Select("dan_fatid='0'");
strmap = "[0,";
for (int i = 0; i < rowlist.Length; i++)
{
//dtnew.ImportRow((DataRow)rowlist[i]);
dtnew.Rows.Add(rowlist[i].ItemArray);
addrow(dtnew,dt, (DataRow)rowlist[i]);
}
//计算map ,第一行排除
for (int j = 1; j < dtnew.Rows.Count; j++)
{
int i = dtnew.Rows.IndexOf(dtnew.Select("dan_id='" + dtnew.Rows[j]["dan_fatid"].ToString() + "'")[0]);
strmap += i + 1 + ",";
}
strmap = strmap.Remove(strmap.LastIndexOf(','));
strmap = strmap + "]";
repdanger.DataSource = dtnew;
repdanger.DataBind();
}
public void addrow(DataTable dtnew,DataTable dt, DataRow dr)
{
DataRow[] rowlist = dt.Select("dan_fatid='" + dr["dan_id"].ToString()+"'");
for (int i = 0; i < rowlist.Length; i++)
{
//dtnew.ImportRow((DataRow)rowlist[i]);
dtnew.Rows.Add(rowlist[i].ItemArray);
addrow(dtnew,dt, (DataRow)rowlist[i]);
}
}
}
}
由于Jqtreetable 是先生成数据,然后给数据加样式,测试500条数据,超级慢,所以Jqtreetable 只适用于少于100条数据。