datatables - 在渲染函数中传递自定义参数

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

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

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

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

就我而言，为了制作一个实际示例，我必须向动态数据表添加几个动态按钮，每个按钮都有不同的操作。

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

以下是我在实际示例中所做的操作，考虑到以下几点:

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

• 我正在使用自定义类，如下所示:

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

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

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

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

由于代码实际上相当大(代码库很大)，因此这里是完成该技巧所需的相关片段:

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 函数原型(prototype)，而是使用“自定义”渲染，它具有相同的参数(因此参数相同) ) 作为默认值。然而，它是隔离在一个自调用匿名函数中，这允许我们在其中任意注入(inject)一个参数，因此，允许我们在渲染时区分它实际上是哪个“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.

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

希望这对仍然遇到此问题的人有所帮助。