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代码 & ...
随机推荐
- Hive中Bucket的应用
网友南京-李先森给了他收集的一些资料,如下: Buckets 对指定列计算 hash,根据 hash 值切分数据,目的是为了并行,每一个 Bucket 对应一个文件.如将 user 列分散至 32 个 ...
- C/C++基础知识总结——多态性
1. 多态性的概述 1.1 多态是指同样的消息被不同类型的对象接收时导致不同的行为.所谓消息是指对垒的成员函数的调用,不同行为是指不同的实现. 1.2 多态的实现 (1) 实现角度讲多态可分为两类:编 ...
- 最长递增子序列(Longest Increase Subsequence)
问题 给定一个长度为N的数组,找出一个最长的单调自增子序列(不一定连续,但是顺序不能乱).例如:给定一个长度为6的数组A{5, 6, 7, 1, 2, 8},则其最长的单调递增子序列为{5,6,7,8 ...
- Go Code
目录 备注工作空间(Workspaces)GOPATH环境变量包路径(Package Path)你的第一个程序你的第一个类库包名字(Package Name)测试集成备注 备注返回目录 此文主要是对官 ...
- 新时代的Vim C++自动补全插件 clang_complete
Vimer的福音 新时代的Vim C++自动补全插件 clang_complete 使用vim的各位肯定尝试过各种各样的自动补全插件,比如说大名鼎鼎的 OmniCppComplete .这一类的插 ...
- Java 简单工厂模式
首先 定义一接口 package com.org; public interface SampleInterface { public void print(String s); } 定义两个接口的实 ...
- CSS border-radius 圆角
本文转自:http://www.kwstu.com/Admin/ViewArticle/201409151549476225 border-radius属性主要用于设置div圆角效果. 使用方法 bo ...
- 我的Pandas应用场景
声明 工作后,很不幸的成为了团队中的QA.QA这个角色吧,说起来高大上,实际很苦逼,一句话概括一下:吃力不讨好!作为新人,公司每月一分钱没少我,至少现在跟开发的待遇是一样的,所以我还是得兢兢业业的对待 ...
- (Sql Server)数据的拆分和合并
(Sql Server)数据的拆分和合并 背景: 今天遇到了数据合并和拆分的问题,尝试了几种写法.但大致可分为两类:一.原始写法.二.Sql Server 2005之后支持的写法.第一种写法复杂而且效 ...
- Android分渠道打包(Python 3.4 实现)
Android批量打包实现有很多方式你可以用Ant,Maven或者Gradle.在处理多个Library和NDK编译的时候配置有些麻烦,且每个渠道都编译一次效率较低.如果没有复杂的分渠道编译需求,我们 ...