效果图

准备步骤:

具体使用的Dome可以在这个位置下载

http://download.csdn.net/detail/jine515073/7986227

1.引入jquery.treeTable.js和jquery.treeTable.css

前台代码如下:

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="/resources/js/treeTable/vsStyle/jquery.treeTable.css" rel="stylesheet" type="text/css" />

    <style type="text/css">

        table, td, th {

            border: 1px solid #8DB9DB;

            padding: 5px;

            border-collapse: collapse;

            font-size: 16px;

        }

    </style>

    <script src="/resources/js/jquery-1.7.2.min.js" type="text/javascript"> </script>

    <script src="/resources/js/treeTable/jquery.treeTable.js" type="text/javascript"> </script>

    <script type="text/javascript">

        $(function () {

            var option = {

                theme: 'vsStyle',

                expandLevel: ,

                beforeExpand: function ($treeTable, id) {

                    //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用

                    if ($('.' + id, $treeTable).length) { return; }

                    //这里的html可以是ajax请求

                    //var html = '<tr id="8" pId="6"><td>员工伙食费</td><td>5000</td><td>1000</td></tr>'

                    $treeTable.addChilds(html);

                },

                onSelect: function ($treeTable, id) {

                    window.console && console.log('onSelect:' + id);

                }

            };

            $('#treeTable1').treeTable(option);

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <table id="treeTable1" style="width: 100%">

                <asp:Repeater ID="Repeater1" runat="server" >

                    <HeaderTemplate>

                        <tr>

                            <td style="width: 200px;">收支项目</td>

                        </tr>

                    </HeaderTemplate>

                    <ItemTemplate>

                        <tr id="<%#Eval("pid") %>" pid="<%#Eval("fatherid") %>">

                            <td><%#Eval("Categories") %></td>

                        </tr>

                    </ItemTemplate>

                </asp:Repeater>

             </table>

        </div>

    </form>

</body>

</html>

后台代码:

DataTable dt = new DataTable();

dt.Columns.Add("pid");

dt.Columns.Add("fatherid");

dt.Columns.Add("Categories");

dt.Columns.Add("Month");

dt.Columns.Add("Year");

this.Repeater1.DataSource = dt;

this.Repeater1.DataBind();

细心的朋友会发现,多级数据,在数据库是没有按照上下级排序好的,但是这个控件需要按照上下级排序正确后,才能正常显示,所以要补充一个数据库排序的代码

with cte(SortID,CategoryID,CategoryName,ParentID)

as

(

select cast(row_number() over(order by CategoryID) as varchar()) SortID,CategoryID,CategoryName,ParentID from

Category where ParentID= and CompanyID=@CompanyID AND Type=

union all

select  cast(SortID+cast(row_number() over(order by a.CategoryID)as varchar()) as varchar()),a.CategoryID,a.CategoryName,a.ParentID

from Category a join cte

on cte.CategoryID=a.ParentID

)
select  CategoryID,CategoryName,ParentID from cte  order by SortID

jquery树形表格实现方法的更多相关文章

  1. easyUI中treegrid组件构造树形表格（简单数据类型）+ssm后台

    这几天做的项目要求用树形表格的形式展示一部分数据,于是就想到了使用easyUI的treegrid组件,但几经翻查各种资料,发现数据类型大多采取标准数据类型,即包含children元素的数据类型,小编查 ...

  2. 第二百二十八节，jQuery EasyUI，TreeGrid(树形表格)组件

    jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...

  3. jQuery EasyUI/TopJUI创建树形表格下拉框

    jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...

  4. easyui源码翻译1.32--TreeGrid（树形表格）

    前言 扩展自$.fn.datagrid.defaults.使用$.fn.treegrid.defaults重写默认值对象.下载该插件翻译源码 树形表格用于显示分层数据表格.它是基于数据表格.组合树控件 ...

  5. jquery编写插件的方法

     版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...

  6. jQuery树形菜单(1)jquery.treeview

    jQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/从该网站Download得到jquery.tr ...

  7. jquery 中一些 特殊方法 的特殊使用 一览表

    cnblogs的页面, 一种是管理页面, 是随笔的列表 a full list of essays. 另一种是 首页. 要搜索文档的话, 就使用 "首页"的那种方式. 一个jque ...

  8. 再谈：jquery编写插件的方法

    版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...

  9. TreeGrid( 树形表格)

    本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使用方法,这个组件依赖于DataGrid(数据表格)组件 一． 加载方式//建立一个 JSON 文件[{"id" ...

随机推荐

  1. Linux安装JDK详细步骤(rpm方式)

    1. 先从网上下载jdk(jdk-6u32-linux-i586-rpm) ,下载后放在/home目录中,当然其它地方也行. 进入安装目录 #cd /home#cp jdk-6u32-linux-i5 ...

  2. ngx_lua学习笔记 -- capture + proxy 实现httpclient

    题注 最近我在学习nginx的lua插件,发现结合nginx的异步io和lua的流程控制能力,还是有很丰富的想象空间的:几乎所有常见的http请求的处理逻辑都能搞定,诸如查查数据库,访问一下memca ...

  3. JMeter UI 启动时报错

    Problem After running jmeter.bat command under Windows 7 with cmd  the following error is produced:W ...

  4. Linux内核同步 - Read/Write spin lock

    一.为何会有rw spin lock? 在有了强大的spin lock之后,为何还会有rw spin lock呢?无他,仅仅是为了增加内核的并发,从而增加性能而已.spin lock严格的限制只有一个 ...

  5. Python3 列表 clear() 方法

    描述 Python3 列表 clear() 方法用于清空列表,类似于 del a[:]. 语法 clear() 方法语法: L.clear() 参数 无. 返回值 该方法没有返回值. 实例 以下实例展 ...

  6. Python pow() 函数

    描述 pow() 方法返回 xy(x的y次方) 的值. 语法 以下是 math 模块 pow() 方法的语法: import math math.pow( x, y ) 内置的 pow() 方法 po ...

  7. Android IPC机制（三）在Android Studio中使用AIDL实现跨进程方法调用

    在上一篇文章Android IPC机制(二)用Messenger进行进程间通信中我们介绍了使用Messenger来进行进程间通信的方法.可是我们能发现Messenger是以串行的方式来处理client ...

  8. log4j 输出到 数据库

    # LOG4J配置 log4j.rootCategory=ERROR,stdout,errorfile,jdbc # 控制台输出 log4j.appender.stdout=org.apache.lo ...

  9. asp.net导出excel-一行代码实现excel、xml、pdf、word、html、csv等7种格式文件导出功能而且美观-SNF快速开发平台

    分享: 腾讯微博  新浪微博   搜狐微博   网易微博  腾讯朋友  百度贴吧  豆瓣   QQ好友  人人网 作者:王春天  原文地址:http://www.cnblogs.com/spring_ ...

  10. Linux安装Qt详细步骤 亲测总结

    下载 qt-everywhere-opensource-src-4.8.4.tar.gz================准备工作====================yum install kern ...