<!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. Linux Zynq GPIO中断
			
    注册中断:对每个pin进行循环遍历for (pin_num = 0; pin_num < min_t(int, ZYNQ_GPIO_NR_GPIOS,  (int)chip->ngpio) ...
    
			
    2. 
						
  2. 进了ACM之后，我才清楚了自己的方向！！！
			
    2015年8月29日,从郴州比完赛后,状况并没有想象中的乐观,我被卡在了一个数学题上,本来以为这个题目真的是很容易,天真的以为打表就可以敲的出来,可是并没有,横在了一个结束条件上面,比完赛后真想抽自己 ...
    
			
    3. 
						
  3. poj 1149 最大流
			
    题目链接:http://poj.org/problem?id=1149 #include <cstdio> #include <cmath> #include <algo ...
    
			
    4. 
						
  4. poj 1161 最短路构图
			
    题目链接:http://poj.org/problem?id=1161 #include <cstdio> #include <cmath> #include <algo ...
    
			
    5. 
						
  5. uva12118
			
    一开始以为直接算联通块个数就行了 后来发现还得分联通块里的奇点... 还要注意m = 0的情况... #include<iostream> #include<algorithm> ...
    
			
    6. 
						
  6. Android 更新UI的两个方法
			
    Android 更新UI的两个方法 在Android的开发过程中,常常需要适时的更新UI.Androd中的UI是在主线程中更新的.如果在主线程之外的线程中直接更新,就会出现报错并抛出异常: andro ...
    
			
    7. 
						
  7. 实现O(1)时间复杂度带有min和max 函数的栈
			
    仅仅是演示实现.不考虑栈使用的数据结构是vector 还是其它容器. 代码例如以下 #include <iostream> #include <vector> using na ...
    
			
    8. 
						
  8. 常用的bat命令
			
    获取输入法adb shell settings get secure default_input_method修改输入法adb shell settings put secure default_in ...
    
			
    9. 
						
  9. PHP 計算字符串長度函數
			
    PHP內置的字符串長度函數strlen無法正確處理中文字符串,它得到的只是字符串所占的字節數.對於GB2312的中文編碼,strlen得到的值是漢字個數的2倍,而對於UTF-8編碼的中文,就是3倍的差 ...
    
			
    10. 
						
  10. Liunx Shell入门
			
    本人也是初学习Liunx,如有错误请指出.Liunx版本:Ubuntu 14.04 一.Liunx命令基础 在Ubuntu下打开终端快捷键为:ctrl+Alt+T Liunx命令的基本格式:comma ...
    
			
    11.