javascript - Angular uiGrid : D3 CellTemplate not sorting

Question

我正在尝试在 UiGrid 中显示自定义 D3 cellTemplate Angular 库并实现排序功能。按照此answer我能够实现它，但使用自定义目录而不是 nvd3 。为了使用自定义模板(此处为 D3 元素)对列进行排序，我使用 uiGrid 的 sortingAlgorithm 属性。问题是一旦为整个网格绘制了 D3，排序时它就不会更新。

columDef:

columnObj = {
                field: reportEvidenceHeaders[i],
                enableHiding: false,
                headerTooltip: true,
                cellTemplate: '<div class="ui-grid-cell-contents"><ui-grid-bar-chart data="row.entity.'+reportEvidenceHeaders[i]+'"></ui-grid-bar-chart></div>',
                sortingAlgorithm: uiGridViewSorting
            };

uiGridView排序:

var uiGridViewSorting = function(a, b, rowA, rowB, direction){
          a = Number(a.split("/")[0]);
          b = Number(b.split("/")[0]);
          if (a == b) return 0;
          if (a < b) return -1;
          return 1;
      };

ui-grid-bar-chart是D3目录。

用户界面网格条形图:

link: function(scope, element, attrs){
    d3.select(element[0]).append("svg").height("100%").width("100%");
}

在这里，我将 D3 附加到 element[0] 上。

网格:

第一张图上的网格看起来不错。

但是在排序时，除了包含 D3 元素的列之外，所有其他列都会更新。

骗子:Here

这里有什么问题吗？

Answer 1

有两个问题。

您需要将图形的绘制包装在 $watch 中，否则它不知道在网格更改时重绘(此处有更详细的说明: https://github.com/angular-ui/ui-grid/issues/743 )。这修复了其他列上的滚动和排序，但它本身不会修复图表列上的排序:

scope.$watch('data', function() {
   drawUiGridBarChart(scope.data, scope.width);
});

现在要修复此列的排序，field 需要指向 spark.data

{ field: 'spark.data', // not field: 'uiGrid', 
    cellTemplate: '...

更新的 Plunker:https://plnkr.co/edit/t281BcETvrLihSBAcWWo?p=preview