在HandsonTable Angular指令中使用数组中的数据

Use data from array in HandsonTable Angular directive

本文关键字：数组 数据 Angular 指令 HandsonTable      更新时间：2023-09-26

我正在尝试使用数组作为使用 Angular 指令创建的 HandsoneTable 中某些列的数据源。但是当使用通用数组表示法（name[0]）作为数据属性时，该特定表格单元格中不会呈现任何内容。我做错了什么还是不应该按照我想要的方式工作？

我的数据源：

$scope.data = [
    {
        'name': ['Bob', 'Bobson'],
        'email': 'bob@sample.com'
    },
    {
        'name': ['John', 'Johnson'],
        'email': 'john@sample.com'
    }
];

还有我的模板：

<div ng-app="Test">
    <div ng-controller="tableCtrl">
        <hot-table datarows="data">
            <hot-column data="name[0]"></hot-column>
            <hot-column data="name[1]"></hot-column>
            <hot-column data="email"></hot-column>
        </hot-table>
     </div>
</div>

请参阅此处的简单示例：https://jsfiddle.net/9qzo3wnv/4/

从技术上讲，不可能在数据属性上使用数组表示法（name[0]），但您还有其他几个选项来完成某些事情：

解决方案 1

改为将数据转换为对象。

示例：https://jsfiddle.net/4yuv1vyu/

$scope.data = [
  {
    'name': {0:'Bob',1:'Bobson'},
    'email': 'bob@sample.com'
  },
  {
    'name': {0:'John',1: 'Johnson'},
    'email': 'john@sample.com'
  }
];

解决方案 2

将数组转换为具有控制器中函数的对象：

示例：https://jsfiddle.net/vypahad6/

详细信息：https://stackoverflow.com/a/4215753/3298029

$scope.toObject = function(arr) {
  var rv = {};
  for (var i = 0; i < arr.length; ++i)
    rv[i] = arr[i];
  return rv;
}
for (var d in $scope.data) {
  $scope.data[d].name = $scope.toObject($scope.data[d].name);
}

解决方案 3

利用可动手的自定义单元格渲染器功能：

示例：https://jsfiddle.net/sbkwcfr5/

详细信息：http://docs.handsontable.com/0.24.1/demo-custom-renderers.html

View:
<hot-column data="name" renderer="customRendererName"></hot-column>
Controller:
$scope.customRendererName = function(instance, td, row, col, prop, value, cellProperties) {
  var html = Handsontable.helper.stringify(value[0]);
  td.innerHTML = html;
  return td;
  return value[0];
}
相关文章：