AngularJS 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 的渲染方式了。