效果图

准备步骤:

具体使用的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. 给定随机数列求第k大的数字

    原来STL我还是有很多不知道的地方 STL 采用的算法是: 当数组长度 <= 3时, 采用插入排序. 当长度 > 3时, 采用快排 Partition 的思想,也就是说类似快速排序(这里不 ...

  2. 步入DevExpress的使用（VS）

    1.下载安装DevExpress控件(如DXperienceUniversal-11.1.12.exe),安装后路径:“C:\Program Files (x86)\DevExpress 2011.1 ...

  3. iOS开发打包

    ios11个论坛地址   邓白氏编码    邓白氏申请 http://blog.fir.im/faq/ AdHoc,InHouse,App Store Account Type: InHouse  ( ...

  4. sublim3常用插件安装

    1首先需要安装插件管理器Package Control,点击View > Show Console菜单,输入以下代码,按回车运行即可.说明:以下只对st3有效 import urllib.req ...

  5. django找不到模板(TemplateDoesNotExist at)的异常处理案例

    一.django的渲染模板时报如下错: TemplateDoesNotExist at 二.定位问题: 1.由上面报的错.一开始以为是找不到模板(自己路径写的不对).后来发现我的路径写的是正确的. 2 ...

  6. enumerate的简单使用

    l = [11,22,33,55,"ss","zz"] for i,v in enumerate(l): print(i,v) #打印结果: # 0 11 # ...

  7. Android利用Fiddler进行网络数据抓包【怎么跟踪微信请求】

    主要介绍Android及IPhone手机上如何利用Fiddler进行网络数据抓包,比如我们想抓某个应用(微博.微信.墨迹天气)的网络通信请求就可以利用这个方法. Mac 下请使用 Charles 代替 ...

  8. Android Hawk数据库 github开源项目

    Android Hawk数据库 github开源项目 Hawk 是一个很便捷的数据库  . 操作数据库仅仅需一行代码 , 能存不论什么数据类型 . github 地址: https://github. ...

  9. mybatis 一二事（2） - 动态代理

    db.properties 单独提取出来的数据库配置,方便以后维护管理 jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhos ...

  10. 【Android】9.2 内置行视图的分类和呈现效果

    分类:C#.Android.VS2015: 创建日期:2016-02-18 一.简介 Android内置了很多行视图模板,在应用程序中可直接使用这些内置的视图来呈现列表项. 要在ListView中使用 ...