easyui---treegrid 实例

原创 2013年12月06日 11:26:48

1

	<div style="margin:10px 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>

2


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


EazyUI TreeGrid分页、查询

话说刚从ligerui转过来的时候 发现eazyui的treegrid好恶心的说,在ligerui中市容treegrid只需要设置id-pid-treefIle三个字段就会自动帮你出现树表格的,而在e...
  • qq873113580
  • qq873113580
  • 2015年07月01日 11:06
  • 3382

easyUI treeGrid异步加载,前端+后台实现,包括增删改等具体功能

说明前端使用的是easyUI 1.3.6+jq 后台使用的是springMVC 初始化调用后台getCourse方法,返回的json数据格式如下:{"total":3,"rows":[ {...
  • hwj3747
  • hwj3747
  • 2016年08月02日 14:26
  • 4722

SSH+Easyui之TreeGrid树形展现数据

介绍Struts2、Spring、Hibernate与easyui的TreeGrid结合,以树的形式展现数据库中数据。在开发中会碰到很多需要以树的形式展现数据,如导航条、权限管理模块中的资源管理,通常...
  • a78460750
  • a78460750
  • 2014年08月24日 21:57
  • 5888

SSH+Easyui之TreeGrid树形展现数据

  • 2014年08月24日 22:07
  • 20.13MB
  • 下载

easyui treegrid-dnd插件修改版

  • 2015年11月09日 10:22
  • 12KB
  • 下载

EasyUI实现两个treegrid互相拖放

  • 2015年11月19日 10:08
  • 26KB
  • 下载

jquery easyui treegrid 拖拽demo

  • 2014年05月22日 09:47
  • 289KB
  • 下载

EASYUI TREEGRID

  • 2017年10月30日 15:58
  • 9KB
  • 下载

EasyUI treegrid json格式生成方法

  • 2015年06月04日 01:31
  • 33KB
  • 下载

jquery easyui treegrid demo 详解

  • 2013年12月16日 14:05
  • 243KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyui---treegrid 实例
举报原因:
原因补充:

(最多只允许输入30个字)