zoukankan      html  css  js  c++  java
  • jQTreeTable在Asp.net中的应用

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

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

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

    数据表结构:

    Code

    数据示例:

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

    Code
    Code

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

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

    Code

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

    Code

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

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

    Code

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

    openImg、shutImg、leafImglastOpenImglastShutImglastLeafImgvertLineImgblankImg:是对树形效果的图片参数设置。

    collapse:是否节点收缩起来。

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

    striped:奇偶行颜色间隔 。

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

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

    五:资源下载:

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

  • 相关阅读:
    构建之法东北师大站分数构成
    alpha发布排序结果
    展示一个响应式布局吧,没有效果图自己敲敲看吧@@@@
    vc++和LINGO编程
    [opencv] 极线校正
    [python] 小demo
    [python] socket模块(TCP/IP网络编程)
    树莓派学习【二】:(SSH+VNC)树莓派一根网线连电脑,不要显示屏
    树莓派学习【一】:树莓派的SSH连接
    css+div基本知识;
  • 原文地址:https://www.cnblogs.com/luluping/p/1506424.html
Copyright © 2011-2022 走看看