效果图

准备步骤:

具体使用的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. java.sql.SQLException: 索引中丢失 IN 或 OUT 参数:: 1

    String sql1 = "insert into TEST_RELEVANCEEXPORT" +            " (ID, YYCSDM, YYCSMC, ...

  2. 转：http协议学习

    协议详解篇 2.1 HTTP/1.0和HTTP/1.1的比较 RFC 1945定义了HTTP/1.0版本,RFC 2616定义了HTTP/1.1版本. 笔者在blog上提供了这两个RFC中文版的下载地 ...

  3. Workflow_工作流的基本元素（概念）

    2014-05-31 Created By BaoXinjian

  4. PLSQL_统计信息系列10_统计信息过旧导致程序出现性能问题

    2014-11-15 Created By BaoXinjian

  5. 计算机硬盘大小转换(B,KB,MB,GB,TB,PB之间的大小转换)

    程序猿都非常懒.你懂的! java程序猿在实际的开发中会遇到非常多的单位换算问题.今天我给大家带来的是关于计算机硬盘大小的换算.多数情况下.一般要求b,kb,mb,gb,tb,pb之间的大小转换,我们 ...

  6. winfrom 窗口起始位置为屏幕中央

    窗口起始位置为屏幕中央 this.StartPosition = System.Windows.Forms.FormStartPosition.CenterScreen; 获取鼠标触发事件光标位置 t ...

  7. java web中jsp常用标签

    在jsp页面开发过程中,经常需要使用JSTL(Java Server Pages Standard Tag Library)标签开开发页面,是看起来更加的规整舒服. JSTL主要提供了5大类标签库: ...

  8. Scala first trial

    scala是一种将面向对象和函数式编程相结合的语言,在spark中大显身手,在大数据时代下,不会scala都不敢说自己是搞大数据的.前段时间参加BDTC2014大数据会议时,spark的贡献者,陈超老 ...

  9. hdu 1532 最大流

    #include <cstdio> #include <iostream> #include <algorithm> #include <queue> ...

  10. 黑马day16 jquery案例演示

    案例一: <html> <head> <meta http-equiv="Content-Type" content="text/html; ...