jquery easy ui 学习 （8）basic treegrid
2024-09-29 01:18:00
<!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"
}]
}]
}]
最新文章
- 发现 OpenStack: 架构、功能和交互
- SQL0946N错误及DB2事务日志
- Mysql 该如何 Entity Framework 数据库迁移 和 如何更好的支持EntityFramework.Extended
- 使用JavaScript的history对象来实现页面前进后退(go/back/forward)。
- RSS与公众号
- javascript url 相关函数(escape/encodeURL/encodeURIComponent区别)
- WPF读书笔记（第一天）
- 解决Item控件抢占焦点
- windows 查看文件被哪个进程占用
- OpenGL鼠标拖拽
- DIY电源拓扑线
- [tem]最长上升子序列
- Python(四) 列表元组
- DirectX之顶点法线的计算
- 11月26日11月26日，周日在家practice.基本了解了layouts and Rending (guides); gem font-awesome-rails的实例用法；建立路径route, member..do的实际例子
- 第二阶段Sprint7
- php常用的时间函数
- css 画的动画表情
- Xcode9新变化
- resin 4.0 项目的配置