angular JS中 STColumn 怎么使用 render

在angularJS中，STColumn可以使用render属性来自定义列的渲染方式。

render属性可以接收一个函数作为参数，该函数用于自定义列的渲染方式。该函数接收三个参数：

value：当前单元格的值。
rowData：当前行的数据。
rowIndex：当前行的索引。

下面是一个示例，演示如何使用render属性来自定义列的渲染方式：

$scope.columns = [
  { field: 'name', title: 'Name' },
  { field: 'age', title: 'Age', render: function(value, rowData, rowIndex) {
    if (value < 18) {
      return '<span style="color: red;">' + value + '</span>';
    } else {
      return value;
    }
  } }
];

$scope.data = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 15 },
  { name: 'Bob', age: 25 }
];

在上面的示例中，我们定义了一个名为age的列，并使用render属性来自定义该列的渲染方式。如果年龄小于18岁，我们将其渲染为红色字体，否则按原样渲染。

在HTML模板中，我们可以使用ng-repeat指令来遍历数据并渲染表格：

<table st-table="data">
  <thead>
    <tr>
      <th ng-repeat="column in columns">{{ column.title }}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in data">
      <td ng-repeat="column in columns" ng-bind-html="column.render(row[column.field], row, $index)"></td>
    </tr>
  </tbody>
</table>

在上面的示例中，我们使用ng-repeat指令遍历columns数组来渲染表头，并使用ng-repeat指令遍历data数组来渲染表格内容。在每个单元格中，我们使用ng-bind-html指令来渲染通过render函数返回的HTML代码。

需要注意的是，使用ng-bind-html指令需要在控制器中注入$sanitize服务，以确保渲染的HTML代码是安全的：

app.controller('MyController', ['$scope', '$sanitize', function($scope, $sanitize) {
  $scope.columns = [...];
  $scope.data = [...];

  // ...

  $scope.renderHtml = function(htmlCode) {
    return $sanitize(htmlCode);
  };
}]);

在HTML模板中，我们可以使用$filter服务来调用renderHtml函数：

<td ng-repeat="column in columns" ng-bind-html="renderHtml(column.render(row[column.field], row, $index))"></td>

上面的示例中，我们在ng-bind-html指令中调用了renderHtml函数来渲染HTML代码。

这样，我们就可以使用render属性来自定义STColumn的渲染方式了