Slickgrid 分组行样式答案

【问题标题】：Slickgrid grouping rows styleSlickgrid 分组行样式
【发布时间】：2014-02-20 00:01:30
【问题描述】：

在这个例子中：

http://mleibman.github.io/SlickGrid/examples/example-grouping

您可以按某些列对行进行分组，但我希望组内的行缩进。有没有办法可以将类添加到分组的行或其他东西？我似乎找不到这样做的好方法。

我正在通过以下方式创建分组：

function groupByDuration() {
  dataView.setGrouping({
    getter: "duration",
    formatter: function (g) {
      return "Duration:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
    }
  });
}

谢谢！

【问题讨论】：

标签： slickgrid

【解决方案1】：

我通过将我自己的自定义格式化程序添加到第一列来解决这个问题。

var myFormatter = function(row, cell, value, columnDef, dataContext) {
    var groupings = this.getGrouping().length;
    var indentation = groupings * 15 + 'px';
    var spacer = '<span style="margin-left:' + indentation + '"></span>';
    return spacer + value;
};

我将函数绑定到 slickgrid 的 dataView，以便我可以访问分组。

【讨论】：

【解决方案2】：

试试这个...

$(".slick-row:not(.slick-group)").css('margin-left','20px');

这将为您提供所有不属于 slick-group 类的行（div），即谁是分组行。

对于嵌套组，您必须通过closest() 检查任何父级是否具有slick-group 类并相应地应用边距

【讨论】：

虽然它可能是一个有效的解决方案，但稍微解释一下不会有坏处，并且会帮助用户更好地理解。