jQTreeTable在Asp.net中的应用

最新推荐文章于 2024-09-09 11:27:55 发布

weixin_30333885

最新推荐文章于 2024-09-09 11:27:55 发布

阅读量79

点赞数

文章标签： ui javascript php ViewUI

原文链接：http://www.cnblogs.com/yknb/archive/2008/09/14/1290684.html

版权

树形结构是我们在写程序中会常用到的一种方法。如：部门组织结构、新闻产品类别结构等等。JQuery中有一个不错的组件，叫JQTreeTable，能简单直观的在Table中显示树形结构，如下图所示：

通过JQTreeTable与Asp.net的配合，我们可以把这种效果应用到自己的系统中。

一、先来看一下一个栏目的数据表的设计：

数据表结构：

Code

CREATE TABLE [dbo].[Catalog](

[Id] [int] IDENTITY(1,1) NOT NULL, --序号

[Name] [varchar](255) COLLATE Chinese_PRC_CI_AS NOT NULL, --名称

[DisplayName] [varchar](255) COLLATE Chinese_PRC_CI_AS NOT NULL, --显示名称/路径

[ImageUrl] [varchar](255) COLLATE Chinese_PRC_CI_AS NULL, --图片

[Comment] [varchar](255) COLLATE Chinese_PRC_CI_AS NULL, --备注

[NodeCode] [varchar](255) COLLATE Chinese_PRC_CI_AS NOT NULL, --节点编码

[ParentCode] [varchar](255) COLLATE Chinese_PRC_CI_AS NOT NULL, --上级节点编码

[Url] [varchar](255) COLLATE Chinese_PRC_CI_AS NULL, --链接

[IsLeaf] [bit] NOT NULL CONSTRAINT [DF_NewsCatalog_IsLeaf] DEFAULT (1),--是否叶子节点

[OrderId] [int] NOT NULL CONSTRAINT [DF_Catalog_OrderId] DEFAULT (0) --排序

)

数据示例：

二、再来看一下页面的代码：

Code

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Collections.Generic;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using NHibernate.Expression;

using YKSoft.CMS.Entity;

namespace WebSite.Admin

