树形结构是我们在写程序中会常用到的一种方法。如：部门组织结构、新闻产品类别结构等等。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) --排序
)
数据示例：
二、再来看一下页面的代码：
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 catalogs = Catalog.FindAllOrderByOrderId();
IList items = new List();
//对原有的数据进行重新排序
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();
}
/**////
/// 递归排序
///
/// 原数据集
/// 排序后的数据集
/// 上级编码
private void ResetItems(IList oItems, IList 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" %>
http://www.w3.org/1999/xhtml">
无标题页
在上面的代码中有两个重要的步骤：1、对数据进行再排序，使其符合显示格式要求。2、生成JQTreeTable所要的参数
三、来看一下，运行后的重要页面代码部分
四、对上述的脚本进一步解释：
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
CIO之家 www.ciozj.com 公众号:imciow