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

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

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

数据表结构：

Code

数据示例：

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

Code

Code

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

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

Code

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

Code

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

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

Code

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

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

collapse：是否节点收缩起来。

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

striped:奇偶行颜色间隔 。

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

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

五：资源下载：

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