效果图

准备步骤:

具体使用的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. 使用mysql遇到的异常

    Can't find any matching row in the user table 原因 更改mysql.user表之后,没有使用flush privileges命令来更新权限. 解决方案 使 ...

  2. 哇塞！HTML5 实现的雨滴效果 CSS发抖

    http://dreamsky.github.io/main/blog/rainy-day/ Rainy Day – 哇塞! HTML5 实现的雨滴效果 http://www.webhek.com/m ...

  3. eclipse3.7之后，在引入的jquery的js文件打红叉

    使用Eclipse 3.7时,工程中加入jquery.xx.js文件,发现该文件出现错误提示(红×),但使用Eclipse 3.7以前的版本就不会出现这种提示.是因为Eclipse 3.7在.proj ...

  4. mysql 查看是否被锁

    SHOW OPEN TABLES FROM huahua

  5. activiti 开发环境

    1 javadocs 的11 个package org.activiti.engine,包含7个Service接口.异常定义.流程引擎.流程引擎配置和一些运行时异常类. org.activiti.en ...

  6. intellij IDEA开发node.js

    现在网上好像关于IDEA开发node.js的讲解不是太多,今天试了一下,竟然成功了.... 1.安装nodejs http://nodejs.org/download/  自动根据系统下载自己的版本n ...

  7. spineRunTime for cocos2dx v3 中动画播完删除animation

    spineRunTime for cocos2dx v3 中删除animation,发现下面写法会崩溃:   spine::SkeletonAnimation* animationNode = spi ...

  8. [svc]磁盘接口与RAID

    一 磁盘接口 IDE 传统家用: /dev/hda1 SISC 传统服务器: /dev/sdb1 SATA 现在家用 SAS 现在服务器用 FC(光纤通道) 高级服务器 注意: 分区编号,1-4只能给 ...

  9. cocos2d-x Schedule详解

    原理介绍 Cocos2d-x调度器为游戏提供定时事件和定时调用服务.所有Node对象都知道如何调度和取消调度事件,使用调度器有几个好处: 每当Node不再可见或已从场景中移除时,调度器会停止. Coc ...

  10. Windows10 64位 Python2.7 Matplotlib安装

    为了安装Matplotlib 百度了一大堆,也下载了一大堆安装包,结果还是报错ImportError: DLL load failed: %1 不是有效的 Win32 应用程序. 后来直接从官网看怎么 ...