树形结构是我们在写程序中会常用到的一种方法。如:部门组织结构、新闻产品类别结构等等。JQuery中有一个不错的组件,叫JQTreeTable,能简单直观的在Table中显示树形结构,如下图所示:
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQvOTFmNmMzZjI0YjNjZTAwMmNkZjQzOTk0NTVlZTczYmMuSlBFRw==)
通过JQTreeTable与Asp.net的配合,我们可以把这种效果应用到自己的系统中。
一、先来看一下一个栏目的数据表的设计:
数据表结构:
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg4MS85MzEwZTg1YTE0YWY5OWRlNDgxMWZmNGM3N2YxZjkxMS5naWY=)
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) --排序
)
数据示例:
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzcwOC9hODJiY2ZkOGQ0YjU0YTNlY2I5MTI2YWE3NDI1NTRhYy5KUEVH)
二、再来看一下页面的代码:
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg4MS85MzEwZTg1YTE0YWY5OWRlNDgxMWZmNGM3N2YxZjkxMS5naWY=)
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
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg4MS85MzEwZTg1YTE0YWY5OWRlNDgxMWZmNGM3N2YxZjkxMS5naWY=)
{
public partial class CatalogList : BasePage
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
//JQTreeTable要的参数
protected string strMap = "";
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzczNS8xNDA4YzUyNjBiMmYwNWU0NTBkZWU5MjlkYjliZTVmNy5naWY=)
protected void Page_Load(object sender, EventArgs e)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
if (!Page.IsPostBack)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
BindDataList();
}
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzczNS8xNDA4YzUyNjBiMmYwNWU0NTBkZWU5MjlkYjliZTVmNy5naWY=)
private void BindDataList()
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
//根据OrderId,NodeCode asc 排序获得的数据记录集
IList<Catalog> catalogs = Catalog.FindAllOrderByOrderId();
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzczNS8xNDA4YzUyNjBiMmYwNWU0NTBkZWU5MjlkYjliZTVmNy5naWY=)
IList<Catalog> items = new List<Catalog>();
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzczNS8xNDA4YzUyNjBiMmYwNWU0NTBkZWU5MjlkYjliZTVmNy5naWY=)
//对原有的数据进行重新排序
foreach (Catalog item in catalogs)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
if (String.IsNullOrEmpty(item.ParentCode))
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
//添加到排序后的数据集中
items.Add(item);
//生成JQTreeTable要的参数格式
if (strMap == "")
strMap = "0";
else strMap += ",0";
//如果不是叶子节点,对子节点进行排序
if (item.IsLeaf == false)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
ResetItems(catalogs, items, item.NodeCode);
}
}
}
rptList.DataSource = items;
rptList.DataBind();
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzczNS8xNDA4YzUyNjBiMmYwNWU0NTBkZWU5MjlkYjliZTVmNy5naWY=)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
/**//// <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)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
//保存当前排序后的数据集的记录数
int CurrentNum = nItems.Count;
foreach (Catalog item in oItems)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
if (item.ParentCode == parentCode)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
//生成JQTreeTable要的参数格式
if (strMap == "")
strMap = "0";
else strMap += "," + CurrentNum.ToString();
//添加到排序后的数据集中
nItems.Add(item);
//如果不是叶子节点,对子节点进行排序
if (item.IsLeaf == false)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
ResetItems(oItems, nItems, item.NodeCode);
}
}
}
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzczNS8xNDA4YzUyNjBiMmYwNWU0NTBkZWU5MjlkYjliZTVmNy5naWY=)
protected void lbtnAdd_Click(object sender, EventArgs e)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
Response.Redirect("CatalogAddEdit.aspx", true);
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzczNS8xNDA4YzUyNjBiMmYwNWU0NTBkZWU5MjlkYjliZTVmNy5naWY=)
protected bool GetVisible(object url)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
if (String.IsNullOrEmpty(url.ToString()))
return false;
else return true;
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzczNS8xNDA4YzUyNjBiMmYwNWU0NTBkZWU5MjlkYjliZTVmNy5naWY=)
//删除记录
protected void rptList_ItemCommand(object source, RepeaterCommandEventArgs e)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
try
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
if (e.CommandName.ToLower() == "delete")
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
int Id = Convert.ToInt32(e.CommandArgument.ToString());
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
Catalog.DeleteAll(new int[]
{ Id });
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzczNS8xNDA4YzUyNjBiMmYwNWU0NTBkZWU5MjlkYjliZTVmNy5naWY=)
Response.Redirect("CatalogList.aspx", true);
}
}
catch
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
JsAlert("数据删除出错!");
}
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzczNS8xNDA4YzUyNjBiMmYwNWU0NTBkZWU5MjlkYjliZTVmNy5naWY=)
protected void rptList_ItemDataBound(object sender, RepeaterItemEventArgs e)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
try
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
Catalog item =(Catalog)e.Item.DataItem;
LinkButton lbtn =(LinkButton) e.Item.FindControl("lbtnDel");
if (item == null || lbtn == null)
return;
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzczNS8xNDA4YzUyNjBiMmYwNWU0NTBkZWU5MjlkYjliZTVmNy5naWY=)
if (item.IsLeaf)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
lbtn.OnClientClick = "return confirm('确定要删除该记录吗?');";
}
else
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
lbtn.Enabled = false;
lbtn.OnClientClick = "alert('该栏目存在子栏目,不能删除!');return false;";
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzczNS8xNDA4YzUyNjBiMmYwNWU0NTBkZWU5MjlkYjliZTVmNy5naWY=)
}
catch
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzczNS8xNDA4YzUyNjBiMmYwNWU0NTBkZWU5MjlkYjliZTVmNy5naWY=)
}
}
}
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg4MS85MzEwZTg1YTE0YWY5OWRlNDgxMWZmNGM3N2YxZjkxMS5naWY=)
Code
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
<%
@ Page Language="C#" AutoEventWireup="true" Codebehind="CatalogList.aspx.cs" Inherits="WebSite.Admin.CatalogList" %>
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzgxNi83MzE2NTU5NTRjN2JlOWQ4ODM1ZWNlNTUxYjUzODVmOC5naWY=)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
<%
@ Register Assembly="YKSoft.Web.UI.WebControls" Namespace="YKSoft.Web.UI.WebControls.EasyPager"
TagPrefix="cc2" %>
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
<%
@ Register Assembly="YKSoft.Web.UI.WebControls" Namespace="YKSoft.Web.UI.WebControls.SmartGridView"
TagPrefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<!--Jquery脚本-->
<script type="text/javascript" src="../Js/jquery-1.2.6.js"></script>
<!--jQTreeTable脚本-->
<script type="text/javascript" src="Js/jQTreeTable.js"></script>
<!--jQTreeTable样式-->
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
<style type="text/css">![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzYyNS8yMjI1MzAxOTAxMzZjOWM0Y2ZkMjM3Y2MwZDVjZmY5OS5wbmc=)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
* {
}{ font-family: 宋体,Arial, Verdana; }
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
h1 {
}{ text-align: center; }
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
p {
}{ font-size: 10pt; }
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
.collapsed {
}{
DISPLAY: none
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
#tablemain {
}{
cellspacing:0px;
cellpadding:0px;
rules:all;
border:0px;
color:#333333;
border-style:Solid;
width:100%;
border-collapse:collapse;
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
#treetable TD {
}{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; FONT: 9pt 宋体; CURSOR: pointer; PADDING-TOP: 0px
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
.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
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
.parimg {
}{
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: 16px; BORDER-BOTTOM-STYLE: none
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
.preimg {
}{
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
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
.parimg {
}{
CURSOR: pointer
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
.even {
}{
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
.over {
}{
BACKGROUND-COLOR: #dfe7ed
}
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
.selected {
}{
}
</style>
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
<script type="text/javascript" >![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzYyNS8yMjI1MzAxOTAxMzZjOWM0Y2ZkMjM3Y2MwZDVjZmY5OS5wbmc=)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
$(function()
{
var ei = $("#large");
ei.hide();
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
$(".CatalogImg").mousemove(function(e)
{
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
ei.css(
{top:e.pageY,left:e.pageX}).html('<img style="border:0px solid gray;" src="' + this.src + '" />').show();
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
}).mouseout( function()
{
ei.hide();
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<!--JQTreeTable-->
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
<script type="text/javascript">![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzYyNS8yMjI1MzAxOTAxMzZjOWM0Y2ZkMjM3Y2MwZDVjZmY5OS5wbmc=)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
$(function()
{
//声明数组
var map = [<%=strMap %>];
//声明参数选项
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
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)
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY=)
{
//根据参数显示树
$("#treetable").jqTreeTable(map, options);
}
});
</script>
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzgxNi83MzE2NTU5NTRjN2JlOWQ4ODM1ZWNlNTUxYjUzODVmOC5naWY=)
<div>
<div class="menutbl" id="header">
<table cellspacing="0" cellpadding="0">
<tr>
<td style="width: 8px">
</td>
<td nowrap="nowrap" style="font:9pt 宋体">
<asp:LinkButton ID="lbtnAdd" runat="server" OnClick="lbtnAdd_Click">
<img src="images/Action/add.gif" border="0" align="absmiddle"/>添加</asp:LinkButton></td>
<th>
</th>
</tr>
</table>
</div>
<div style="width: 100%">
<asp:Repeater ID="rptList" runat="server" OnItemCommand="rptList_ItemCommand" OnItemDataBound="rptList_ItemDataBound">
<HeaderTemplate>
<table id="tablemain" style="width: 100%">
<thead>
<tr class="PageGridHeader" >
<th style="width:220px">
栏目名称</th>
<th>
栏目路径</th>
<th style="width:150px">
链接</th>
<th style="width:100px">
栏目图片</th>
<th style="width:40px">
排序</th>
<th style="width:40px">
添加</th>
<th style="width:40px">
移动</th>
<th style="width:40px">
编辑</th>
<th style="width:40px">
删除</th>
</tr>
</thead>
<tbody id="treetable">
</HeaderTemplate>
<ItemTemplate>
<tr style="background-color: #EFF3FB; height: 22px;">
<td>
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
<%
#Eval("Name") %>
</td>
<td>
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
<%
#Eval("DisplayName") %>
</td>
<td>
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
<%
#Eval("Url")%>
</td>
<td align="center">
<asp:Image ID="img" Height="22px" CssClass="CatalogImg" Width="80px" runat="server" ImageUrl='<%#String.Format("../{0}",Eval("ImageUrl"))%>'
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
Visible='<%
#GetVisible(Eval("ImageUrl")) %>'></asp:Image>
</td>
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
<td align="center"> <%
#Eval("OrderId")%>
</td>
<td align="center">
<a href="CatalogAddEdit.aspx?NodeCode=<%#Eval("NodeCode") %>"><img alt="添加" src="images/Action/add.gif" style="border:0px" /></a>
</td>
<td align="center">
<a href="CatalogMove.aspx?ID=<%#Eval("ID") %>"><img alt="移动" src="images/Action/move.gif" style="border:0px" /></a>
</td>
<td align="center"><a href="CatalogAddEdit.aspx?ID=<%#Eval("ID") %>"><img alt="编辑" src="images/Action/edit.gif" style="border:0px" /></a>
</td>
<td align="center">
<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>
<AlternatingItemTemplate>
<tr style="background-color: White; height: 22px;">
<td>
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
<%
#Eval("Name") %>
</td>
<td>
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
<%
#Eval("DisplayName") %>
</td>
<td>
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
<%
#Eval("Url")%>
</td>
<td align="center">
<asp:Image ID="img" Height="22px" Width="80px" CssClass="CatalogImg" runat="server" ImageUrl='<%#String.Format("../{0}",Eval("ImageUrl"))%>'
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
Visible='<%
#GetVisible(Eval("ImageUrl")) %>'></asp:Image>
</td>
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY=)
<td align="center"><%
#Eval("OrderId")%>
</td>
<td align="center">
<a href="CatalogAddEdit.aspx?NodeCode=<%#Eval("NodeCode") %>"><img alt="添加" src="images/Action/add.gif" style="border:0px" /></a>
</td>
<td align="center">
<a href="CatalogMove.aspx?ID=<%#Eval("ID") %>"><img alt="移动" src="images/Action/move.gif" style="border:0px" /></a>
</td>
<td align="center"><a href="CatalogAddEdit.aspx?ID=<%#Eval("ID") %>"><img alt="编辑" src="images/Action/edit.gif" style="border:0px" /></a>
</td>
<td align="center">
<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>
</AlternatingItemTemplate>
<FooterTemplate>
</TBODY> </TABLE>
</FooterTemplate>
</asp:Repeater>
</div>
</div><div id="large" style="position: absolute"></div>
</form>
</body>
</html>
在上面的代码中有两个重要的步骤:1、对数据进行再排序,使其符合显示格式要求。2、生成JQTreeTable所要的参数
三、来看一下,运行后的重要页面代码部分
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg4MS85MzEwZTg1YTE0YWY5OWRlNDgxMWZmNGM3N2YxZjkxMS5naWY=)
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>
四、对上述的脚本进一步解释:
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg4MS85MzEwZTg1YTE0YWY5OWRlNDgxMWZmNGM3N2YxZjkxMS5naWY=)
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(行)。依次类推。
![jQTreeTable在Asp.net中的应用 jQTreeTable在Asp.net中的应用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg4MS85MzEwZTg1YTE0YWY5OWRlNDgxMWZmNGM3N2YxZjkxMS5naWY=)
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