EasyUI DataGird底部统计行

最新推荐文章于 2021-09-02 17:28:21 发布
最新推荐文章于 2021-09-02 17:28:21 发布
阅读量4.9k 收藏 2
点赞数 1
分类专栏： JQuery 文章标签： easyui 底部统计行 datagrid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/f445239051/article/details/51288475
版权
本文介绍了如何在EasyUI的DataGrid中添加底部统计行，通过设置`showFooter: true`并自定义JSON响应数据中的`footer`字段，以展示各列的特定统计数据。示例包括在姓名列显示平均分，在课程名称列显示数值平均分。
摘要由CSDN通过智能技术生成

EasyUI DataGird底部统计行

先上一个datagrid底部统计行的图片：
这里写图片描述
官方文档对于datagrid的底部统计行的说明很简单，只提到了showFooter定义是否显示行脚，并没有说怎么去用。我用firebug查看了官网文档返回的json数据，分析了json的数据结构，自己尝试了一下底部统计行的正确用法，在这里和大家分享一下。
在datagrid中加入showFooter: true这个参数。
response传回到datagrid的json的数据中要求新加入一个footer的值，footer里面的值要求针对datagrid的不同列，赋予你要显示的值。比如让姓名那一列显示语文平均分，课程名称那一列显示平均分的数值。response返回的数据如下所示：

