<!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 server 查询日期中的常用语句， 例如本周第一天， 年内的第几周，有用
			
    --本周第一天    SELECT DATEADD(Day,1-(DATEPART(Weekday,getdate())+@@DATEFIRST-1)%7,getdate())   --or    s ...
    
			
    2. 
						
  2. G - Shuffle'm Up
			
    题目大意: 是一个洗牌游戏,首先给出两堆牌,s1,s2,先从s1上面拿一张牌再从s2上面拿一张牌依次往下可以洗好牌,然后把洗好的牌再分成两堆继续洗,直到这堆牌的顺序与给的顺序相同可以停止,当然如果洗不 ...
    
			
    3. 
						
  3. 统计学习导论：基于R应用——第二章习题
			
    目前在看统计学习导论:基于R应用,觉得这本书非常适合入门,打算把课后习题全部做一遍,记录在此博客中. 第二章习题 1. (a) 当样本量n非常大,预测变量数p很小时,这样容易欠拟合,所以一个光滑度更高 ...
    
			
    4. 
						
  4. java.lang.ClassCastException: android.view.ViewGroup$LayoutParams cannot be cast to android.widget.L（转）
			
    09-09 10:19:59.979: E/AndroidRuntime(2767): FATAL EXCEPTION: main09-09 10:19:59.979: E/AndroidRuntim ...
    
			
    5. 
						
  5. css中var函数
			
    引言: 在学习elementui的时候看到一个var.css, 其中写的全部都是以--开头的属性,上google查询不是css3新增的属性,于是决定一探究竟 :root { /* Transition ...
    
			
    6. 
						
  6. 第五章：最后一步准备，1.8的Json模型、状态描述机制详解
			
    <基于1.8 Forge的Minecraft mod制作经验分享> 1.8的所有纹理材质都需要一个Json来对其描述,这一块感觉是各大神的教程里面涉及最少最浅的,我就斗胆在这分享下我研究了 ...
    
			
    7. 
						
  7. 微信小程序开发工具（0.9.092300）下载地址，分享给没有公众号的小伙伴
			
    目前最新的v0.9.092300,不需要填AppID就能直接开发,也不需要破解了. OSX版本.WIN64.WIN32下载地址: http://pan.baidu.com/s/1qXOdkgG
    
			
    8. 
						
  8. css sprint 生成工具 bg2css
			
    今天需要改个css sprint,之前使用过一个工具蛮好使,但是就是想不起叫什么名字,网上搜了很久,才再次找到,原来是bg2css,今天记录下,以备以后不时之需. 下载地址:http://www.cs ...
    
			
    9. 
						
  9. 使用OpenFileDialog实现图片上传
			
    demo效果图:
    
			
    10. 
						
  10. c#将Excel数据导入到数据库的实现代码（OleDb）
			
    sing System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web ...
    
			
    11.