<!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. C语言数据类型的理解
			
    数据类型的定义: 作为一种语言,必然有所谓的语言组成要素,就像日常生活中人们之间的交流一样,首先会有字,字再成词组,再来就是句子,后来呢就是段落等等.当然不同的字,词,句这些在一起,就会有不同的表达效 ...
    
			
    2. 
						
  2. 移动UI自动化-Page Objects Pattern
			
    移动UI自动化,看起来美好,践行起来却难.做个目光短见的务实主义者.Page Objects Pattern是Selenium官方推崇的方式,最近研究写测试用例最佳实践之Page Objects,同时 ...
    
			
    3. 
						
  3. VSTS负载测试——如何：使用 SQL 创建结果存储区
			
    原文地址:http://www.cnblogs.com/chenxizhang/archive/2009/06/01/1493939.html 原文参见:http://msdn.microsoft.c ...
    
			
    4. 
						
  4. Codeforces Round #324 (Div. 2)解题报告
			
    ---恢复内容开始--- Codeforces Round #324 (Div. 2) Problem A 题目大意:给二个数n.t,求一个n位数能够被t整除,存在多组解时输出任意一组,不存在时输出“ ...
    
			
    5. 
						
  5. IOT数据库选型——NOSQL，MemSQL，cassandra，Riak或者OpenTSDB，InfluxDB
			
    IoT databases should be as flexible as required by the application. NoSQLdatabases -- especially key ...
    
			
    6. 
						
  6. 关于 Head  First  SQL  中文版
			
    我想谈谈 我对于Head  First  SQL  中文版的一些看法 事实上关于我翻译的这个Head  First  SQL 中文版..我自觉得:的确翻译得非常烂.. 和翻译Head  First   ...
    
			
    7. 
						
  7. .Net Framework 4.0安装cmd命令
			
    在安装系统以后和.Net FrameWork 后,通过cmd编译编写的程序时总是提示编译错误.可以通过cmd命令安装相应的.net framework版本. 具体步骤如下: 1.以管理员身份打开cmd ...
    
			
    8. 
						
  8. 再探java基础——对面向对象的理解(2)
			
    对象.类和抽象类的区别 对象是一个具体的事物,类是对具有相同属性和行为的一组对象的抽象,对象是类的一个一个人的具体实例:抽象类是一种特殊的类,是对类的进一步抽象,抽象类不能被实例化. 类.抽象类和接口 ...
    
			
    9. 
						
  9. Bigcommerce：intershop编程经验总结
			
    1.修改或者添加网页Title,Keywords,Decoration的代码: $full_url = $_SERVER['REQUEST_URI'];  //获取请求的url $letter = s ...
    
			
    10. 
						
  10. PHPExcel讀取excel數據
			
    require_once 'PHPExcel.php'; $PHPReader = new PHPExcel_Reader_Excel2007(); $filePath = 'wjyl.xlsx';  ...
    
			
    11.