Ответ 1
Я нашел ваш вопрос очень интересным, потому что я не сразу понял ответ. Теперь я нашел время перечитать исходный код модуля группировки jqGrid и создать пример, который вам нужен.
Прежде всего, я подготовил демонстрацию, которая отображает следующие результаты:
Как вы можете видеть, что итоговая строка содержит много элементов, которые отформатированы по-разному:
Чтобы иметь итоговую строку в конце каждого блока группировки, нам нужно определить свойство groupSummary: [true]
в параметре groupingView
jqGrid. Затем нам нужно определить свойство summaryType для всех столбцов в colModel
, где итоговая строка не имеет пустой ячейки.
Например, в простейшем случае я определил для столбца 'amount'
свойство summaryType: 'sum'
.
Для столбца 'tax'
я дополнительно определил summaryTpl
:
summaryTpl: '<i>{0}</i>', summaryType: 'sum'
В результате сводка для столбца 'tax'
содержит курсивный текст.
Для столбца 'total'
я использовал разные цвета в зависимости от отображаемого значения. Результаты, имеющие значение grater как 1000, отображаются зеленым цветом. Другие значения отображаются красным цветом. Реализация представляет собой реальный пользовательский форматтер для сводной строки:
//formatter: 'number',
formatter: function (cellval, opts, rwdat, act) {
if (opts.rowId === "") {
if (cellval > 1000) {
return '<span style="color:green">' +
$.fn.fmatter('number', cellval, opts, rwdat, act) +
'</span>';
} else {
return '<span style="color:red">' +
$.fn.fmatter('number', cellval, opts, rwdat, act) +
'</span>';
}
} else {
return $.fn.fmatter('number', cellval, opts, rwdat, act);
}
},
summaryType: 'sum'
Вместо formatter: 'number'
я использовал пользовательский форматтер. Я не хотел реализовывать formatter: 'number'
еще раз, поэтому я назвал форматированный формат "число" по отношению к $.fn.fmatter('number', cellval, opts, rwdat, act)
.
Наиболее важной частью приведенного выше кода является строка
if (opts.rowId === "") {
Во время форматирования ячеек сетки пользовательский форматировщик вызывается с opts.rowId
, инициализированным как идентификатор строки. Только в случае форматирования итоговой строки opts.rowId
будет пустой строкой (""
). Я использую этот факт для реализации пользовательского форматирования.
В столбце 'closed'
показан еще один трюк. Я использую summaryType
, определенный как функция. Можно использовать это, чтобы сделать некоторые пользовательские сводные вычисления другими стандартными типами: "sum", "min", "max", "count" и "avg". В демоверсии я показываю "подсчет" всех и "подсчет" выбранных флажков и вывод результатов в сводку. Кроме того, итоговая ячейка дополнительно имеет флажок, который проверяется, если отмечен хотя бы один флажок в группе. Соответствующий код, включая пользовательский форматтер, следующий:
formatter: function (cellval, opts, rwdat, act) {
if (opts.rowId === "") {
return '<span style="display:inline-block;top:-2px;position:relative;">' +
cellval.checkedCount + ' of ' + cellval.totalCount + '</span> ' +
$.fn.fmatter('checkbox', cellval.max, opts, rwdat, act);
} else {
return $.fn.fmatter('checkbox', cellval, opts, rwdat, act);
}
},
summaryType: function (val, name, record) {
if (typeof (val) === "string") {
val = {max: false, totalCount: 0, checkedCount: 0};
}
val.totalCount += 1;
if (record[name]) {
val.checkedCount += 1;
val.max = true;
}
return val;
}
Нам нужно провести дерево разных значений, которые мы вычисляем: totalCount
, checkedCount
и max
. Вышеприведенный код показывает, что можно изменить исходный параметр строки val
на объект, который содержит всю необходимую нам информацию. Во время форматирования итоговой строки пользовательский форматировщик будет вызываться с cellval
, инициализированным объектом val
, который мы создали ранее. В способе мы можем сохранить любую пользовательскую информацию, а затем отобразить ее.
Я надеюсь, что с учетом демонстрации вы сможете создать любую сводную строку группировки, которая вам нужна.