EasyUI DataGrid 添加 Footer

做后台管理界面时,EasyUI 的 DataGrid 经常会被用到,有时候一些总的统计数据不合适放在数据表格里,需要单独显示,这时候就可以放在Footer中显示而不必另外布局。

该怎么给 DataGrid 添加 Footer,Document 里面说的不是很详细,Demo 里面有这个例子,看 datagrid_data2.json 数据格式就明白了。
{"total":28,"rows":[
{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
],"footer":[
{"unitcost":19.80,"listprice":60.40,"productid":"Average:"},
{"unitcost":198.00,"listprice":604.00,"productid":"Total:"}
]}
还有一种更直观的方法是,在
data-options中用“footer”属性指定一个ID选择器,但是这个属性在Document中没有说明,至少我没找到。
<table class="easyui-datagrid" data-options="toolbar:'#tb',footer:'#ft'">
这个在官方例子 DataGrid Complex Toolbar 中可以看到

EasyUI DataGrid 添加 Footer的更多相关文章
- EasyUI datagrid添加右键菜单项
js代码 //动态加载数据表格 function InitData() { $('#grid').datagrid({ url: '/Home/Query?r=' + Math.random(), / ...
- easyui datagrid 显示 footer
1.设置 showFooter为true $grid = $dg.datagrid({ // fit: true, //fitColumns: true, // pagination: false, ...
- EasyUi Datagrid中footer renderFooter
默认的'rowStyler' 选项不支持footer,想让footer支持rowStyler的话,dategird就得重写.代码如下. var myview = $.extend({}, $.fn.d ...
- 为easyui datagrid 添加上下方向键移动
将以下脚本保存为 easyui-datagrid-moverow.js var DatagridMoveRow = (function($){ function DatagridMoveRow(gri ...
- EasyUI DataGrid 添加排序
这个事例演示了如何在点击列头的时候排序DataGrid中全部的列可以通过点击列头被排序.你可以定义可以被排序的列.默认的,列不能被排序除非你设置sortable属性为TRUE,下面是例子:标记 < ...
- easyui datagrid 每条数据后添加操作按钮
easyui datagrid 每条数据后添加“编辑.查看.删除”按钮 1.给datagrid添加操作字段:字段值 <table class="easyui-datagrid" ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(82)-Easyui Datagrid批量操作(编辑,删除,添加)
前言 有时候我们的后台系统表单比较复杂,做过进销存或者一些销售订单的都应该有过感觉 虽然Easyui Datagrid提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添 ...
- [转载]EasyUI中数据表格DataGrid添加排序功能
我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...
- Easyui datagrid 怎么添加操作按钮,rowStyler
说明:本篇文章主要是展示怎么设置easyUI datagrid的格式,包括行样式和列样式,以及添加操作按钮列 开发环境 vs2012 asp.net mvc4 c# 1.效果图 3.HTML代码 & ...
随机推荐
- MVC 4 插件化架构简单实现实例篇
ASP.NET MVC 4 插件化架构简单实现-实例篇 先回顾一下上篇决定的做法: 1.定义程序集搜索目录(临时目录). 2.将要使用的各种程序集(插件)复制到该目录. 3.加载临时目录中的程序集 ...
- 算法打基础——HashⅡ: 全域哈希与完美哈希
这一节涉及数学超级多,各种数论知识,各种不明觉厉! 看了几遍,才勉强看懂一些,所以这 篇稍微简单的介绍着两种hash table, 免得瞎说说错了. 这一讲的主要知识点是:1. 全域哈希及构造 ...
- 认知的SSH
认知的SSH 实习了三个月,对着SSH有着一定的认识了,就以自已认识的大概思路写一篇文章吧,留给以后的自已,也恳请各位博友们如果看到我的认识有过错的地方能帮我指正过来! 在写正文之前,先说说我这段时间 ...
- Cracking the Coding Interview(Trees and Graphs)
Cracking the Coding Interview(Trees and Graphs) 树和图的训练平时相对很少,还是要加强训练一些树和图的基础算法.自己对树节点的设计应该不是很合理,多多少少 ...
- Object-c学习之路八(NSArray(数组)遍历和排序)
今天学习了NSArray的遍历和排序,现在在这里做一下总结: 遍历现在实现了四中方法: 排序大概有三中方法:(代码中都有注释) 关于对象的排序还是以Student和Book为例 每个Student持有 ...
- easyui datagrid自定义操作列
通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接 我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar, 这样我们选择一行 ...
- 虚拟化平台cloudstack新版本的调试
虚拟化平台cloudstack(7)——新版本的调试 调试环境 ubuntu 12.04 JDK1.7 apache-maven-3.10 eclipse 4.2 Juno mysql 5 源码下载及 ...
- 读写分离子系统 - C# SQL分发子系统(ADO.NET,不支持EF)
读写分离子系统 - C# SQL分发子系统(ADO.NET,不支持EF) 这次介绍的这个框架只适用于中小项目,并且各个读写数据库结构是一致的情况,还要并且是写入数据库只有1台情况. 我们来看看这个子系 ...
- 关于JdbcTemplate的queryForList返回值
通过spring的jdbctemplate返回的list其实封装的是需要通过如下方法得到里面的内容的 public void getAllUsers() { List allUsers = new A ...
- hdu 4515 年月份模拟题
小Q系列故事——世界上最遥远的距离 Time Limit: 500/200 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) ...