Question

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

同样适用于绝对总数。总和行始终显示在表格的底部。是否有可能（即使有一些摆弄内部结构）将总和行移到顶部并坐在那里作为类似excel的固定标题？

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

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

之后的许多月，您将拥有一个只会跨越指定数量的列的组行，并使用传统的网格格式将总计添加到行中的其他列。

Answer 2

您可以在指定列时在标题列中添加sum容器，然后在每次数据绑定中的网格时更新它

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


}

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

2 个答案: