`
raymond.chen
  • 浏览: 1433459 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

treegrid-3.0范例:显示列值汇总行

 
阅读更多

范例:显示列值汇总行

 

<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>

 


 

  • 大小: 51.2 KB
分享到:
评论

相关推荐

    easyui treegrid-dnd插件修改版

    在官网上下了个treegrid-dnd.js实现拖拽,发现并没有太多条件限制,自己修改了一下,限制只能拖拽到比自己高一级别的父节点中,希望大家有用

    基于layui的树表格-treeGrid

    - 配置TreeGrid:定义元素ID,设置数据源、列配置、事件处理等参数,然后调用layui.treeGrid()方法创建TreeGrid实例。 - 数据加载:可以通过异步请求或直接传入数据来填充TreeGrid。异步请求时,通常采用layui的...

    bootstrap-treegrid实现树形表格.zip

    Bootstrap Treegrid是一款基于Bootstrap框架和JavaScript的插件,用于在网页上展示数据为树形结构的表格。这个插件能够将传统的二维表格扩展为可折叠的树状结构,非常适合处理层次化数据,如组织结构、目录层级或者...

    TreeGrid-1.0.zip

    "TreeGrid-1.0.zip"很可能是一个包含TreeGrid相关组件或库的压缩包,版本号为1.0,可能是某个开发者或团队发布的早期版本。 TreeGrid的基本概念: 1. **树形结构**:TreeGrid的基础是树形结构,每个节点可以有子...

    TreeGrid-1.1

    在"TreeGrid-1.1"中,我们看到了一个优化过的版本,旨在提供更好的用户体验,支持多种功能,包括子节点分页、列宽拖拽调整、勾选选择以及延迟加载。 1. **子节点分页**:在处理大量数据时,子节点分页是一种高效的...

    easyui-treegrid-其他格式组件拖放

    easyui+jquery,其他组件数据(这里用的是列表ul)往treegrid树形表格里拖放数据,形成新的树形表格数据,自行引入css和js就可运行

    utils-treegrid-derived-columns:扩展Rally.ui.grid.TreeGridView以支持“派生的列”(列不属于数据模型)

    @ agile-central-technical-services / utils-treegrid派生的列 此模块提供Rally.ui.grid.TreeGridView的替代,它增加了对derivedColumnCfgs配置的支持,该配置接受从模型数据“派生”但不是模型本身上的字段的列...

    树形表格 treetable 完整版 带演示demo例子

    - 文件管理:如文件系统、项目目录结构等,显示文件夹和文件的层次结构。 - 组织架构:企业内部部门、员工的层级关系展示。 - 商品分类:电商平台的商品类别和子类别的展示。 - 数据分析:数据挖掘和报告中的...

    treegrid-dnd.js

    $(this).treegrid('enableDnd', row?row.id:null); //上面的代码是demo中的,但是对于要保存更改到数据库显然走不通,需要向其他办法 //启用拖动排序 //enableDnd($('#datagrid_depttree')); } 就行了

    easyui-treegrid冻结右侧列插件.zip

    1. **EasyUI TreeGrid**: EasyUI TreeGrid 结合了 Tree 和 Grid 的特性,可以展示层次结构的数据,并支持多列显示、排序、筛选等功能。它是 EasyUI 库中的一个重要组件,常用于管理复杂结构的数据。 2. **冻结列...

    jqgrid序列

    - 自定义列头:利用`formatter`函数实现列头的个性化展示和交互。 - 拓展功能:通过插件或自定义代码实现如导出数据、打印表格等额外功能。 总结来说,jqGrid是一个强大且灵活的前端数据管理工具,适用于需要展示...

    TreeGrid表格

    TreeGrid表格是一种在WPF(Windows Presentation Foundation)框架下实现的高级数据展示控件,它结合了树形结构和网格视图的特点,提供了一种既能够展现层次关系又可以进行行列布局的数据展示方式。这种控件在处理...

    jquery-treegrid 树形表格组件

    - `maxazan-jquery-treegrid-447d662` 这个版本号可能是项目的一个特定提交ID,意味着你可以从源码仓库获取到这个特定版本的源代码,以确保使用的版本与描述一致。 - **版本更新**:随着时间的推移,开发者会发布新...

    TreeGrid开发手册

    TreeGrid是一种将表格和树形结构结合的数据展示控件,常用于Java和JavaScript开发中,以提供更加灵活和丰富的数据展示方式。它允许用户在单个视图中查看层次结构数据,同时支持展开、折叠、排序和筛选等功能。在本...

    bootstrap-table-treegrid.js

    bootstrap-table-treegrid.js

    flask-admin-tree-table-demo:flask-admin 树状表格示例

    jquery-treegrid.js: 用于显示树状表格 sqlalchemy-mptt: 配置数据模型为“左右值树”数据结构 说明 本示例前端树形表格依赖 jquery-treegrid.js 插件;后端树状数据模型需要设计成“左右值树”数据结构,因此 Tree ...

    4.博客系统代码文档1

    - Meta标签用于设置页面的基本信息,如viewport用于优化移动设备显示,charset指定字符编码。 - CSS和JS文件的引用,确保页面样式和行为的正确加载。 总结,这个博客系统采用现代Web开发技术,前后端分离,同时...

    动吧项目笔记保存云端

    - 直接SQL查询:首先执行一条SQL语句获取日志总数,再根据当前页码和每页显示条数执行另一条SQL语句来获取具体数据。 - 使用MyBatis Plus:该框架内置了分页功能,可以直接调用其提供的API来完成分页查询,并将...

    bootstrap-treegrid.js

    自己封装的bootstrap-treegrid.js来实现树形菜单

    jquery.treegrid.extension.js

    扩展jquery.treegrid.extension.js,实现jquery-treegrid的懒加载,结合jquery.cookie.js来实现缓存,减缓页面大量数据加载

Global site tag (gtag.js) - Google Analytics