Question

我正在尝试在UiGrid角度库中显示自定义D3 cellTemplate并实现排序功能。通过遵循此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
            };

uiGridViewSorting：

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目录。

UI-网格条形图：

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

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

网格：

第一张图纸上的网格看起来很好。

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

Plunker ：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

Angular uiGrid：D3 CellTemplate不排序

1 个答案: