<!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. 关于DocumentCompleted事件
			
    关于DocumentCompleted事件,MSDN给出的解释是在文档加载完毕后执行,但是在我的程序中DocumentCompleted却被多次调用,查了一下资料,大概出现了以下几种情况. 1.Web ...
    
			
    2. 
						
  2. ie中弹出框中元素的定位
			
    用selenium在ie8浏览器中定位一个弹出框时,直接用ie developer tools可能不一定能定位到,有一个解决的办法是直接在url后面加上#noHide,刷新后,然后再用ie devel ...
    
			
    3. 
						
  3. 动态规划——F 最大矩阵和
			
    Given a two-dimensional array of positive and negative integers, a sub-rectangle is any contiguous s ...
    
			
    4. 
						
  4. Listview加载更多是，恢复到原来的位置，如果不加特殊处理，总是跳转第一条
			
    1.记录listView滚动到的位置的坐标,然后利用listView.scrollTo精确的进行恢复 listView.setOnScrollListener(new OnScrollListener ...
    
			
    5. 
						
  5. Clouds
			
    1.Eucalyptus: Eucalyptus is a Linux-based software architecture that implements scalable private and ...
    
			
    6. 
						
  6. 第一节：Scrapy开源框架初探
			
       Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中.  具体开发流程如下:   一.确定待抓取网站 当您需要从某 ...
    
			
    7. 
						
  7. JQuery实现悬浮工具条
			
    实现效果如下 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
    
			
    8. 
						
  8. Jupyter Notebook 对LaTeX 的支持
			
    Jupyter的Markdown模式比我原来想想的更加强大:它支持LaTeX! 支持的特性不多,应该能满足一般的需求了.
    
			
    9. 
						
  9. js事件防止冒泡
			
    原文连接:http://www.cnblogs.com/jams742003/archive/2009/08/29/1556187.html 1. 事件目标 如今.事件处理程序中的变量event保存着 ...
    
			
    10. 
						
  10. searchbar的使用介绍
			
    searchBar的使用介绍 首先如何创建一个SearchBar实例: self.searchBar = [[UISearchBar alloc] initWithFrame: CGRectMake( ...
    
			
    11.