jQTreeTable在Asp.net中的应用

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

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

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

数据表结构：

)

数据示例：

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

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

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

$(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中行的上下级关系的声明。通过参数map，生成我们要的树形结构。如在刚开始的效果图中，第一行“首页”是

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

(target){}};

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

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

collapse：是否节点收缩起来。

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

striped:奇偶行颜色间隔。

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

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