javascript - 是否可以更改SlickGrid中总行/总行的位置？

我需要设计一个SlikGrid表，以在与组标题相同的行中显示其组总数。我尚无法修改的默认行为会始终在组末尾显示组聚合。

绝对总数也是如此。总和行始终显示在表格的底部。是否有可能（甚至有些内部技巧）将总和行移到顶部并像excel一样固定的标题放在那儿？

更新：
我发现，通过将传递给setGrouping的对象的标志lazyTotalsCalculation设置为false，可以在组行格式化时使用总计。
因此，案例1可以借助此解决。我仍然希望使用更清洁的解决方案。

最佳答案

我一直在研究如何做到这一点，并花了几个小时试图弄清楚这一点，并提出了临时解决方案。我将所有聚合列显示为网格中的最后一组列。为了以不同的方式排列它们（如在间歇性聚合列中），您将不得不调整我的自定义元数据功能。

问题出在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。

然后，我将defaultGroupCellFormatter和defaultTotalsCellFormatter函数从groupitemmetadataprovider.js复制并调整到html文件的<script>标记中：

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);

然后，在许多卫星之后，您将拥有一个分组行，该行将仅跨越定义的列数，并使用传统的网格格式将总计添加到该行的其他列中。