zoukankan      html  css  js  c++  java
  • easyUI treeGrid 的小例子

    今天由于业务的需要,于是采用了easyui的的treeGrid控件。

    <table title="Folder Browser" class="easyui-treegrid" style="1000px;height:800px"
    			data-options="
    				url: 'treeData.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>
    

      treeData.json

    [{
        "id":1,
        "name":"C",
        "size":"",
        "date":"02/19/2010",
        "children":[{
            "id":2,
            "name":"Program Files",
            "size":"120 MB",
            "date":"03/20/2010",
            "children":[{
                "id":21,
                "name":"Java",
                "size":"",
                "date":"01/13/2010",
                "state":"closed",
                "children":[{
                    "id":211,
                    "name":"java.exe",
                    "size":"142 KB",
                    "date":"01/13/2010"
                },{
                    "id":212,
                    "name":"jawt.dll",
                    "size":"5 KB",
                    "date":"01/13/2010"
                }]
            },{
                "id":22,
                "name":"MySQL",
                "size":"",
                "date":"01/13/2010",
                "state":"closed",
                "children":[{
                    "id":221,
                    "name":"my.ini",
                    "size":"10 KB",
                    "date":"02/26/2009"
                },{
                    "id":222,
                    "name":"my-huge.ini",
                    "size":"5 KB",
                    "date":"02/26/2009"
                },{
                    "id":223,
                    "name":"my-large.ini",
                    "size":"5 KB",
                    "date":"02/26/2009"
                }]
            }]
        },{
            "id":3,
            "name":"eclipse",
            "size":"",
            "date":"01/20/2010",
            "children":[{
                "id":31,
                "name":"eclipse.exe",
                "size":"56 KB",
                "date":"05/19/2009"
            },{
                "id":32,
                "name":"eclipse.ini",
                "size":"1 KB",
                "date":"04/20/2010"
            },{
                "id":33,
                "name":"notice.html",
                "size":"7 KB",
                "date":"03/17/2005"
            }]
        }]
    }]

    执行效果如图:

  • 相关阅读:
    1869六度分离
    hdu 2066 一个人的旅行
    HDU1424搬寝室
    poj 1511 Invitation Cards
    hdu 3999The order of a Tree
    hdu 2680 Choose the best route
    Hdu 3117 Fibonacci Numbers
    hdu 2962 Trucking
    钽电容黑色和黄色的区别
    ALTER FPGA通过软件设置上拉(转)
  • 原文地址:https://www.cnblogs.com/huzi007/p/4269299.html
Copyright © 2011-2022 走看看