范例:显示列值汇总行
<div id="div1" style="width:850px;"></div>
<script language="javascript"> var config = { "show_summary": true, "columns":[ {"title": "组织名称", "field": "orgName"}, {"title": "ID", "field": "id", "align": "center", "width": "30", fieldCal: true, calStyle: "min"}, {"title": "组织编号", "field": "orgCode", "align": "center", "width": "60"}, {"title": "描述", "field": "orgDesc", "align": "center", "width": "100"}, {"title": "操作人", "field": "operator", "align": "center", "width": "60"}, {"title": "总人数", "field": "count", "align": "center", "width": "60", fieldCal: true, calStyle: "sum"}, {"title": "薪水", "field": "salary", "align": "center", "width": "60", fieldCal: true, calStyle: "avg", digit: 2} ], "dataset":[ {"id": 1,"orgName": "城区分公司", "orgCode": "CQ", "operator": "cjm", "count": 200, "salary": 3000.50, "children":[ {"id": 5,"orgName": "城区卡品分销中心", "count": 100, "salary": 2000.00}, {"id": 6,"orgName": "先锋服务厅", "count": 50, "salary": 1000.00, "children":[ {"id": 7,"orgName": "chlid1", "count": 30, "salary": 1000.00}, {"id": 8,"orgName": "chlid2", "count": 20, "salary": 900.00}, {"id": 9,"orgName": "chlid3", "count": 20, "salary": 800.00, "children": [ {"id": 10,"orgName": "chlid3-1", "count": 10, "salary": 500.00}, {"id": 11,"orgName": "chlid3-2", "count": 10, "salary": 500.00}, {"id": 12,"orgName": "chlid3-3", "count": 10, "salary": 500.00}, {"id": 13,"orgName": "chlid3-4", "count": 10, "salary": 500.00} ]} ]}, {"id": 14,"orgName": "半环服务厅", "count": 10, "salary": 500.00} ]}, {"id": 2,"orgName": "清新分公司", "orgCode": "QX", "operator": "", "count": 10, "salary": 500.00}, {"id": 3,"orgName": "英德分公司", "orgCode": "YD", "operator": "", "count": 10, "salary": 500.00}, {"id": 4,"orgName": "佛冈分公司", "orgCode": "FG", "operator": "", "count": 10, "salary": 500.00} ] }; var treeGrid = jQuery("#div1").showTreeGrid(config); function _expandAll(){ treeGrid.expandAll(); } function _collapseAll(){ treeGrid.collapseAll(); } </script>
相关推荐
在官网上下了个treegrid-dnd.js实现拖拽,发现并没有太多条件限制,自己修改了一下,限制只能拖拽到比自己高一级别的父节点中,希望大家有用
- 配置TreeGrid:定义元素ID,设置数据源、列配置、事件处理等参数,然后调用layui.treeGrid()方法创建TreeGrid实例。 - 数据加载:可以通过异步请求或直接传入数据来填充TreeGrid。异步请求时,通常采用layui的...
Bootstrap Treegrid是一款基于Bootstrap框架和JavaScript的插件,用于在网页上展示数据为树形结构的表格。这个插件能够将传统的二维表格扩展为可折叠的树状结构,非常适合处理层次化数据,如组织结构、目录层级或者...
"TreeGrid-1.0.zip"很可能是一个包含TreeGrid相关组件或库的压缩包,版本号为1.0,可能是某个开发者或团队发布的早期版本。 TreeGrid的基本概念: 1. **树形结构**:TreeGrid的基础是树形结构,每个节点可以有子...
在"TreeGrid-1.1"中,我们看到了一个优化过的版本,旨在提供更好的用户体验,支持多种功能,包括子节点分页、列宽拖拽调整、勾选选择以及延迟加载。 1. **子节点分页**:在处理大量数据时,子节点分页是一种高效的...
easyui+jquery,其他组件数据(这里用的是列表ul)往treegrid树形表格里拖放数据,形成新的树形表格数据,自行引入css和js就可运行
1. **EasyUI TreeGrid**: EasyUI TreeGrid 结合了 Tree 和 Grid 的特性,可以展示层次结构的数据,并支持多列显示、排序、筛选等功能。它是 EasyUI 库中的一个重要组件,常用于管理复杂结构的数据。 2. **冻结列...
@ agile-central-technical-services / utils-treegrid派生的列 此模块提供Rally.ui.grid.TreeGridView的替代,它增加了对derivedColumnCfgs配置的支持,该配置接受从模型数据“派生”但不是模型本身上的字段的列...
$(this).treegrid('enableDnd', row?row.id:null); //上面的代码是demo中的,但是对于要保存更改到数据库显然走不通,需要向其他办法 //启用拖动排序 //enableDnd($('#datagrid_depttree')); } 就行了
- 文件管理:如文件系统、项目目录结构等,显示文件夹和文件的层次结构。 - 组织架构:企业内部部门、员工的层级关系展示。 - 商品分类:电商平台的商品类别和子类别的展示。 - 数据分析:数据挖掘和报告中的...
- 自定义列头:利用`formatter`函数实现列头的个性化展示和交互。 - 拓展功能:通过插件或自定义代码实现如导出数据、打印表格等额外功能。 总结来说,jqGrid是一个强大且灵活的前端数据管理工具,适用于需要展示...
TreeGrid表格是一种在WPF(Windows Presentation Foundation)框架下实现的高级数据展示控件,它结合了树形结构和网格视图的特点,提供了一种既能够展现层次关系又可以进行行列布局的数据展示方式。这种控件在处理...
扩展jquery.treegrid.extension.js,实现jquery-treegrid的懒加载,结合jquery.cookie.js来实现缓存,减缓页面大量数据加载
- `maxazan-jquery-treegrid-447d662` 这个版本号可能是项目的一个特定提交ID,意味着你可以从源码仓库获取到这个特定版本的源代码,以确保使用的版本与描述一致。 - **版本更新**:随着时间的推移,开发者会发布新...
在初始化 Treegrid 时,我们已经根据 `ProductType` 的值设置了 `hidden` 属性,例如 `ishowPack` 和 `ishowMirro` 分别控制了是否显示与镜像相关的列。 总结来说,要实现在 jQuery Easyui Treegrid 中显示并管理复...
TreeGrid是一种将表格和树形结构结合的数据展示控件,常用于Java和JavaScript开发中,以提供更加灵活和丰富的数据展示方式。它允许用户在单个视图中查看层次结构数据,同时支持展开、折叠、排序和筛选等功能。在本...
bootstrap-table-treegrid.js
jquery-treegrid.js: 用于显示树状表格 sqlalchemy-mptt: 配置数据模型为“左右值树”数据结构 说明 本示例前端树形表格依赖 jquery-treegrid.js 插件;后端树状数据模型需要设计成“左右值树”数据结构,因此 Tree ...
- Meta标签用于设置页面的基本信息,如viewport用于优化移动设备显示,charset指定字符编码。 - CSS和JS文件的引用,确保页面样式和行为的正确加载。 总结,这个博客系统采用现代Web开发技术,前后端分离,同时...
- 直接SQL查询:首先执行一条SQL语句获取日志总数,再根据当前页码和每页显示条数执行另一条SQL语句来获取具体数据。 - 使用MyBatis Plus:该框架内置了分页功能,可以直接调用其提供的API来完成分页查询,并将...