easyui —— footer
2024-10-19 11:47:47
前言:
使用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+ " "+update+ " "+delStr;
}else{
return "";
}
}
...
后言:
这样便完美的解决了footer中出现的问题。
最新文章
- 模块化管理工具兼打包工具 webpack
- 修改tomcat应用日志默认编码格式
- redhat 中安装rpm包时遇到异常 “error: Failed dependencies:xinetd is needed by .”
- 解决Android调用https服务API时出错的问题
- IE7 -- 鼠标移入显示下拉框 不显示的问题 / 以及宽度问题
- ASP.NET MVC and jqGrid 学习笔记 6-增删改操作
- 如何获取Window
- 运算符重载 与 sort()
- Echarts数据可视化地理坐标系geo,开发全解+完美注释
- 文件系统及程序的限制关系: ulimit
- ARMV8 datasheet学习笔记4:AArch64系统级体系结构之编程模型(3)- 异常
- 20145216《网络对抗》逆向及BOF基础实践
- python 在 Windows Server 2008 r2 上 安装失败
- Tajo--一个分布式数据仓库系统(设计架构)
- HTTP错误类别
- 4.Linux文件系统层次体系标准
- UVA 11624 Fire!【两点BFS】
- 在Framework2.0环境下运行3.5的代码
- Android 布局文件
- Bootstrap日期/日历插件Datepicker 时间加标记