<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Basic TreeGrid - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">

    <link rel="stylesheet" type="text/css" href="../demo.css">

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

    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>

</head>

<body>

    <h2>Basic TreeGrid</h2>

    <p>TreeGrid allows you to expand or collapse group rows.</p>

    <div style="margin:20px 0;"></div>

    <table title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px"

            data-options="

                url: 'treegrid_data1.json',

                method: 'get',

                rownumbers: true,

                idField: 'id',

                treeField: 'name'

            ">

        <thead>

            <tr>

                <th data-options="field:'name'" width="220">Name</th>

                <th data-options="field:'size'" width="100" align="right">Size</th>

                <th data-options="field:'date'" width="150">Modified Date</th>

            </tr>

        </thead>

    </table>

</body>

</html>

json 文件
[{

    "id":,

    "name":"C",

    "size":"",

    "date":"02/19/2010",

    "children":[{

        "id":,

        "name":"Program Files",

        "size":"120 MB",

        "date":"03/20/2010",

        "children":[{

            "id":,

            "name":"Java",

            "size":"",

            "date":"01/13/2010",

            "state":"closed",

            "children":[{

                "id":,

                "name":"java.exe",

                "size":"142 KB",

                "date":"01/13/2010"

            },{

                "id":,

                "name":"jawt.dll",

                "size":"5 KB",

                "date":"01/13/2010"

            }]

        },{

            "id":,

            "name":"MySQL",

            "size":"",

            "date":"01/13/2010",

            "state":"closed",

            "children":[{

                "id":,

                "name":"my.ini",

                "size":"10 KB",

                "date":"02/26/2009"

            },{

                "id":,

                "name":"my-huge.ini",

                "size":"5 KB",

                "date":"02/26/2009"

            },{

                "id":,

                "name":"my-large.ini",

                "size":"5 KB",

                "date":"02/26/2009"

            }]

        }]

    },{

        "id":,

        "name":"eclipse",

        "size":"",

        "date":"01/20/2010",

        "children":[{

            "id":,

            "name":"eclipse.exe",

            "size":"56 KB",

            "date":"05/19/2009"

        },{

            "id":,

            "name":"eclipse.ini",

            "size":"1 KB",

            "date":"04/20/2010"

        },{

            "id":,

            "name":"notice.html",

            "size":"7 KB",

            "date":"03/17/2005"

        }]

    }]

}]


												


											
jquery easy ui 学习 （8）basic treegrid的更多相关文章
	

    
								
  1. jquery easy ui 学习 （6） basic validatebox
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    2. 
						
  2. jquery easy ui 学习 （9）Pagination in TreeGrid  分页
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    3. 
						
  3. jquery easy ui 学习 （7） TreeGrid Actions
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    4. 
						
  4. jquery easy ui 学习 （1）Basic Window
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    5. 
						
  5. jquery easy ui 学习 （5） windowlayout
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    6. 
						
  6. jquery easy ui 学习 （4） window 打开之后 限制操纵后面元素属性
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    7. 
						
  7. jquery easy ui 学习 （3） window 限制在父类窗体内
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    8. 
						
  8. jquery easy ui 学习 （2） customtools window
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    9. 
						
  9. Jquery easy  UI 上中下三栏布局                                                    分类：            ASP.NET             2015-02-06 09:19    368人阅读    评论(0)    收藏
		
    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SQL 2005远程连接是出错（provider: SQL 网络接口, error: 28 - 服务器不支持请求的协议
			
    SQL 2005远程连接是出错(provider: SQL 网络接口, error: 28 - 服务器不支持请求的协议 sql远程连接服务器网络sql serversqlserver 解决方法:在服务 ...
    
			
    2. 
						
  2. Android SDK更新失败最新解决方案
			
    解决方案: 将https修改为http://在Android SDK manager中,的tools文件夹下,选择options...选项, 勾选 Force https//... sources t ...
    
			
    3. 
						
  3. 80X86 分段机制（读书笔记）
			
    GDT(全局描述符表)本身并不是一个段,而是线性地址空间的一个数据结构.GDT的线性地址和长度必须加载进GDTR寄存器中.LDT(局部描述符表)存放在LDT类型的系统段中.此时GDT必须含有LDT的段 ...
    
			
    4. 
						
  4. poj2926 曼哈顿最远距离
			
    题目链接:http://poj.org/problem?id=2926 #include<cstdio> #include<cstring> #include<cmath ...
    
			
    5. 
						
  5. Count the string - HDU 3336（next+dp）
			
    题目大意:给你一个串求出来这个串所有的前缀串并且与前缀串相等的数量,比如: ababa 前缀串{"a", "ab", "aba", &quo ...
    
			
    6. 
						
  6. C++设计模式---职责链模式
			
    职责链模式:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这个对象连成一条链,并沿这条链传递该请求,直到有一个对象处理它为止. 这里发出这个请求的客户端并不知道这当中的哪一 ...
    
			
    7. 
						
  7. JSTL和select标签的组合使用
			
    1.用于根据不同的值显示对应的内容,不能选择 <select name="grade"> <c:choose> <c:when test=" ...
    
			
    8. 
						
  8. MySQL Replication, 主从和双主配置
			
    MySQL Replication, 主从和双主配置 MySQL的Replication是一种多个MySQL的数据库做主从同步的方案,特点是异步,广泛用在各种对MySQL有更高性能,更高可靠性要求的场 ...
    
			
    9. 
						
  9. [Javascript] Intro to the Web Audio API
			
    An introduction to the Web Audio API. In this lesson, we cover creating an audio context and an osci ...
    
			
    10. 
						
  10. PHP ORM框架与简单代码实现(转)
			
    对象关系映射(Object Relational Mapping,简称ORM)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过使用描述对象和数据库之间映射的元数据 ...
    
			
    11.