{**"footer":[{
  "courseName":74,"studentName":"语文平均分"},{
  "courseName":76,"stu
最低0.47元/天 解锁文章
佳君德怀恩帮子
关注
专栏目录
Easyui-Datagrid统计行footer使用
生面别开
08-29 2万+
效果如图： 带footer的Datagrid的json数据格式： 后端处理： public ActionResult GetList(string id) { HerbInOutStockPlanDetail_Repository rep = new HerbInOutStockPlanDetail_Repository();
统计easyui datagrid某列之和显示在对应列下面
小小程序猿
06-16 1162
script>         $(function () {             $('#dg').datagrid({                 singleSelect: true,                 onLoadSuccess: compute,//加载完毕后执行计算                 url: 'product.json', fitColu
easyUI中的datagrid添加表格尾部；easyUI中的datagrid尾部添加统计行
qq_36161345的博客
11-11 874
一：json数据增加键："footer"； 二：datagrid增加showFooter属性：showFooter:true, 后台数据DEMO { "total":10, "rows":[ {"id":"1","name":"Koi"}, {"id":"2","name":"Dalmation"}, {"id":"3","na...
easyui datagrid 显示 footer
乔乔的博客
02-26 4046
1、设置 showFooter为true $grid = $dg.datagrid({                // fit: true,                 //fitColumns: true,                // pagination: false,               //  pageSize: 20,                // pag...
EasyUI DataGrid 添加 Footer
weixin_30919235的博客
11-30 619
做后台管理界面时，EasyUI 的 DataGrid 经常会被用到，有时候一些总的统计数据不合适放在数据表格里，需要单独显示，这时候就可以放在Footer中显示而不必另外布局。 该怎么给 DataGrid 添加 Footer，Document 里面说的不是很详细，Demo 里面有这个例子，看 datagrid_data2.json 数据格式就明白了。 {"total":28,"rows":[ ...
jQuery easyui datagird编辑行删除行功能的实现代码
10-17
本文将详细介绍如何使用jQuery EasyUI实现DataGrid的编辑行和删除行功能。 首先，我们需要理解jQuery EasyUI DataGrid的基本配置。在提供的代码片段中，`$("#dg")`是一个DataGrid实例，它的配置包括以下几个关键...
EasyUI的DataGrid每行数据添加操作按钮的实现代码
08-29
在使用EasyUI开发Web应用程序时，DataGrid是一个非常实用的组件，它可以帮助我们展示大量结构化的数据，并且提供了丰富的交互功能。在某些情况下，我们可能需要在DataGrid的每行数据后面添加操作按钮，以便用户可以...
easyui datagird增删改分页例子
02-23
标题 "easyui datagird增删改分页例子" 提示我们这个压缩包包含一个使用EasyUI DataGrid实现数据操作和分页功能的示例。EasyUI是一个基于jQuery的前端框架，DataGrid是其组件之一，常用于展示表格数据并支持用户交互...
Jquery EasyUI的datagrid页脚footer使用及数据统计
weixin_30265103的博客
10-25 430
最近做一个统计类的项目中遇到datagrid数据显示页脚footer合计的问题，对于构造统计结果数据格式，是在程序端构造一个{"rows":[],"total":0;"footer":{"Footer":"合计","num":0}}对象。 C#代码如下 实体类对象转化成datagrid columns列中field 相同的列名，并且统计那一列的字段名和输出的字段名相同。如下图 ...
easyui帮助手册datagrid
11-05
名称 类型 描述 默认值 columns（列） array（数组） 数据表格列配置对象，查看列属性以获取更多细节。 null frozenColumns（固定列） array（数组） 跟列属性一样，但是这些列固定在左边，不会滚动。 null fitColumns（自适应列宽） boolean（布尔型） 设置为true将自动使列适应表格宽度以防止出现水平滚动。 false striped（显示条纹） boolean（布尔型） 设置为true将交替显示行背景。 false method（方法） string（字符串） 请求远程数据的方法类型。 post nowrap（截取） boolean（布尔型） 设置为true，当数据长度超出列宽时将会自动截取。 true idField（id字段） string（字符串） 表明该列是一个唯一列。 null url（超链接） string（字符串） 一个用以从远程站点请求数据的超链接地址。 null loadMsg（载入时信息） string（字符串） 当从远程站点载入数据时，显示的一条快捷信息。 Processing, please wait … pagination（分页） boolean（布尔型） 设置true将在数据表格底部显示分页工具栏。 false rownumbers（行数） boolean（布尔型） 设置为true将显示行数。 false singleSelect（单选模式） boolean（布尔型） 设置为true将只允许选择一行。 false pageNumber（当前页码） number（数字） 当设置分页属性时，初始化分页码。 1 pageSize（每页记录数） number（数字） 当设置分页属性时，初始化每页记录数。 10 pageList（可选择的每页记录数） array 当设置分页属性时，初始化每页记录数列表。 [10,20,30,40,50] queryParams（查询参数） object（对象） 当请求远程数据时，发送的额外参数。 {} sortName（默认排序） string（字符串） 当数据表格初始化时以哪一列来排序。 null sortOrder（排序顺序） string（字符串） 定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。 asc remoteSort（远程排序） boolean（布尔型） 定义是否通过远程服务器对数据排序。 true showFooter（显示行底） boolean（布尔型） 定义是否显示行底（如果是做统计表格，这里可以显示总计等）。 false rowStyler（行样式） function（函数） 返回样式，如：'background:red'，function有2个参数： index：行索引，从0开始. row：对应于该行记录的对象。 loadFilter（载入过滤器） function（函数） 返回用以显示的已过滤数据，function有一个参数'data'表示原始数据，你可以将原始数据改变为规范的数据格式，该函数必须返回包含 'total'和'rows'属性的标准数据对象。 editors（编辑模式） object（对象） 定义当编辑一行时的编辑模式。 predefined editors view（视图） object（对象） 定义数据表格的视图。 default view
Easyui datagrid showFooter 位置放到表格上面
weixin_34344403的博客
07-18 775
为什么80%的码农都做不了架构师？>>> ...
easyui-datagrid页脚添加合计
qq_45529798的博客
09-02 945
效果： 一. 先在datagrid添加showFooter的属性，和加载成功时间onLoadSuccess $('#aa').datagrid({ idField:'id', remoteSort:true, pagination:true, showFooter: true, ctrlSelect: true, columns:[[ {field:'name',titl
easyui datagrid footer 页脚问题
weixin_30376453的博客
07-21 468
mvc 的一个例子 public string IndexV2() { var dataGridJson = new DataGridJson(); var data = new List<MyClass11> { ...
easyui-datagrid 不使用footer完成 首行合计不参与前台排序
success could be revenge的博客
07-09 1774
1.前台假分页，假排序，不依赖后台代码，将性能瓶颈放在浏览器端。假分页的需求--忽略第一行合计列进行排序我的构思是1st 将排序后的结果取出来2 sec 人为修改排序结果。3 third  将排序结果塞入表格然而通过官方提供的api  依次使用了 load  loadData  reload 以及 refreshRow 等 发现  循环 遍历 使用 refreshRow 数据量 过大 会 假死。折...
easyui 添加统计行，分页栏总数
shenchengxinsunwei的博客
11-23 2410
场景如下： 我们在表格中经常添加一行为统计行，统计具体列的相关和，这时候用户在使用的时候，发现有效数据与分页栏中展示的总个数不一致，会造成困惑。 产生原因：easyuigrid一般在表格加载onloadSuccess 函数中以insertRow 或者appendRow 函数来追加统计行 代码如下： onLoadSuccess:function(data,index){        ...
vue 页脚_EasyUI 页脚的行(Footer Rows)_Vue EasyUI Demo
weixin_39621075的博客
12-19 68
源代码Footer Rowsexport default {data() {return {data: [],footerData: []};},created() {this.data = [{code: "FI-SW-01",name: "Koi",unitcost: 10.0,status: "P",listprice: 36.5,attr: "Large",itemid: "EST-1"}...
easyui的footer添加
qq_42689281的博客
07-23 705
使用场景 springboot easyUI 想要的结果 easyui的datagrid有showfooter属性，设置为true，后台在查询完数据后查询合计的数量，返回的数据添加footer Map<String, Object> data = New.map(); data.put("total",pagedData.getTotal());//list的大小 data.put("rows",dataList);//java的一个list集合 dat
easyui comboBox 新增一行
最新发布
05-27
您可以通过以下步骤在 EasyUI ComboBox 中新增一行： 1. 获取 EasyUI ComboBox 的下拉面板对象。 2. 创建新的行元素并添加到下拉面板中。 3. 在新添加的行元素上绑定需要的事件。 下面是一个示例代码： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值