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 

  • 相关阅读:
    linux上运行jmeter-server失败
    转:JMeter整合InfluxDB,Grafana让测试结果实时显示
    转:基于InfluxDB&Grafana的JMeter实时性能测试数据的监控和展示
    转:Linux下用Jmeter做接口测试
    关于获取IP 电脑获取准确手机获取的IP不准确
    关于MVC微信开发遇到的那些坑。
    uploadify 上传 大文件没有反映
    HTTP 错误 404.3
    关于WEBAPI 的使用 和WEBAPI CORS 的使用过程遇到的问题
    MVC4 ViewModel 存入多个Model,以及前台的显示用法。具体类名可以参数代替
  • 原文地址:https://www.cnblogs.com/luluping/p/1506424.html
Copyright © 2011-2022 走看看