easyUI treeGrid 的小例子
EasyUI 例子
2023-09-27 14:20:50 时间
今天由于业务的需要,于是采用了easyui的的treeGrid控件。
<table title="Folder Browser" class="easyui-treegrid" style="width: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"
}]
}]
}]
执行效果如图:
相关文章
- easyui plugin —— etreegrid:CRUD Treegrid
- easyUI layout 中使用tabs+iframe解决请求两次方法
- Js:消息弹出框、获取时间区间、时间格式、easyui datebox 自定义校验、表单数据转化json、控制两个日期不能只填一个
- 窗口-EasyUI Window 窗口、EasyUI Dialog 对话框、EasyUI Messager 消息框
- EasyUI Progressbar 进度条
- EasyUI Pagination 分页
- JS动态修改页面EasyUI datebox不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案
- easyui validatebox 验证集合
- easyUI datagrid中checkbox选中事件以及行点击事件,翻页之后还可以选中
- maven+springMVC+mybatis+easyUI管理用户增删改查
- easyui的textbox和validatebox的 赋值区别
- jquery easyui datagrid 分页显示总记录数
- easyui以及js前端开发常见问题、用法整理(最重要的样式和图标自定义)