在渲染函数中传递自定义参数答案

【问题标题】：Passing custom parameters in render function在渲染函数中传递自定义参数
【发布时间】：2017-03-22 17:57:31
【问题描述】：

我有以下代码来创建列：

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 中必须有一些东西可以传递其他参数

【问题讨论】：

我不认为这是可能的，afaik 你不能猴子修补render() 方法。但我很想看到一个解决方案:)
@davidkonrad：有点晚了，但我找到了一种使用自调用匿名函数的可能解决方法。到目前为止，这似乎是唯一可能的方法。

标签： datatables datatables-1.10 angular-datatables

【解决方案1】：

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

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

基本上，最大的问题是渲染函数是传递给数据表处理程序的参数，它（当然）是隔离的。

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

显然，没有解决方案，直到我想到以下问题：问题似乎是渲染器函数范围有些孤立且无法访问。但是，由于仅当数据表有效地呈现字段时才调用函数的“返回”，因此您可以将呈现函数包装在 自定义自调用匿名函数中，并在其中提供参数以在单元格中使用它们正在渲染。

考虑到以下几点，这是我对实际示例所做的：

目标是将每一行的 ID 字段传递给几个不同的自定义函数，所以问题是传递按钮的 ID 以在按钮被有效单击时调用（因为您无法获得它的任何外部引用渲染时）。
我正在使用自定义类，如下所示：

hxDatatableDynamicButton = function(label, onClick, classNames) { this.label = 标签； this.onClick = onClick; this.classNames = this.classNames || 'col5p 文本中心'; }

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

在这种情况下，考虑有一个包含 2 个不同实例的数组，一个具有“test”标签，另一个具有“test2”标签。

我通过 for 循环注入这些实例，因此我需要将“i”传递给我的数据表以了解正在按下哪个按钮。

由于代码实际上相当大（代码库很大），这里是您完成这个技巧所需的相关 sn-p：

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 函数，这就是它起作用的原因：我们使用的是“自定义”渲染，而不是传递常规的 renderWith 函数原型，它具有相同的参数（因此具有相同的参数) 作为默认值。但是，它隔离在一个自调用匿名函数中，这允许我们在其中任意注入一个参数，因此，允许我们在渲染时区分它实际上是哪个“i”，因为在这种情况下，函数的隔离范围永远不会丢失。

基本上，输出如下：

并且检查实际上表明元素的有效呈现方式不同，因此每个“i”都被正确呈现，而如果函数没有被包装在自调用匿名函数中，则不会有：

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

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.

我知道这并不完全是人们期望的答案，但如果您需要在数据表中完成一些复杂的事情，看起来唯一可行的方法就是使用自调用匿名函数。

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

【讨论】：