在渲染函数

Question

我有以下代码来创建列：

DTColumnBuilder.newColumn(null).withTitle('Validation').renderWith(validationRenderer)

和渲染功能：

function validationRenderer(data, type, full, meta) {
    .......
}

现在，我想将自定义参数传递给validationRenderer，以便我可以在函数内部访问它，如下所示：

DTColumnBuilder.newColumn(null).withTitle('Validation').renderWith(validationRenderer('abc'))

function validationRenderer(data, type, full, meta, additionalParam) {
    // do something with additionalParam
}

我在文档中找不到它，但必须根据here

的引用在meta中传递其他参数

Answer 1

是的，你可以。或者，更好的是，技术上可以，但您可以使用巧妙的解决方法来处理您的问题。

我今天遇到了这个问题，并找到了一个非常悲伤（但有效）的解决方案。

基本上，最大的问题是render函数是传递给datatable处理程序的参数，当然它是隔离的。

在我的例子中，为了做一个实际的例子，我不得不向动态数据表添加几个动态按钮，每个按钮都有不同的动作。

显然，没有解决方案，直到我想到以下内容：问题似乎是渲染器功能范围有些孤立且无法访问。但是，因为＆＃34;返回＆＃34;只有当数据表有效地渲染字段时才调用函数，你可以将渲染函数包装在自定义自调用匿名函数中，在渲染单元格时提供参数使用它们

以下是我的实际例子，考虑以下几点：

• 目标是将每行的ID字段传递给几个不同的自定义函数，因此问题是在按钮被有效点击时传递按钮的ID以进行调用（因为您无法获得任何外部参考当它被渲染时它。）

• 我使用的是自定义类，如下所示：

  hxDatatableDynamicButton = function（label，onClick，classNames）{     this.label =标签;     this.onClick = onClick;     this.classNames = this.classNames || ＆＃39; col5p text-center＆＃39 ;; }

基本上，它只是创建了一个我稍后使用的实例。

在这种情况下，请考虑使用数组这两个不同的实例，其中一个具有＆＃34; test＆＃34;标签，另一个有＆＃34; test2＆＃34;标签

• 我通过for循环注入这些实例，因此我需要通过＆＃34; i＆＃34;在我的数据表中知道按下了哪个按钮。

由于代码实际上非常大（代码库很大），这里是完成这个技巧所需的相关代码片段：

scope.datatableAdditionalActionButtons.reverse();
scope._abstractDynamicClick = function(id, localReferenceID) {
    scope.datatableAdditionalActionButtons[localReferenceID].onClick.call(null, id);
};
for (var i = 0; i < scope.datatableAdditionalActionButtons.length; i++) {
    var _localReference = scope.datatableAdditionalActionButtons[i];
    var hax = (function(i){
        var _tmp = function (data, type, full, meta) {
            var _label = scope.datatableAdditionalActionButtons[i].label;
            return '<button class="btn btn-default" ng-click="_abstractDynamicClick('+full.id+', '+i+')">'+_label+'</button>';
        }
        return _tmp;
    })(i);

    dtColumns.unshift(DTColumnBuilder.newColumn(null).notSortable().renderWith(hax).withClass(_localReference.classNames));
}

那么，诀窍在哪里？诀窍完全在 hax 函数中，这就是它的工作原理：我们使用＆＃34; custom＆＃34;而不是传递常规的renderWith函数原型。 render，具有与默认参数相同的参数（因此参数相同）。然而，它在一个自动调用匿名函数中被隔离，这允许我们在其中任意注入一个参数，因此，允许我们在渲染时区分哪个＆＃34; i＆＃34;实际上，因为在这种情况下，函数的孤立范围永远不会丢失。

基本上，输出如下：

检查实际上表明元素有效地呈现不同，因此每个＆＃34; i＆＃34;正在被正确呈现，而如果函数不会包含在自动调用匿名函数中则不会有：

所以，基本上，在你的情况下，你会做这样的事情：

var _myValidator = (function(myAbcParam){
   var _validate = function (data, type, full, meta) {
      console.log("additional param is: ", myAbcParam); // logs "abc"
      return '<button id="'+myAbcParam+'">Hello!</button>'; // <-- renders id ="abc"
   }
   return _validate ;
})('abc');

DTColumnBuilder.newColumn(null).withTitle('Validation').renderWith(_myValidator);
// <-- note that _myValidator is passed instead of "_myValidator()", since it is already executed and already returns a function.

我知道这不是某人可能期待的答案，但是如果你需要在数据表中完成复杂的事情，那么实际上看起来唯一可行的方法是使用自调用匿名函数。

希望这可以帮助那些仍然遇到问题的人。