easyui —— footer

前言:

使用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中出现的问题。

时间: 2024-10-10 22:01:46

easyui —— footer的相关文章

easyui datagrid footer 页脚问题

mvc 的一个例子 public string IndexV2() { var dataGridJson = new DataGridJson(); var data = new List<MyClass11> { new MyClass11() { AuditUser="a"}, new MyClass11() { AuditUser="aa"} , new MyClass11() { AuditUser="bb"} }; data

Easyui dialog

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="styleSheet" type="text/css" href="js/easyUI/metro/easyui.css"> <link rel=

网站前端_EasyUI.基础入门.0002.使用EasyUI Panel组件的最佳姿势?

1. 基础面板 <div id="p" class="easyui-panel" style="padding: 10px;" data-options="width:700,height:250,title:'基础面板'">     <p>jQuery EasyUI framework helps you build your web pages easily.</p>     <u

[easyui]&mdash;easyui教你编写一个前台的架子

以前做项目都是在别人搭建好的环境下直接编写单独的页面,也没有处理过怎么搭建一个框架.看到别人的布局都挺好的,自己也想做一个走一下流程. 嘿,刚开始时看着别人写的代码,去找怎么写. 这是我自己的想法,使用easyui-accordion这种分类来做的.做一个二级的菜单,其实菜单里面的各个可以点击的菜单用ul li这种列表来做.大体设计到的元素就这些. 想看一下最后的结果,页面没有添加其他东西,相当的丑陋,不过只是学习这种思想和知道有这么一种写法: 是吧,相当的丑吧, 由于这个东西是使用easyui

初识 easyui datagrid

首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jquery.min.js"></script><script src="js/jquery.easyui.min.js"></script><link rel="stylesheet" type="text

第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件

jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使用方法,这个组件依赖于 DataGrid(数据表格)组件. 一.加载方式 建立一个 JSON 文件 [ { "id": 1, "name": "系统管理", "date": "2015-05-10", &quo

easyUI 多功能datagrid 用户控件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Cell Editing in DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/e

实现jquery EasyUI tabs选项卡关闭图标后加载自定义事件

项目中当关闭tabs选项卡时,底部footer需要通过javascript重新定位calcFooter(),如何实现呢?选项卡上的关闭图标的方法是easyui自带的,calcFooter()写在onClose中不起作用,API中没有关闭后的方法,但有个关闭之前的方法onBeforeClose,在onBeforeClose方法中先实现onClose()方法,再calcFooter(),再return false,这样就达到要的效果 代码如下: $('#tt').tabs({ onBeforeClo

easyui datagrid属性和方法

本文可以当做api来使用 使用方法(Usage Example) 从现有的表单元素创建数据表格,定义在html中的行,列和数据. <table class="easyui-datagrid"> <thead> <tr> <th data-options="field:'code'">Code</th> <th data-options="field:'name'">Name&