Можно ли изменить положение итоговых/сумма строк в SlickGrid?

Question

Мне нужно создать таблицу SlikGrid, которая отображает его итоговые значения в группе в той же строке, что и заголовок заголовка группы. Поведение по умолчанию, которое я еще не смог изменить, отображает групповые агрегаты всегда в конце группы.

То же самое касается абсолютных итогов. Строка суммы всегда отображается в нижней части таблицы. Возможно ли (даже с некоторыми возиться с внутренними элементами) переместить строку суммы в верхнюю часть и сидеть там как отличный заголовок?

Обновление: я обнаружил, что путем установки флага lazyTotalsCalculation объекта, переданного setGrouping к ложному итоговым доступен во время форматирования группы строк. Таким образом, случай №1 можно решить с помощью этого. Я по-прежнему предпочитаю более чистое решение.

Answer 1

Я исследовал, как сделать эту самую вещь, и провели несколько часов, пытаясь чтобы понять это, и я придумал решение ad hoc. Я отображаю все свои столбцы агрегата в качестве последней группы столбцов в моей сетке. Чтобы упорядочить их по-разному (как в прерывистых столбцах агрегата), вам придется настроить мою собственную функцию метаданных.

Проблема заключается в groupitemmetadataprovider.js:

function getGroupRowMetadata(item) { 
     return { 
     selectable: false, 
     focusable: options.groupFocusable, 
     cssClasses: options.groupCssClass, 
     columns: { 
      0: { 
      colspan: "*", 
      formatter: options.groupFormatter, 
      editor: null 
      } 
     } 
     }; 
    } 

Он возвращает только один столбец в каждой группе, следовательно, группа строку, которая охватывает всю сетку.

Чтобы изменить это, я сначала отредактировал groupitemmetadataprovider.js, добавив следующее в пределах var _defaults: getGroupRowMetadata: getGroupRowMetadata,.

Затем в значении return в нижней части файла я изменил "getGroupRowMetadata":getGroupRowMetadata на следующее: "getGroupRowMetadata":options.getGroupRowMetadata.

Затем я скопировал и подправили defaultTotalsCellFormatter функцию defaultGroupCellFormatter и от groupitemmetadataprovider.js в <script> тега в моем HTML файл:

function tweakedGroupCellFormatter(row, cell, value, columnDef, item) { 
    //removed initial conditional statement 
    var indentation = item.level * 15 + "px"; 
    return "<span class='slick-group-toggle " + 
     (item.collapsed ? "collapsed'" : "expanded'") + 
     "' style='margin-left:" + indentation +"'>" + 
     "</span>" + 
     "<span class='slick-group-title' level='" + item.level + "'>" + 
     item.title + 
     "</span>"; 
} 

function tweakedTotalsCellFormatter(row, cell, value, columnDef, item) { 
    //pass in item.totals instead of just item to your formatters 
    var cell_value = (columnDef.groupTotalsFormatter && columnDef.groupTotalsFormatter(item.totals, columnDef)) || ""; 
    //if you want to apply the same css styling as the group title 
    //if not, just return cell_value as is 
    return "<span class='slick-group-title' level='" + item.level + "'>" + 
     cell_value + 
     "</span>"; 
} 

Моя функция пользовательских метаданных, чтобы перезаписать исходный один:

function groupTotalsRowMetadata(item) { 
    var get_cols = { 
     //keep the original grouping title but change the colspan 
     0: { 
      colspan: get_colspan - aggregate_list.length, 
      formatter: tweakedGroupCellFormatter, 
      editor: null 
     } 
    } 
    //loop through and define the remaining group row columns and provide the totals formatter 
    //customize this step to assign the formatter to the the columns that you want totaled 
    for (var i = get_colspan - aggregate_list.length + 1, ii = get_colspan; i < ii; i++) { 
     get_cols[i] = { 
      colspan: 1, 
      formatter: tweakedTotalsCellFormatter, 
      editor: null 
     }; 
    } 
    return { 
     selectable: false, 
     focusable: true, 
     //optionally add group-row-level class for custom styling like so 
     //this will be applied to every group row at item.level 
     cssClasses: "slick-group level-" + item.level, 
     columns: get_cols 
    }; 
} 

И наконец, инициализируйте поставщика с помощью функции пользовательских метаданных:

var groupItemMetaDataProvider = new Slick.Data.GroupItemMetadataProvider({groupRowMetadata:groupTotalsRowMetadata}); 
dataView = new Slick.Data.DataView({groupItemMetadataProvider: groupItemMetadataProvider, inlineFilters: true}); 
grid = new Slick.Grid("#mygrid", dataView, columns, options); 
grid.registerPlugin(groupItemMetadataProvider); 

И позже, после нескольких лун, вы будете иметь группу строк, которая будет охватывать только определенное количество столбцов и добавлять итоговые значения к другим столбцам в строке с традиционным форматированием сетки.

Answer 2

Вы можете добавить контейнер суммы в заголовке столбца, когда задав столбцы, а затем обновлять его каждый раз, когда сетка с привязкой к данным

var myData; 
var column = { id: "MyColumn", name: "MyColumn <span class='summary MyColumn'></span>"}; 

function OnMyGridReloadData(){ 
    var summary = {} 
    for(i = 0; i < myData.length;i++){ 
     summary['MyColumn'] += myData[i]['MyColumn']; 
    } 
    $('.MyColumn.summary').text(summary['MyColumn']); 


}