Jqtreetable 入门

最新推荐文章于 2023-07-31 17:41:53 发布

weixin_30929011

最新推荐文章于 2023-07-31 17:41:53 发布

阅读量230

点赞数

原文链接：http://www.cnblogs.com/qinhaijun/archive/2011/08/26/2154356.html

版权

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条数据。

转载于:https://www.cnblogs.com/qinhaijun/archive/2011/08/26/2154356.html

weixin_30929011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jqtreetable 入门

Jqtreetable 原理将数据按照规则（#）从数据库查询出来，然后绑定到数据控件就行了。数据规则：如果树显示如下 -1 -1.1 -1.2 -1.10-2 -2.1-10 -10.1那么绑定到控件的数据源也必须如此，但实际情况，我们数据库这些节点的顺序是打乱的。这点跟mztreeview 有很大的区别，...
复制链接

扫一扫