easyui datagrid 显示 footer
1、设置 showFooter为true
$grid = $dg.datagrid({
// fit: true,
//fitColumns: true,
// pagination: false,
// pageSize: 20,
// pageList: [20, 40, 60, 80, 100],
showFooter:true,
scrollbarSize:0,
border: true,
striped: true,
singleSelect: false,
selectOnCheck: true,
checkOnSelect: true,
remoteSort:false,
rownumbers : false,//不显示序号
method:'get',
columns: [[{field: 'companyname', title: '经销商名称', width: parseInt($(this).width() * 0.2)},
{field: 'goodscount', title: '新增sku数', width: parseInt($(this).width() * 0.1),sortable:true,sorter:numberSort},
{field: 'upgoodscount', title: '在售sku数', width: parseInt($(this).width() * 0.1),sortable:true,sorter:numberSort},
{field: 'goodsSaleCount', title: '下单商品数', width: parseInt($(this).width() * 0.1),sortable:true,sorter:numberSort}
]],
onBeforeLoad: function (param) {
try {
let row = $(this).datagrid('getSelected');
let index = $(this).datagrid('getRowIndex', row);
row_key = index;
} catch (err) {
console.log(err);
} }, onClickCell: function (index, field, value) {
$(this).datagrid('clearSelections');
},
onLoadSuccess: function (data) {
$(this).datagrid('checkRow', row_key);
},
toolbar: '#tb'
});
2、json数据,主要是footer 数组对象
{"total":9,"rows":[
{"id":1,"name":"Chai","price":18.00},
{"id":2,"name":"Chang","price":19.00},
{"id":3,"name":"Aniseed Syrup","price":10.00},
{"id":4,"name":"Chef Anton's Cajun Seasoning","price":22.00},
{"id":5,"name":"Chef Anton's Gumbo Mix","price":21.35},
{"id":6,"name":"Grandma's Boysenberry Spread","price":25.00},
{"id":7,"name":"Uncle Bob's Organic Dried Pears","price":30.00},
{"id":8,"name":"Northwoods Cranberry Sauce","price":40.00},
{"id":9,"name":"Mishi Kobe Niku","price":97.00}
],"footer":[
{"name":"Total","price":282.35},
{"name":"Average","price":31.37}
]}
easyui datagrid 显示 footer的更多相关文章
- EasyUI DataGrid 添加 Footer
做后台管理界面时,EasyUI 的 DataGrid 经常会被用到,有时候一些总的统计数据不合适放在数据表格里,需要单独显示,这时候就可以放在Footer中显示而不必另外布局. 该怎么给 DataGr ...
- easyui datagrid显示进度条控制操作
在当我们需要控制时间前台实际项目页面datagrid显示进度条的数据加载时运行,和datagrid默认情况下只在有url加载运行时的数据显示方式的进度条.下面的代码手动控制: 打开一个进度条: $(' ...
- Easyui datagrid 显示隐藏列
html: <div style="float: left; width: 1450px; height:auto; "> & ...
- easyUi DataGrid 显示日期列,时间为空也可,的正常显示,及普通居中列情况
$('#tt').datagrid({ url: '@Url.Content("~/kpi/FindList")', w ...
- EasyUi Datagrid中footer renderFooter
默认的'rowStyler' 选项不支持footer,想让footer支持rowStyler的话,dategird就得重写.代码如下. var myview = $.extend({}, $.fn.d ...
- easyui datagrid 没数据时显示滚动条的解决方法
今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...
- easyui datagrid中datetime字段的显示和增删改查问题
datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借 ...
- 实现easyui datagrid在没有数据时显示相关提示内容
本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...
- easyui datagrid 列隐藏和显示
easyui datagrid 列隐藏和显示 用js怎么控制列的显示和隐藏? 最佳答案 $('#grid').datagrid('hideColumn','列field');把hideColu ...
随机推荐
- ansible基本模块-command
- IIS环境下上传文件失败
跟随学习代码练习 php 上传文件,一开始是点击按钮后没有反应,不知道是否成功,使用 var_dump($_FILES) 查看,发现空空如也.遂百度一下,发现基本代码应如下 <form acti ...
- abp 后台项目在IIS 中运行
安装 Current .NET Core Hosting Bundle installer (direct download)
- CF248E Piglet's Birthday(概率dp)
题面 luogu CodeForces 题解 \(orz\) yyb 转移蜜罐其实是吓唬人的...... 转移的蜜罐都是尝试过的,所有只关心当前架子上的蜜罐数 设\(f[i][j]\)表示第i个货架有 ...
- notepad++配置编译运行java
点击插件->Plugin Manager->show plugin manager : 选择NppExec,选择install,就将这个插件下载下来了. 这个时候会重启notepad++: ...
- dotnet体系结构
一.C#与.NET的关系 1.粗略地説,.net是一种在Windows平台上的编程架构————一种API. 2.C#编译器专门用于.net,这表示用C#编写的所有代码总是使用.NET Framewor ...
- BZOJ - 2005 莫比乌斯水题
\(gcd=k+1\)时,每一个的贡献都是\(2k+1\) \(gcd=1\)时,每一个贡献为\(1\) #include<iostream> #include<algorithm& ...
- while循环、运算符和格式化输出以及编码
一.while循环 1.while就是当的意思,while指当其后面的条件成立,就执行while下面的代码 写一段代码让程序从0打印到100的程序,每次循环+1. count = 0 while co ...
- [转] 如何在ie11里使用a连接创建动态下载文件流
[From] https://segmentfault.com/q/1010000009470664 查了资料,可以使用微软独家的msSaveBlob, 这个方法支持ie10及以上. var down ...
- 剑指offer第3题:从尾到头打印链表
方法一:采用栈来存储,用ArrayList保存.注意题目给出的输出结果是ArrayList import java.util.ArrayList; import java.util.Stack; pu ...