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代码 & ...
随机推荐
- 常用oracle语句-------------------------------------------》(笔记)
Orale常用语句 1:查询指定表名的字段 select * from sys.user_tab_columns where table_name=表名 //查询指定表名的字段 2: 查询数据库参 ...
- OpenStack调研
OpenStack调研:OpenStack是什么.版本演变.组件关系(Havana).同类产品及个人感想 一点调研资料,比较浅,只是觉得部分内容比较有用,记在这里: 首先,关于云计算,要理解什么是SA ...
- 企业架构研究总结(39)——TOGAF架构能力框架之架构委员会和架构合规性
3. 架构委员会 正如前面所说,一个用来对架构治理策略的实现进行监督的跨组织的架构委员会是架构治理策略成功的主要要素之一.架构委员会应该能够代表所有主要干系人的需求,并且通常还需要对整个架构的审查及维 ...
- 对"一维最大子数组和"问题的思考
对"一维最大子数组和"问题的思考(homework-01) 一维最大子数组和问题,即给定一个数组,在它所有的连续子数组的和中,求最大的那个和.“最大子数组和”是一个很好的IT面试考 ...
- Object-c学习之路四(oc内存管理autorelease)
再以Student和Book为例作为展示: 1.主函数: // main.m // MemoryManagement2 // // Created by WildCat on 13-7-24. // ...
- java中的volatile关键字
java中的volatile关键字 一个变量被声明为volatile类型,表示这个变量可能随时被其他线程改变,所以不能把它cache到线程内存(如寄存器)中. 一般情况下volatile不能代替syn ...
- Windbg是windows平台上强大的调试器
基础调试命令 - .dump/.dumpcap/.writemem/!runaway Windbg是windows平台上强大的调试器,它相对于其他常见的IDE集成的调试器有几个重要的优势, Windb ...
- 学习Machine Leaning In Action(四):逻辑回归
第一眼看到逻辑回归(Logistic Regression)这个词时,脑海中没有任何概念,读了几页后,发现这非常类似于神经网络中单个神经元的分类方法. 书中逻辑回归的思想是用一个超平面将数据集分为两部 ...
- poj-3898 Software Industry Revolution DP
题目链接: http://poj.org/problem?id=3898 题目意思: 有两个字符串,模式串和原串.每个字母有一个权值,a为1,b为2,...z为26 模式串中‘ ?’可以被一个字母代替 ...
- Hadoop1.0.4伪分布式安装
前言: 目前,学习hadoop的目的是想配合其它两个开源软件Hbase(一种NoSQL数据库)和Nutch(开源版的搜索引擎)来搭建一个知识问答系统,Nutch从指定网站爬取数据存储在Hbase数据库 ...