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"
            }]
        }]
    }]

    执行效果如图:

  • 相关阅读:
    centos7之防止root密码被破解
    近期codeforces做题的总结?(不定期更新)
    小程序分享微信好友
    小程序自定义头部导航栏滑动颜色渐变
    小白快速上手的react.js教程
    架构型设计模式-同步模式
    仿vue-cli写一个简易的脚手架
    VUE基础知识篇-vue从零开始学VUE
    彻底理解Vue组件间7种方式通信
    设计模式--观察者模式
  • 原文地址:https://www.cnblogs.com/huzi007/p/4269299.html
Copyright © 2011-2022 走看看