Extjs的grid总计实现
注意：前台页面相加计算的列，后台传的值必须是int、double或float（数值型）
Ext.define('person.view.tongji.Salary', {
extend: 'Ext.panel.Panel',
layout: 'border',
border: false,
margins: '0 0 0 0',
initComponent: function() {
var me = this;
var store = Ext.create('Ext.data.Store', { // 定义数据源
autoLoad: true,
fields: ["pkid",'ksname','type1','type2','note','salary','kou'],
pageSize : 30, // 设置分页大小
proxy: {
type: 'ajax',
url: 'kaoqin/getSalaryTongJiList.do',
// 请求的服务器地址
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
}
},
listeners: {
load: function() {
},
beforeload: function(store) {
var yuec=Ext.getCmp('tongji_salary_yuec').getValue()+"";
var yuez=Ext.getCmp('tongji_salary_yuez').getValue()+"";
Ext.apply(store.proxy.extraParams,{
datec:Ext.getCmp('tongji_salary_nianc').getValue()+'/'+(yuec.length==1?'0'+yuec:yuec),
datez:Ext.getCmp('tongji_salary_nianz').getValue()+'/'+(yuez.length==1?'0'+yuez:yuez)
});
}
}
});
function taskInfo(value, cellmeta, record, rowIndex, columnIndex,store){
cellmeta.tdAttr='data-qtip="'+value+'"'; //列加提示
if(record.data.pkid==0){
return "<span style='color:red;cursor: pointer;'>"+value+"</span>";
}else{
return value;
}
}
var grid = Ext.create('Ext.grid.Panel', {
region: 'center',
store: store,
border: false,
selType:'rowmodel',
features: [{
ftype: 'summary'
}],
margins: '0 0 0 0',
enableColumnHide: false,
columns: [Ext.create('Ext.grid.RowNumberer', {
text: "序号",
align: 'center',
flex: 1,
summaryRenderer:function(value, summaryData, dataIndex){
return "<font color='red' size='2'>合计</font>";
}
}), {
text: "所在科室",
flex: 2,
align: 'center',
sortable: true,
renderer:taskInfo,
dataIndex: 'ksname',
summaryRenderer: function (value, summaryData, dataIndex) {
return "<font color='red' size='2'>--</font>";
}
},{
text: "二级人数",
flex: 2,
align: 'center',
sortable: true
,renderer:taskInfo,
dataIndex: 'type1',
summaryType: 'sum',
summaryRenderer: function (value, summaryData, dataIndex) {
return "<font color='red' size='2'>"+parseInt(value)+"</font>";
}
},{
text: "三级人数",
flex: 2,
align: 'center',
sortable: true,
summaryType: 'sum',
dataIndex: 'type2',
renderer:taskInfo,
summaryRenderer: function (value, summaryData, dataIndex) {
return "<font color='red' size='2'>"+parseInt(value)+"</font>";
}
},{
text: "实发金额总数（元）",
flex: 2,
align: 'center',
sortable: true,
summaryType: 'sum',
dataIndex: 'salary',
renderer:taskInfo,
summaryRenderer: function (value, summaryData, dataIndex) {
return "<font color='red' size='2'>"+parseInt(value).toFixed(2)+"</font>";
}
},{
text: "扣罚金额总数（元）",
flex: 2,
align: 'center',
sortable: true,
summaryType: 'sum',
dataIndex: 'kou',
renderer:taskInfo,
summaryRenderer: function (value, summaryData, dataIndex) {
return "<font color='red' size='2'>"+parseInt(value).toFixed(2)+"</font>";
}
},{
text: "备注",
flex: 2,
align: 'center',
sortable: true,
dataIndex: 'note',
renderer:function(v,cellmeta){
if(v&&v.length>15){
cellmeta.tdAttr = 'data-qtip="'
+ v
+ '"'; // 列加提示
}
return v;
},
summaryRenderer: function (value, summaryData, dataIndex) {
return "<font color='red' size='2'>--</font>";
}
}],
columnLines: true,
dockedItems: [{ // 工具栏
xtype: 'toolbar',
items: [
// '->',
{
xtype:'fieldcontainer',
layout:'hbox',
fieldLabel:'日期从',
margin:'0 5 0 5',
labelWidth:40,
items:[{
xtype : 'combo',
width:55,
store:[new Date().getFullYear()-2,new Date().getFullYear()-1,new Date().getFullYear()],
editable:false,
triggerAction : 'all',
queryMode : 'local',
margin : '0 5 0 5',
id:'tongji_salary_nianc',
value:new Date().getFullYear()
},
{
xtype : 'displayfield',
value : '年'
}, {
xtype : 'combo',
width:40,
store:[1,2,3,4,5,6,7,8,9,10,11,12],
editable:false,
triggerAction : 'all',
queryMode : 'local',
margin : '0 5 0 5',
id:'tongji_salary_yuec',
value: new Date().getMonth()
}, {
xtype : 'displayfield',
margin : '0 5 0 5',
value : '月'
}]
},
{
xtype:'fieldcontainer',
layout:'hbox',
fieldLabel:'至',
margin:'0 5 0 5',
labelWidth:40,
items:[{
xtype : 'combo',
width:55,
store:[new Date().getFullYear()-2,new Date().getFullYear()-1,new Date().getFullYear()],
editable:false,
triggerAction : 'all',
queryMode : 'local',
margin : '0 5 0 5',
id:'tongji_salary_nianz',
value:new Date().getFullYear()
},
{
xtype : 'displayfield',
value : '年'
}, {
xtype : 'combo',
width:40,
store:[1,2,3,4,5,6,7,8,9,10,11,12],
editable:false,
triggerAction : 'all',
queryMode : 'local',
margin : '0 5 0 5',
id:'tongji_salary_yuez',
value: new Date().getMonth()+1
}, {
xtype : 'displayfield',
margin : '0 5 0 5',
value : '月'
}]
}
,{
xtype:'button',
text : '查询',
width:50,
margin:'0 5 0 5',
icon:'images/search.png',
handler : function() {
Ext.getCmp('tongji_salary_pagebar').moveFirst();
store.load();
}
},
{
text : '重置',
xtype:'button',
width:50,
icon:'images/cz.png',
handler : function() {
Ext.getCmp('tongji_salary_nian').setValue(new Date().getFullYear());
Ext.getCmp('tongji_salary_yue').setValue(new Date().getMonth()+1);
}
},'-',{
text: "导出汇总表",
tooltip: '导出奖金汇总表详细信息',
icon: 'images/export.png',
handler: function() {
var yuec=Ext.getCmp('tongji_salary_yuec').getValue()+"";
var yuez=Ext.getCmp('tongji_salary_yuez').getValue()+"";
var datec=Ext.getCmp('tongji_salary_nianc').getValue()+'/'+(yuec.length==1?'0'+yuec:yuec);
var datez=Ext.getCmp('tongji_salary_nianz').getValue()+'/'+(yuez.length==1?'0'+yuez:yuez);
window.open("tongji/exportSalaryInfo.do?datec="+datec+"&datez="+datez).focus();
}
}]
}],
border: false,
// frame: true,
header:false,
iconCls: 'icon-grid',
bbar: [{ // 分页工具条
xtype: 'pagingtoolbar',
id: 'tongji_salary_pagebar',
store: store,
// 这里需要指定与表格相同的store
displayInfo: true
}]
});
me.items = [grid];
me.callParent(arguments);
}
});
Extjs的grid总计实现相关推荐
- EXTJS 中grid 动态增加列的方法
总结:gridpanel动态生成列的核心就是在拼凑columnmodel和后台返回store的数据对的上 1-首先动态拼凑columnmodel 前端拼凑例子 me.columns.push({tex ...
- 火狐、IE浏览器实现Extjs的grid表格的复制、粘贴
2019独角兽企业重金招聘Python工程师标准>>> 从后台获取参数,一次填入ext:grid网状表格,发现表格内的数据不能复制粘贴,只能read...,火狐和IE 11都不能复制 ...
- Extjs 从grid中导出Excel表格。后台为C#（绝对好用）（按照自己的需求修改版本）...
最近生成Excel表格,稍微得到一点新的体会,特此更新自己开发时候的版本. 开发工具:VS2005 数据库:oracle10.1 浏览器:firefox3.5.9 第一步,web层aspx文件 需要载 ...
- Extjs 从grid中导出Excel表格。后台为C#（绝对好用）
一.在程序中增加附件中js文件的引用: 二.定义一个导出Excel文件的函数: function ExportExcel(gridPanel,config) {if (gridPanel) {var ...
- [ExtJS 6]Grid分页工具栏无效问题解决
文章目录 前情描述: 问题描述: 解决方法: 思路: 实现如下: 前情描述: Ext JS中,Grid上可以使用tbar或bbar等添加分页的工具栏.一般状况下,该分页工具栏可以和该Grid的Stor ...
- extjs中grid中行内文本或图片居中显示
我是看了网上写的方法调试自己的代码来实现的,实现的方式是当加载store数据时改变grid的行样式,源码如下: html代码: 1 <div id="weatherP_grid-bod ...
- [转载]ExtJS中grid按照中文拼音首字母排序、改变行背景、列背景、静态数据分页不再困难...
代码 1 本示例主要使用到了静态数据分页 Ext.data.PagingMemoryProxy组件.Ext.PagingToolbar分页条.viewConfig的getRowClass 方法.列co ...
- ExtJS中Grid分页
简单记录关键代码,备忘... 1.定义一个jsonStore this.store = new Ext.data.JsonStore({ root: 'data', ...
- EXTJS 6 Grid 滚动到底部 触发事件（如：加载数据）
给grid增加个listeners 监听 viewready listeners : {afterrender : function() {},viewready: function () {gri ...
- Extjs之Grid详细
Grid的展示选中排序选中事件. 附图: 代码: <script type="text/javascript">Ext.onReady(function () {var ...
最新文章
- 微众银行 CAIO 杨强：人工智能的新三大定律（附视频）
- Android memory
- 你可以去学python_你是怎么学好Python的？
- 【深度学习】深度学习的发展方向： 深度强化学习！
- 扎克伯格的中文夜：想要成功就不能放弃
- Linux 操作命令 more
- “约见”面试官系列之常见面试题之第六十篇之事件绑定和普通事件（建议收藏）
- Dubbo 新编程模型之外部化配置 1
- 反射矩阵（reflection matrix）推导
- raster | R中的栅格操作符（上）[翻译]
- c语言burg算法,用Burg算法提升空间调制傅里叶光谱仪分辨率与定阶方法
- win10环境eclipse安装包双击无反应的解决方案
- 基于C++和EasyX 实现的《双人贪吃蛇》小游戏，你不找个小伙伴陪你一起玩吗？
- Android性能测试工具(一) 之Emmagee[转载]
- 国内PHP开源建站程序
- hackme pwn onepunch
- 河北大学计算机类信息安全专业就业前景,2018信息安全专业就业前景和就业方向分析...
- 微信公众号配置网页授权域名报错：无法访问xxx指向的web服务器或虚拟主机的目录
- 微信营销分析之最有效的微信推广技巧
- k64 datasheet学习笔记26--Oscillator (OSC)