效果图

准备步骤:

具体使用的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. 浅谈软件配置管理工具（github & SVN）

    1   配置管理名词定义 1.1 配置项 软件生存周期各个阶段活动的产物经审批后即可称之为软件配置项. 软件配置项包括: ①与合同.过程.计划和产品有关的文档和资料: ②源代码.目标代码和可执行代码: ...

  2. UE 技巧

    http://cache.baiducontent.com/c?m=9d78d513d98416b8599d830e7c01a7170e2585744ddcc4523f8a9c12d522195646 ...

  3. pylot 学习笔记-使用

    Console and Blocking Mode - Command Line Options: usage: run.py [options] args -a, --agents=NUM_AGEN ...

  4. failed to load selinux policy freezing

    一.原因: 在修改selinux配置文件时输入并保存了一个错误的配置参数. 二.挽救: 1. 重启系统. 2. 在启动选项上按 e. 3. 进入grub编辑页面. 4. 向下移动光标至fi下一行. 5 ...

  5. tomcat配置外部静态资源映射路径

    一.背景 1.有一个录音软件每天生成很多新的录音文件. 2.现在想通过一个WEB项目页面下载这些录音文件. 3.很显然这些录音文件放在WEB项目下不是很合适(WEB项目更新是个大麻烦,海量的录音文件要 ...

  6. php序列化与反序列化时字符集不一致问题的解决办法

    今天的用PHP的时候无意的出现了用unserialize()函数转换老是返回false,我确认我的字符串是没错的,测试了很多次还是一样,没办法,启用了error_reporting(E_ALL)启用错 ...

  7. Xilinx中的xapp1052理解

    xapp1052是xilinx官方给出的一个有关DMA数据传输的样例,用于PC端和FPGA端之间的DMA数据传输.首先需要说的是,xapp1052并不是一个完整的DMA数据传输的终端硬件设计,这在下面 ...

  8. BestCoder Round #4 Miaomiao&#39;s Geometry （暴力）

    Problem Description There are N point on X-axis . Miaomiao would like to cover them ALL by using seg ...

  9. Photoshop制作Android UI: 怎样将图片背景变为透明

    看烦了代码.今天玩玩PS吧.本人是PS小白.Android开发中不可避免的要做一些图片,但我发现居然没有相似的专门教程.真想拜个美工为师.还记得2012年去宁波实习时为了将图片缩小我还matlab写个 ...

  10. Linux系统中 Sublime Text 中文 GBK 文件乱码问题

    Sublime Text 是一个很不错编辑器,具有漂亮的界面和强大的功能.再加上丰富的插件,而且还跨平台,绝对是一款实打实的神器啊! 众所周知,Sublime Text 对中文支持的极差,可以说几乎就 ...