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代码 & ...
随机推荐
- Stimulsoft.Report.web viewer控件添加按钮
当你购买了带源码的时候,你可以对源码进行修改以达到自己想要的效果,比较这里讲到的,向viewer控件工具栏添加按钮. 通过源码目录可以看出我们需要修改的有两部分代码 红色方块圈中的部分,[StiWeb ...
- spring.NET的依赖注入
谈谈自己了解的spring.NET的依赖注入 spring.net里实现了控制反转IOC(Inversion of control),也即依赖注入DI(Dependency Injection), ...
- [笔记] OS X and iOS 内核开发
一.KEXT包的安全性说明 KEXT 程序包及其包含的所有文件及文件夹必须属于 root 用户(用户 id 是 0) KEXT 程序包及其包含的所有文件及文件夹必须属于 wheel 组(组 id 是 ...
- [原]iOS中 Web 页面与 Native Code 的一种通信方式
在 iOS 开发中,Web 页面与 Native Code 通信可以分为两个方面: 1.Native Code 调用 Web 页面的方法:主要是调用页面中的 Javascript 函数. 2.Web ...
- xcode5向APP store上传应用的时候注意点
最近我在向appstore 上传应用的时候遇到了各种问题,由于网上的一些教程都是很久以前写的了,现在发布网站有些改动,所以自己走了很多弯路,不多说了,自己记录下犯下的错误吧.我是按照这片博客操作的:点 ...
- Ruby的对象模型
目录 备注对象模型无图无真相基本规则代码示例如何修改Singleton Class?如何修改类型,如Child?类型方法是特殊的实例方法,这些方法定义在类型的Singleton Class中.备注 备 ...
- asp.net mvc框架的一些切入点
IhttpModule+配置文件,对请求进行进一步的整理.过滤与转发: global文件中以Application_xx的保护方法进行切入的方式,此方法等同于IHttpModule方法.IHttpMo ...
- oracle exp、imp实现导出导入
一.说明 oracle 的exp/imp命令用于实现对数据库的导出/导入操作; exp命令用于把数据从远程数据库服务器导出至本地,生成dmp文件; imp命令用于把本地的数据库dmp文件从本地导 ...
- js在IE浏览器和非IE浏览器中的兼容性问题
下面列出IE和非IE中常见的一些js兼容性问题. //window.event IE:有window.event对象 非IE:没有window.event对象.可以通过给函数的参数传递eve ...
- Django入门实践(二)
Django入门实践(二) Django模板简单实例 上篇中将html写在了views中,这种混合方式(指Template和views混在一起)不适合大型开发,而且代码不易管理和维护,下面就用Djan ...