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 

  • 相关阅读:
    uvm_cookbook--sequences--wait for a signal
    Makefile目标文件搜索(VPATH和vpath
    git stash
    vuex-persist,解决vuex中的数据刷新页面之后丢失的问题
    element表格中的输入框有时会存在输入不上的情况
    简单 Linux 文件系统?
    Shell 脚本是什么?
    什么是BASH?
    如何规划一台 Linux 主机,步骤是怎样?
    什么是GUI?
  • 原文地址:https://www.cnblogs.com/luluping/p/1506424.html
Copyright © 2011-2022 走看看