范例:动态加载数据、右键菜单等
<input type="button" value="刷新" onclick="_refresh()"> <br><br><textarea id="currentRow" rows="4" cols="100"></textarea> <br><br><div id="div1" style="width:850px;"></div>
<script language="javascript"> var config = { "show_summary": true, "chk_show": true, chk_cascade_select_children: true, chk_cascade_select_parent: true, "id_field": "id", "dataurl": "org/getChildrens", "columns":[ {"title": "组织名称", "field": "orgName"}, {"title": "组织编号", "field": "orgCode", "align": "center", "width": "60"}, //{"title": "描述", "field": "orgDesc", "align": "center", "width": "100"}, {"title": "操作人", "field": "operator", "align": "center", "width": "50"}, {"title": "总人数", "field": "count", "align": "center", "width": "50", "defaultValue": "0", "fieldCal": true, "calStyle": "sum"}, {"title": "薪水", "field": "salary", "align": "center", "width": "50", "defaultValue": "0.0", "fieldCal": true, "calStyle": "avg", digit: 2}, {"title": "操作日期", "field": "operateTime", "align": "center", "width": "70"}, {"title": "进度", "width": "100", "handler": "jdHandler"}, {"title": "操作", "width": "100", "handler": "operateHandler", "align": "center"} ], "menus":[ {"title": "展开节点", "url": "http://www.163.com?id=#id#&orgCode=#orgCode#", "target": "_blank"}, {"title": "折叠节点", "url": "http://www.163.com?2", "target": "_self"}, {"title": "删除节点", "url": "http://www.163.com?3", "target": "_blank"}, {"title": "刷新"} ] }; //方法返回单元格的自定义显示内容 function jdHandler(trid, fieldValue, rowdata, colMeta){ var n = Math.floor(Math.random()*(100-1))+1; return "<div style=\"width:" + n + ";background:red;height:100%;\">" + n + "</div>"; } function operateHandler(trid, fieldValue, rowdata, colMeta){ var s = ""; s += "<a href='javascript:void(0)' style='color:blue'>查看</a> "; s += "<a href='javascript:void(0)' style='color:blue'>编辑</a> "; s += "<a href='javascript:void(0)' style='color:blue'>删除</a>"; return s; } var treeGrid = jQuery("#div1").showTreeGrid(config); function _refresh(){ treeGrid.show(); } </script>
String parent_id = request.getParameter("parent_id"); if(StringUtil.isEmpty(parent_id)) { parent_id = "0"; } List<Organizations> list = organizationsService.selectByParentId(new Long(parent_id)); String result = JSONArray.fromObject(object).toString(); return result;
[{"count":3,"id":4,"operateTime":"2015-12-01","operator":"","orgCode":"FG","orgDesc":"","orgName":"佛冈分公司","parentOrgId":0,"salary":1,"status":1},{"count":2,"id":1,"operateTime":"2015-12-01","operator":"","orgCode":"CQ","orgDesc":"","orgName":"城区分公司","parentOrgId":0,"salary":5,"status":1},{"count":7,"id":2,"operateTime":"2015-12-01","operator":"","orgCode":"QX","orgDesc":"","orgName":"清新分公司","parentOrgId":0,"salary":5,"status":1},{"count":6,"id":3,"operateTime":"2015-12-01","operator":"","orgCode":"YD","orgDesc":"","orgName":"英德分公司","parentOrgId":0,"salary":5,"status":1}]
相关推荐
动态加载(也称为懒加载)是一种优化性能的技术,只在用户需要时才加载数据,而不是一次性加载所有数据,这对于处理大量数据或层级结构尤其有用,可以显著提升页面加载速度和用户体验。 本项目在官方Bootstrap ...
在官网上下了个treegrid-dnd.js实现拖拽,发现并没有太多条件限制,自己修改了一下,限制只能拖拽到比自己高一级别的父节点中,希望大家有用
Bootstrap Treegrid是一款基于Bootstrap框架和JavaScript的插件,用于在网页上展示数据为树形结构的表格。这个插件能够将传统的二维表格扩展为可折叠的树状结构,非常适合处理层次化数据,如组织结构、目录层级或者...
- 配置TreeGrid:定义元素ID,设置数据源、列配置、事件处理等参数,然后调用layui.treeGrid()方法创建TreeGrid实例。 - 数据加载:可以通过异步请求或直接传入数据来填充TreeGrid。异步请求时,通常采用layui的...
2. **表格数据**:TreeGrid中的每个树节点都可以展示表格数据,例如列头、行数据等,这使得它可以同时展示复杂的数据集,并支持排序、筛选、分页等功能。 关键知识点: 1. **数据模型**:TreeGrid的数据模型通常...
在"TreeGrid-1.1"中,我们看到了一个优化过的版本,旨在提供更好的用户体验,支持多种功能,包括子节点分页、列宽拖拽调整、勾选选择以及延迟加载。 1. **子节点分页**:在处理大量数据时,子节点分页是一种高效的...
EasyUI的TreeGrid组件是一个强大的...在实际开发中,根据项目需求,你可能还需要处理分页、排序、过滤等其他功能,但这部分的实现原理与动态加载数据类似,主要是通过调整Ajax请求的参数和处理返回的JSON数据来完成。
easyui+jquery,其他组件数据(这里用的是列表ul)往treegrid树形表格里拖放数据,形成新的树形表格数据,自行引入css和js就可运行
- 数据绑定:支持动态加载子节点,减少一次性加载大量数据带来的性能问题。 - 自定义样式:允许开发者自定义单元格样式,满足不同场景的展示需求。 2. **应用场景** - 文件管理:如文件系统、项目目录结构等,...
TreeGrid表格是一种在WPF(Windows Presentation Foundation)框架下实现的高级数据展示控件,它结合了树形结构和网格视图的特点,提供了一种既能够展现层次关系又可以进行行列布局的数据展示方式。这种控件在处理...
- 加载数据:根据配置加载数据,可以是静态数据,也可以是从服务器动态获取的数据。 **2. jqGrid的特性** - 数据处理:支持JSON、XML、CSV等多种数据格式,能够方便地与各种后端数据接口进行交互。 - 分页:提供...
动态加载则需要配置URL,TreeGrid会自动发送请求获取数据。数据格式通常是JSON,包含`id`、`parent`(父节点ID)和可选的其他字段。 5. 功能扩展:EasyUI TreeGrid支持多种功能,如排序、分页、搜索等。这些功能...
@ agile-central-technical-services / utils-treegrid派生的列 此模块提供Rally.ui.grid.TreeGridView的替代,它增加了对derivedColumnCfgs配置的支持,该配置接受从模型数据“派生”但不是模型本身上的字段的列...
扩展jquery.treegrid.extension.js,实现jquery-treegrid的懒加载,结合jquery.cookie.js来实现缓存,减缓页面大量数据加载
在 EasyUI 中,"异步树" 是一种非常重要的组件,它允许用户在无需一次性加载所有数据的情况下,根据需要动态地加载树形结构的数据。这种特性对于处理大量数据或层次复杂的结构尤其有用,可以显著提升用户体验,减少...
$(this).treegrid('enableDnd', row?row.id:null); //上面的代码是demo中的,但是对于要保存更改到数据库显然走不通,需要向其他办法 //启用拖动排序 //enableDnd($('#datagrid_depttree')); } 就行了
在实现无限层级菜单时,我们需要考虑如何动态加载子节点以及如何进行数据组织和呈现。 1. **数据结构设计**: 在处理无限层级菜单时,首先需要定义合适的数据结构来存储菜单信息。通常,每个菜单项包含ID、父ID、...
`TreeGrid`的一个重要特性是支持异步加载数据。这意味着当用户展开某个节点时,该节点下的子节点才会被请求并加载到界面上。这种方式能够显著提高应用的性能和响应速度,特别是在处理大量数据时更为明显。 #### 三...
- **动态加载**:支持异步加载子节点,提高页面性能,特别是处理大量数据时。 - **排序**:提供了列排序功能,用户可以按某一列对数据进行升序或降序排列。 - **搜索与过滤**:内置搜索和过滤机制,帮助用户快速定位...
- 数据加载:动态加载子节点数据,减少初次加载时的数据量,提高性能。 - 表格操作:排序、筛选、编辑等,通常需要处理底层数据并刷新视图。 5. **性能优化**: - 使用虚拟滚动技术,只渲染可视区域内的行,减少...