实现dtGrid列总计功能

先看效果

 

 

1.在jquery.dtGrid.js中添加根据列id计算列总计代码

1.新增总计列id数组

$.fn.DtGrid.defaultOptions = {
    grid : {
		lang : 'en',
		totalCountColById:[], //新增总计列id数组，格式为数组，支持多列总计
		ajaxLoad : true,
		loadAll : false,
		loadURL : '',
		datas : null,
		check : false,
		exportFileName : 'datas',
		tableStyle : '',
		tableClass : 'table table-bordered table-hover table-responsive',
		showHeader : true,
		gridContainer : 'dtGridContainer',
		toolbarContainer : 'dtGridToolBarContainer',
		tools : 'refresh|faseQuery|advanceQuery|export[excel,csv,pdf,txt]|print',
		exportFileName : 'datas',
		exportURL :'/dtgrid/export',
		pageSize : 20,
		pageSizeLimit : [20, 50, 100]
	},
    ...
}


2.在表格最后添加总计行代码，在代码var gridId = dtGridReflectionObj.option.id之后添加


...
gridContent += '	</tbody>';
gridContent += '</table>';
$('#dt_grid_'+dtGridReflectionObj.option.id).remove();
$('#'+dtGridReflectionObj.option.gridContainer).append(gridContent);
//备份gridId
var gridId = dtGridReflectionObj.option.id;

//在表格最后添加总计行
if(dtGridReflectionObj.option.totalCountColById)
	totalCountColById('dt_grid_'+gridId,dtGridReflectionObj.option.totalCountColById);

//绑定单元格单击方法
if(dtGridReflectionObj.option.onCellClick){
	$('#dt_grid_'+gridId+' .dt-grid-cell').click(function(e){
		dtGridReflectionObj.bindCellEvent(dtGridReflectionObj.option.onCellClick, this, e);
	});
}
...

3.添加计算列总计方法
function  totalCountColById(tid,arr) {
	var arr_len = arr.length;
	// 空数组,不计算总计
	if(!arr_len)
		return;
	// 获取表头，准备根据columnid来把列id转出对应的列数字
	var $tbHead = $('#'+tid+' .dt-grid-headers .dt-grid-header[columnid],#'+tid+' .dt-grid-headers .check-column'),
		arrIndex = [],
		firstTd = true,
		str = '<tr class="tdcol">';
	$tbHead.each(function(){
		var $this = $(this),className='';
		if(arr.indexOf($this.attr('columnid')) !== -1){
			arrIndex.push(+$this.attr('columnno'));
		}
		if($this.attr('columnid')){
			className = 'dt-grid-cell';
		}
		if($this.hasClass('hidden')){
			str += '<td class="hidden '+className+'" columnid="'+($this.attr('columnid')||'')+'"></td>';
		}else{
			str += '<td columnid="'+$this.attr('columnid')+'" class="'+className+'">';
			// 第一个不隐藏的td作为总计td
			if(firstTd){
				firstTd = false;
				str += '总计</td>';
			}else{
				str += '</td>';
			}
		}
	});
	str += '</tr>';
	$('#'+tid+' tbody').append(str);

	var $all_td,num, total = 0; // 每列总计
	for(var i = 0,len=arrIndex.length;i<len;i++){
		$all_td = $('#'+tid+' tbody .dt-grid-row').find('.dt-grid-cell:eq('+arrIndex[i]+')');
		total = 0; num = 0;
		for(var j=0, lenTd=$all_td.length; j<lenTd; j++){
			num = $all_td.eq(j).text().replace(/,/g,'');
			if(Number(num)!==+num){
				num = 0;
			}
			total += +num;
		}
		if(~~total !== total){
			total = total.toFixed(2);
		}
		$('#'+tid+' tbody .tdcol .dt-grid-cell').eq(arrIndex[i]).text(total);
	}	
}

到此jquery.dtGrid.js中计算列总计的代码已经全部添加完

 

2.使用

 

var tables = {};
//定义表格列属性
tables.dtGridColumns = [
    {id:'a', title:'a', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
    {id:'b', title:'b', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
    {id:'c', title:'c', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
    {id:'d', title:'d', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
    {id:'e', title:'e', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
    {id:'f', title:'f', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
    {id:'printCount', title:'打印次数', type:'number', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'}
    }
];
//定义表格
tables.dtGridOption = {
    lang:'zh-cn',
    ajaxLoad : true,
    check : true,
    totalCountColById:['printCount'], // 需要总计的列
    loadURL :'',
    exportFileName : 'ww管理',
    columns : tables.dtGridColumns,
    gridContainer : 'tb_main_body',
    toolbarContainer : 'tb_main_tool',
    tools:'',
    pageSize : 10,
    pageSizeLimit : [10, 50, 100, 500]
}
var grid = $.fn.DtGrid.init(tables.dtGridOption);