前言:

使用easyui的datagrid,在最后一行加上“总计”字样,效果如下:

过程:

...
<table id="dg" title="xx管理" fitColumns="true" pagination="true" rownumbers="true" nowrap="true"
fit="true" toolbar="#tb" data-options="pageSize:25,pageList:[10,15,25,50,100],singleSelect:true,showFooter: true">
<thead>
<tr id="options">
<th data-options="field:'id',width:50,align:'center'">编号</th>
<th data-options="field:'name',width:150,align:'center'">名称</th>
<th data-options="field:'remark',width:100,align:'center'">备注</th>
<th data-options="field:'addr',width:130,align:'center'">地区</th>
<th data-options="field:'percount',width:50,align:'center',sortable:true">人数</th>
<th data-options="field:'chatCount',width:50,align:'center'">聊天条数</th>
<th data-options="field:'createtime',width:100,align:'center',formatter:formatReg">创建时间</th>
<th field="operate" width="120" align="center" data-options="formatter:formatOperate" >操作</th>
</tr>
</thead>
</table>
...

在data-option中增加showFooter属性为true,并在后台准备数据的时候增加footer属性,并且其中字段名跟数据库中的保持一致:

...
return this.json({total: result.count, rows: result.data,footer:[{"name":"总计","percount":personTotal,"chatCount":chatTotal}]});
...

但是,莫名其妙的出现了下面的情景:

就是在最后一栏“操作”中出现了不该出现的三个按钮,解决方法:在后台组织返回数据的时候,增加一个属性,比如:

...
return this.json({total: result.count, rows: result.data,footer:[{"isFooter":true,"name":"总计","percount":personTotal,"chatCount":chatTotal}]});
...

然后在前台代码上增加一个判断:

...
function formatOperate(value, row, index){
var update = '<a onclick="openUpdateDialog('+index+')" href="javascript:void(0)" title="修改" class="linkbutton" data-options="plain:true,iconCls:\'icon-page_edit\'"></a>';
var delStr='<a onclick="del('+row.id+')" href="javascript:void(0)" title="删除" class="linkbutton" data-options="plain:true,iconCls:\'icon-delete\'"></a>';
var checkUsers ='<a onclick="checkUsers('+index+')" href="javascript:void(0)" title="查看圈子成员" class="linkbutton" data-options="plain:true,iconCls:\'icon-group\'"></a>';
if(!row.isFooter){
return checkUsers+ "&nbsp;"+update+ "&nbsp;"+delStr;
}else{
return "";
}
}
...

后言:

这样便完美的解决了footer中出现的问题。

easyui —— footer的更多相关文章

  1. easyUI footer 的格式渲染

    网上好多的例子,但是自己使用的情况下还是出现bug.比如以下代码: var myview = $.extend({}, $.fn.datagrid.defaults.view, { renderFoo ...

  2. EasyUI DataGrid 添加 Footer

    做后台管理界面时,EasyUI 的 DataGrid 经常会被用到,有时候一些总的统计数据不合适放在数据表格里,需要单独显示,这时候就可以放在Footer中显示而不必另外布局. 该怎么给 DataGr ...

  3. Jquery EasyUI的datagrid页脚footer使用及数据统计

    最近做一个统计类的项目中遇到datagrid数据显示页脚footer合计的问题,对于构造统计结果数据格式,是在程序端构造一个{"rows":[],"total" ...

  4. easyui datagrid footer 页脚问题

    mvc 的一个例子 public string IndexV2() { var dataGridJson = new DataGridJson(); var data = new List<My ...

  5. easyui datagrid 显示 footer

    1.设置 showFooter为true $grid = $dg.datagrid({ // fit: true, //fitColumns: true, // pagination: false, ...

  6. EasyUi Datagrid中footer renderFooter

    默认的'rowStyler' 选项不支持footer,想让footer支持rowStyler的话,dategird就得重写.代码如下. var myview = $.extend({}, $.fn.d ...

  7. 关于easyui datagrid 表格数据处理

    首先先将easyui 引入到jsp页面中 <link rel="stylesheet" type="text/css" href="easyui ...

  8. 【开源】OSharp框架解说系列(2.1):EasyUI的后台界面搭建及极致重构

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  9. Easyui简单布局

    1.创建布局 创建布局只需要添加 'easyui-layout' class 到 <div> 标记或者 在整个页面创建布局,即<body class="easyui-lay ...

随机推荐

  1. Java代码编写的30条建议

    1) 类名首字母应该大写.字段.方法以及对象(句柄)的首字母应小写.对于所有标识符,其中包含的所有单词都应紧靠在一起,而且大写中间单词的首字母.例如: ThisIsAClassName thisIsM ...

  2. xml与dataset的数据交互

    1. this.dsConfig = new DataSet(); //使用指定的文件将 XML 架构和数据读入 System.Data.DataSet. this.dsConfig.ReadXml( ...

  3. 【转】【Unity】四元数(Quaternion)和旋转

    http://blog.csdn.net/candycat1992/article/details/41254799

  4. Jackson2.1.4 序列化对象时对属性的过滤

    //对field(所有字段)进行过滤 //对get方法进行过滤 //对isBoolean这样的方法进行过滤 //里面的具体配置有 ANY,DEFAULT,NON_PRIVATE,NONE,PROTEC ...

  5. JavaScrip——练习(做悬浮框再进一步:悬浮窗后缀悬浮窗——用this.className)

    对悬浮窗进一步改进: 用this.className 可以省略script <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  6. Linux服务器同步时间

    进行Linux服务器的时间同步是一件需要注意的事情,不然,集群中的服务器时间不同将导致许多奇怪问题发生, 如果没有安装crontab,那么,使用yum install crontabs进行安装和启动, ...

  7. css鼠标移动到文字上怎样变化背景颜色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. CMM已经落伍了,敏捷才是王道

    首先强调一下,敏捷和有没有文档一点关系都没有.我只是对于CMM的那些文档感觉有些浪费. 看看那些文档,看看那些流程.想想那些伟大的软件作品,哪个是用CMM开发出来的? 作为测试工程师,程序员的你在CM ...

  9. 面向移动端的轻量级神经网络模型mobilenet、ShuffleNet

    翻译: http://baijiahao.baidu.com/s?id=1565832713111936&wfr=spider&for=pc http://baijiahao.baid ...

  10. repo 安装

    repo是android用于管理git仓库的工具. 参考链接 http://www.cnblogs.com/xiaoerlang/p/3549156.html mkdir ~/bin export P ...