如何在AngularJsUI网格中将日期集合设置为数据源？

Question

I need to display only a Date Collection object as a data source in my UI Grid.

Do I need to define a field under ColumnDefs in this case? Also, I need to include a column to delete that particular row, in this case Delete the current Date object.

我怎样才能做到这一点？下面是我的代码

editor.mySeasonBreaks = {            
        data: "editor.mySeasons",
        columnDefs:

       [{ field: "????", visible: true, displayName: "Season Break" },
        {
            name: 'delete',
            displayName: "", 
            cellTemplate: "<button ng-click="editor.delete(row.entity)" />"
        }]
    };

在上面的代码中，editor.mySeasons只是一个日期数组对象。

提前致谢

Answer 1

这不是推荐的方案，但您可以使用类似这样的方案：

$scope.myData=['2015-22-07', '2017-10-08', '2020-17-02'];
$scope.gridOptions = { 
  data: 'myData',
  columnDefs: [
    {
      displayName: 'Date Array',
      cellTemplate: '<div class="ngCellText ng-class="col.colIndex()">{{row.entity}}</div>'
    }
  ]
};

你可以测试一下here。

排序有问题，可能还有其他问题。

IMO 最好将日期数组转换为对象数组：

var res = [];
myData.forEach(function(el){
    res.push({date: el});
});

然后照常指定列：

{ field: 'date', visible: true, displayName: 'Season Break' }

Answer 2

您可以使用日期创建对象数组并根据需要定义列。通过这种方式，您可以获得更多控制权，并且可以轻松 adjust/expand.

现在我为您创建的行删除 a Plunkr 这展示了一个可能的解决方案。

正如您所建议的，您需要添加一个引用您的删除函数的单元格模板

cellTemplate: "<button ng-click=\"grid.appScope.delete(row)\">DELETE ROW</button>"

要访问该函数，您需要将其添加到您的 gridDefinition 中，然后属性被调用 appScopeProvider

可能的设置是

appScopeProvider: {
  delete : function(row) {
    editor.mySeasons.forEach(function(entry, index){
      if(entry.myDate === row.entity.myDate) {
        editor.mySeasons.splice(index, 1);
      }
    });
  },
}

如何在AngularJsUI网格中将日期集合设置为数据源？

How to set date collection as a data source in AngularJs UI grid?

angularjs

angular-ui-grid