You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
296 lines
8.8 KiB
296 lines
8.8 KiB
1 month ago
|
//对datagrid的参数进行扩展，增加了以下3个参数
|
||
|
|
$.extend($.fn.datagrid.defaults, {
|
||
|
|
groupHeight: 25,//分组区域出现时的高度
|
||
|
|
expanderWidth: 30,//分组左侧的+-号的宽度
|
||
|
|
groupStyler: function(value,rows){return ''}//组的css样式
|
||
|
|
});
|
||
|
|
|
||
|
|
//定义全新的分组样式的grid视图，继承默认的视图
|
||
|
|
var groupview = $.extend({}, $.fn.datagrid.defaults.view, {
|
||
|
|
//会执行2次，第一次是冻结列，第二次是指标列(非冻结)
|
||
|
|
render: function(target, container, frozen){
|
||
|
|
var state = $.data(target, 'datagrid');
|
||
|
|
var table = [];
|
||
|
|
this.currentIndex = 0;
|
||
|
|
var opts = state.options;
|
||
|
|
var groupFields = opts.groupField;//分组字段
|
||
|
|
if(typeof groupFields == 'string'){
|
||
|
|
groupFields = groupFields.split(',');
|
||
|
|
}
|
||
|
|
//每个汇总字段的计数
|
||
|
|
this.fieldCountMap = {};
|
||
|
|
for(var i=0;i<groupFields.length;i++){
|
||
|
|
this.fieldCountMap[groupFields[i]] = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
var groupOrder = this.groupOrder;
|
||
|
|
table.push('<table class="datagrid-btable" cellspacing="0" cellpadding="0" border="0"><tbody>');
|
||
|
|
for(var i=0; i<groupOrder.length; i++){
|
||
|
|
var nextOrderIndex = [];
|
||
|
|
//默认下一个为空
|
||
|
|
if(i < groupOrder.length - 1){
|
||
|
|
nextOrderIndex = groupOrder[i+1];
|
||
|
|
}
|
||
|
|
//上一个，默认也为空
|
||
|
|
var lastOrderIndex = [];
|
||
|
|
if(i>0){
|
||
|
|
lastOrderIndex = groupOrder[i-1];
|
||
|
|
}
|
||
|
|
if(lastOrderIndex.length == 0 || lastOrderIndex[0]!==groupOrder[i][0]){
|
||
|
|
//table.push('<table class="datagrid-btable" cellspacing="0" cellpadding="0" border="0"><tbody>');
|
||
|
|
}
|
||
|
|
table.push(this.renderGroup.call(this, target, groupOrder[i],nextOrderIndex, frozen));
|
||
|
|
if(nextOrderIndex.length==0 || nextOrderIndex[0]!==groupOrder[i][0]){
|
||
|
|
//table.push('</tbody></table>');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
table.push('</tbody></table>');
|
||
|
|
if(!frozen){
|
||
|
|
state.data.rows = this.newRows;
|
||
|
|
}
|
||
|
|
$(container).html(table.join(''));
|
||
|
|
},
|
||
|
|
|
||
|
|
renderGroup: function(target, groupIndexArray,nextGroupIndexArray, frozen){
|
||
|
|
var state = $.data(target, 'datagrid');
|
||
|
|
var opts = state.options;
|
||
|
|
var fields = $(target).datagrid('getColumnFields', frozen);
|
||
|
|
var frozenFields = $(target).datagrid('getColumnFields', true);
|
||
|
|
var hasFrozen = opts.frozenColumns && opts.frozenColumns.length;
|
||
|
|
var groups = this.groups;
|
||
|
|
if (frozen){
|
||
|
|
if (!(opts.rownumbers || hasFrozen)){
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var groupFields = opts.groupField;//分组字段
|
||
|
|
if(typeof groupFields == 'string'){
|
||
|
|
groupFields = groupFields.split(',');
|
||
|
|
}
|
||
|
|
var table = [];
|
||
|
|
var nestedObj = groups;
|
||
|
|
var groupname = '';
|
||
|
|
var groupPos = -1;
|
||
|
|
//获取当前小组的数据
|
||
|
|
for(var i=0;i<groupIndexArray.length;i++){
|
||
|
|
groupname = groupIndexArray[i];
|
||
|
|
groupPos = i;
|
||
|
|
nestedObj = nestedObj[groupname];
|
||
|
|
}
|
||
|
|
|
||
|
|
var dataLen = nestedObj.length;
|
||
|
|
if(true){
|
||
|
|
//是否添加小计：
|
||
|
|
dataLen++;
|
||
|
|
}
|
||
|
|
for(var j=0; j<dataLen; j++) {
|
||
|
|
var rowData = null;
|
||
|
|
var isSum = false;
|
||
|
|
if(j==nestedObj.length){
|
||
|
|
var jo = opts.sumFormatter.call(target, groupname, nestedObj);
|
||
|
|
rowData = buildFrozenSumRow(nestedObj,groupPos,groupname,jo);
|
||
|
|
isSum = true;
|
||
|
|
}else{
|
||
|
|
//if ((frozen && hasFrozen)){
|
||
|
|
// var oldval = this.fieldCountMap[groupFields[groupPos]];
|
||
|
|
// this.fieldCountMap[groupFields[groupPos]] = oldval+1;
|
||
|
|
//}
|
||
|
|
rowData = nestedObj[j];
|
||
|
|
}
|
||
|
|
if (!(frozen && hasFrozen)){
|
||
|
|
this.newRows.push(rowData);
|
||
|
|
}
|
||
|
|
var htmltr = renderRowExt(this,rowData,isSum);
|
||
|
|
table.push(htmltr);
|
||
|
|
this.currentIndex++;
|
||
|
|
}
|
||
|
|
//判断是否需要上级（上上级）的小计：
|
||
|
|
for(var m=groupIndexArray.length-2;m>=0;m--){
|
||
|
|
//倒数第二个开始
|
||
|
|
var isAddExtraRow = false;
|
||
|
|
var curGroup = groupIndexArray[m];
|
||
|
|
if(nextGroupIndexArray.length == 0){
|
||
|
|
isAddExtraRow = true;
|
||
|
|
}else{
|
||
|
|
var nextGroup = nextGroupIndexArray[m];
|
||
|
|
if(curGroup == nextGroup){
|
||
|
|
break;
|
||
|
|
}else{
|
||
|
|
isAddExtraRow = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//如果需要添加合计页
|
||
|
|
if(isAddExtraRow == true){
|
||
|
|
var jo = opts.sumFormatter.call(target, curGroup, nestedObj);
|
||
|
|
var rowData = buildFrozenSumRow(nestedObj,m,curGroup,jo);
|
||
|
|
var htmltr = renderRowExt(this,rowData,true);
|
||
|
|
table.push(htmltr);
|
||
|
|
this.currentIndex++;
|
||
|
|
if (!(frozen && hasFrozen)){
|
||
|
|
this.newRows.push(rowData);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
return table.join('');
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* [buildFrozenSumRow 构建冻结区块的合计信息]
|
||
|
|
* @param {[type]} rows [description]
|
||
|
|
* @param {[type]} groupPos [description]
|
||
|
|
* @param {[type]} title [description]
|
||
|
|
* @return {[type]} [description]
|
||
|
|
*/
|
||
|
|
function buildFrozenSumRow(rows,groupPos,title,jo){
|
||
|
|
var keyField = '';
|
||
|
|
if(frozenFields.length>groupPos+1){
|
||
|
|
keyField = frozenFields[groupPos+1];
|
||
|
|
}
|
||
|
|
if(!jo){
|
||
|
|
jo = {};
|
||
|
|
}
|
||
|
|
|
||
|
|
if(rows.length>0){
|
||
|
|
jo = $.extend(jo,rows[0]);
|
||
|
|
}
|
||
|
|
if(keyField){
|
||
|
|
jo[keyField] = title+' 小计';
|
||
|
|
}
|
||
|
|
if(frozenFields.length>groupPos+2){
|
||
|
|
for(var i=groupPos+2;i<fields.length;i++){
|
||
|
|
jo[frozenFields[i]] = '';//清空后续的列的值
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return jo;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function renderRowExt(that,rowData,isSumRow){
|
||
|
|
var innerTable= [];
|
||
|
|
var css = opts.rowStyler ? opts.rowStyler.call(target, that.currentIndex, rowData) : '';
|
||
|
|
var classValue = '';
|
||
|
|
var styleValue = '';
|
||
|
|
if (typeof css == 'string'){
|
||
|
|
styleValue = css;
|
||
|
|
} else if (css){
|
||
|
|
classValue = css['class'] || '';
|
||
|
|
styleValue = css['style'] || '';
|
||
|
|
}
|
||
|
|
if(isSumRow && isSumRow == true){
|
||
|
|
//TODO 临时
|
||
|
|
classValue = 'row-sum'
|
||
|
|
}
|
||
|
|
|
||
|
|
var cls = 'class="datagrid-row ' + (that.currentIndex % 2 && opts.striped ? 'datagrid-row-alt ' : ' ') + classValue + '"';
|
||
|
|
var style = styleValue ? 'style="' + styleValue + '"' : '';
|
||
|
|
var rowId = state.rowIdPrefix + '-' + (frozen?1:2) + '-' + that.currentIndex;
|
||
|
|
innerTable.push('<tr id="' + rowId + '" datagrid-row-index="' + that.currentIndex + '" ' + cls + ' ' + style + '>');
|
||
|
|
innerTable.push(that.renderRow.call(this, target, fields, frozen, that.currentIndex, rowData));
|
||
|
|
innerTable.push('</tr>');
|
||
|
|
return innerTable.join('');
|
||
|
|
}
|
||
|
|
/*
|
||
|
|
function getSumTitle(groupIndexArray,thisPath){
|
||
|
|
var title = '';
|
||
|
|
var index = -1;
|
||
|
|
for(var i=0;i<groupIndexArray.length;i++){
|
||
|
|
if(thisPath == groupIndexArray[i]){
|
||
|
|
index = i-1;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(index>=0){
|
||
|
|
title = groupIndexArray[index];
|
||
|
|
}
|
||
|
|
return title + '小计';
|
||
|
|
}*/
|
||
|
|
},
|
||
|
|
/*
|
||
|
|
bindEvents: function(target){
|
||
|
|
var state = $.data(target, 'datagrid');
|
||
|
|
var dc = state.dc;
|
||
|
|
var body = dc.body1.add(dc.body2);
|
||
|
|
var clickHandler = ($.data(body[0],'events')||$._data(body[0],'events')).click[0].handler;
|
||
|
|
body.unbind('click').bind('click', function(e){
|
||
|
|
var tt = $(e.target);
|
||
|
|
var expander = tt.closest('span.datagrid-row-expander');
|
||
|
|
if (expander.length){
|
||
|
|
var gindex = expander.closest('div.datagrid-group').attr('group-index');
|
||
|
|
if (expander.hasClass('datagrid-row-collapse')){
|
||
|
|
$(target).datagrid('collapseGroup', gindex);
|
||
|
|
} else {
|
||
|
|
$(target).datagrid('expandGroup', gindex);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
clickHandler(e);
|
||
|
|
}
|
||
|
|
e.stopPropagation();
|
||
|
|
});
|
||
|
|
},*/
|
||
|
|
//渲染前的事件
|
||
|
|
onBeforeRender: function(target, rows){
|
||
|
|
var state = $.data(target, 'datagrid');
|
||
|
|
var opts = state.options;
|
||
|
|
var groupFields = opts.groupField;//分组字段
|
||
|
|
if(typeof groupFields == 'string'){
|
||
|
|
groupFields = groupFields.split(',');
|
||
|
|
}
|
||
|
|
var groups = {};//分组信息
|
||
|
|
var groupOrder = [];//分组顺序
|
||
|
|
initCss();
|
||
|
|
groupRows(rows,groupFields);
|
||
|
|
//state.data.rows = newRows;
|
||
|
|
this.groups = groups;
|
||
|
|
this.groupOrder = groupOrder;
|
||
|
|
this.newRows = [];//新数据
|
||
|
|
/*
|
||
|
|
var that = this;
|
||
|
|
setTimeout(function(){
|
||
|
|
that.bindEvents(target);
|
||
|
|
},0);*/
|
||
|
|
|
||
|
|
function groupRows(rows,groupFields){
|
||
|
|
var groupOrderStr = [];
|
||
|
|
for(var i=0; i<rows.length; i++){
|
||
|
|
var row = rows[i];
|
||
|
|
var oldVal = groups;
|
||
|
|
var path = [];
|
||
|
|
for(var j=0; j<groupFields.length; j++){
|
||
|
|
path.push(row[groupFields[j]]);
|
||
|
|
if(!oldVal[row[groupFields[j]]]){
|
||
|
|
if(j == groupFields.length-1){
|
||
|
|
oldVal[row[groupFields[j]]] = [];
|
||
|
|
}else{
|
||
|
|
oldVal[row[groupFields[j]]] = {};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
oldVal = oldVal[row[groupFields[j]]];
|
||
|
|
}
|
||
|
|
oldVal.push(row);
|
||
|
|
var pathStr = path.join('&#');
|
||
|
|
if($.inArray(pathStr,groupOrderStr) == -1){
|
||
|
|
groupOrder.push(path);
|
||
|
|
groupOrderStr.push(pathStr);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function initCss(){
|
||
|
|
if (!$('#datagrid-group-style').length){
|
||
|
|
$('head').append(
|
||
|
|
'<style id="datagrid-group-style">' +
|
||
|
|
'.row-sum{/*background-color:#34d7d9 !important;*/ font-weight:700;}'+
|
||
|
|
'.datagrid-td-rownumber{font-weight:400;}'+
|
||
|
|
'</style>'
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onAfterRender: function(target){
|
||
|
|
$.fn.datagrid.defaults.view.onAfterRender.call(this, target);
|
||
|
|
//合并单元格；
|
||
|
|
//$(target).datagrid('autoMergeCells', ['company','brand']);
|
||
|
|
}
|
||
|
|
});
|