{

public partial class CatalogList : BasePage

{

//JQTreeTable要的参数

protected string strMap = "";

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

BindDataList();

}

private void BindDataList()

{

//根据OrderId,NodeCode asc 排序获得的数据记录集

IList<Catalog> catalogs = Catalog.FindAllOrderByOrderId();

IList<Catalog> items = new List<Catalog>();

//对原有的数据进行重新排序

foreach (Catalog item in catalogs)

{

if (String.IsNullOrEmpty(item.ParentCode))

{

//添加到排序后的数据集中

items.Add(item);

//生成JQTreeTable要的参数格式

if (strMap == "")

strMap = "0";

else strMap += ",0";

//如果不是叶子节点，对子节点进行排序

if (item.IsLeaf == false)

{

ResetItems(catalogs, items, item.NodeCode);

}

rptList.DataSource = items;

rptList.DataBind();

}

/**//// <summary>

/// 递归排序

/// </summary>

/// <param name="oItems">原数据集</param>

/// <param name="nItems">排序后的数据集</param>

/// <param name="parentCode">上级编码</param>

private void ResetItems(IList<Catalog> oItems, IList<Catalog> nItems, string parentCode)

{

//保存当前排序后的数据集的记录数

int CurrentNum = nItems.Count;

foreach (Catalog item in oItems)

{

if (item.ParentCode == parentCode)

{

//生成JQTreeTable要的参数格式

if (strMap == "")

strMap = "0";

else strMap += "," + CurrentNum.ToString();

//添加到排序后的数据集中

nItems.Add(item);

//如果不是叶子节点，对子节点进行排序

if (item.IsLeaf == false)

{

ResetItems(oItems, nItems, item.NodeCode);

}

protected void lbtnAdd_Click(object sender, EventArgs e)

{

Response.Redirect("CatalogAddEdit.aspx", true);

}

protected bool GetVisible(object url)

{

if (String.IsNullOrEmpty(url.ToString()))

return false;

else return true;

}

//删除记录

protected void rptList_ItemCommand(object source, RepeaterCommandEventArgs e)

{

try

{

if (e.CommandName.ToLower() == "delete")

{

int Id = Convert.ToInt32(e.CommandArgument.ToString());

Catalog.DeleteAll(new int[]

{ Id });

Response.Redirect("CatalogList.aspx", true);

}

catch

{

JsAlert("数据删除出错！");

}

protected void rptList_ItemDataBound(object sender, RepeaterItemEventArgs e)

{

try

{

Catalog item =(Catalog)e.Item.DataItem;

LinkButton lbtn =(LinkButton) e.Item.FindControl("lbtnDel");

if (item == null || lbtn == null)

return;

if (item.IsLeaf)

{

lbtn.OnClientClick = "return confirm('确定要删除该记录吗？');";

}

else

{

lbtn.Enabled = false;

lbtn.OnClientClick = "alert('该栏目存在子栏目，不能删除!');return false;";

}

catch

{

}

Code

@ Page Language="C#" AutoEventWireup="true" Codebehind="CatalogList.aspx.cs" Inherits="WebSite.Admin.CatalogList" %>

@ Register Assembly="YKSoft.Web.UI.WebControls" Namespace="YKSoft.Web.UI.WebControls.EasyPager"

TagPrefix="cc2" %>

@ Register Assembly="YKSoft.Web.UI.WebControls" Namespace="YKSoft.Web.UI.WebControls.SmartGridView"

TagPrefix="cc1" %>

* {

}{ font-family: 宋体,Arial, Verdana; }

h1 {

}{ text-align: center; }

p {

}{ font-size: 10pt; }

.collapsed {

}{

DISPLAY: none

}

#tablemain {

}{

cellspacing:0px;

cellpadding:0px;

rules:all;

border:0px;

color:#333333;

border-style:Solid;

width:100%;

border-collapse:collapse;

}

#treetable TD {

}{

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; FONT: 9pt 宋体; CURSOR: pointer; PADDING-TOP: 0px

}

.ttimage {

}{

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: bottom; WIDTH: 16px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 22px; BORDER-BOTTOM-STYLE: none

}

.parimg {

}{

}

.preimg {

}{

}

.parimg {

}{

CURSOR: pointer

}

.even {

}{

}

.over {

}{

BACKGROUND-COLOR: #dfe7ed

}

.selected {

}{

}

</style>

$(function()

{

var ei = $("#large");

ei.hide();

$(".CatalogImg").mousemove(function(e)

{

ei.css(

{top:e.pageY,left:e.pageX}).html('<img style="border:0px solid gray;" src="' + this.src + '" />').show();

}).mouseout( function()

{

ei.hide();

})

});

</script>

</head>

<body>

$(function()

{

//声明数组

var map = [<%=strMap %>];

//声明参数选项

var options =

{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: false, column: 0, striped: false, highlight: true, onselect: function(target)

{}};

if(map!=null&&map.length>0)

{

//根据参数显示树

$("#treetable").jqTreeTable(map, options);

}

});

</script>

<div>

<tr>

</td>

<asp:LinkButton ID="lbtnAdd" runat="server" OnClick="lbtnAdd_Click">

<th>

</th>

</tr>

</table>

</div>

<asp:Repeater ID="rptList" runat="server" OnItemCommand="rptList_ItemCommand" OnItemDataBound="rptList_ItemDataBound">

<thead>

栏目名称</th>

<th>

栏目路径</th>

链接</th>

栏目图片</th>

排序</th>

添加</th>

移动</th>

编辑</th>

删除</th>

</tr>

</thead>

</HeaderTemplate>

<td>

#Eval("Name") %>

</td>

<td>

#Eval("DisplayName") %>

</td>

<td>

#Eval("Url")%>

</td>

<asp:Image ID="img" Height="22px" CssClass="CatalogImg" Width="80px" runat="server" ImageUrl='<%#String.Format("../{0}",Eval("ImageUrl"))%>'

Visible='<%

#GetVisible(Eval("ImageUrl")) %>'></asp:Image>

</td>

<td align="center"> <%

#Eval("OrderId")%>

</td>

</td>

</td>

</td>

<asp:LinkButton ID="lbtnDel" OnClientClick="return confirm('确定要删除该记录吗？');" CommandName="Delete" CommandArgument='<%#Eval("Id")%>' runat="server"><img alt="删除" src="images/Action/delete.gif" style="border:0px" /></asp:LinkButton>

</td>

</tr>

</ItemTemplate>

<td>

#Eval("Name") %>

</td>

<td>

#Eval("DisplayName") %>

</td>

<td>

#Eval("Url")%>

</td>

<asp:Image ID="img" Height="22px" Width="80px" CssClass="CatalogImg" runat="server" ImageUrl='<%#String.Format("../{0}",Eval("ImageUrl"))%>'

Visible='<%

#GetVisible(Eval("ImageUrl")) %>'></asp:Image>

</td>

<td align="center"><%

#Eval("OrderId")%>

</td>

</td>

</td>

</td>

</td>

</tr>

</AlternatingItemTemplate>

</TBODY> </TABLE>

</FooterTemplate>

</asp:Repeater>

</div>

</div><div id="large" style="position: absolute"></div>

</form>

</body>

</html>

在上面的代码中有两个重要的步骤：1、对数据进行再排序，使其符合显示格式要求。2、生成JQTreeTable所要的参数

三、来看一下，运行后的重要页面代码部分

Code
<script type="text/javascript">
$(function(){
    //[]中是通过后台代码生成的参数
    var map = [0,1,2,2,2,2,2,1,8,8,8,8,8,8,8,8,16,16,8,8,8,8,8,8,24,25,25,24,28,28,8,8,1,33,33,33,1,37,38,37,37,1,42,42,1,45,45,45,1,49,49,49,49,49,1];
    var options = {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: false, column: 0, striped: false, highlight: true, onselect: function(target){}};
   if(map!=null&&map.length>0)
    {
      $("#treetable").jqTreeTable(map, options);
    }
});
</script>

四、对上述的脚本进一步解释：

Code
var map = [0,1,2,2,2,2,2,1,8,8,8,8,8,8,8,8,16,16,8,8,8,8,8,8,24,25,25,24,28,28,8,8,1,33,33,33,1,37,38,37,37,1,42,42,1,45,45,45,1,49,49,49,49,49,1];

这段代码是对要生成的JQTreeTable中行的上下级关系的声明。通过参数map，生成我们要的树形结构。如在刚开始的效果图中，第一行“首页”是

一个根节点，那么第一个数字就是0（行）。第二行“大榭概况”是第一行“首页”的子节点，那么第二个数就是1（行）。依次类推。

Code
var options = {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: false, column: 0, striped: false, highlight: true, onselect: function(target){}};

这段代码是对要生成的JQTreeTable的参数的声明。

openImg、shutImg、leafImg、lastOpenImg、lastShutImg、lastLeafImg、vertLineImg、blankImg：是对树形效果的图片参数设置。

collapse：是否节点收缩起来。

column：要生成树形结构显示的是第几列，第一列为0。

striped:奇偶行颜色间隔。

highlight：鼠标所在行高亮显示。

onselect：单击选中时触发的事件。

五：资源下载：

JQTreeTable:http://www.hanpau.com/jquery/unobtrusivetreetable.php

转载于:https://www.cnblogs.com/yknb/archive/2008/09/14/1290684.html

weixin_30333885

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQTreeTable在Asp.net中的应用

树形结构是我们在写程序中会常用到的一种方法。如：部门组织结构、新闻产品类别结构等等。JQuery中有一个不错的组件，叫JQTreeTable，能简单直观的在Table中显示树形结构，如下图所示：通过JQTreeTable与Asp.net的配合，我们可以把这种效果应用到自己的系统中。一、先来看一下一个栏目的数据表的设计：数据表结构：CodeCREATETABLE[dbo]...
复制链接

扫一扫