Question

我使用渲染回调函数向我的jQuery dataTable添加div：

columns: [
            {
                data: 'FirstStep',
                render: function (data, type, row) {
                    if (data === 4) {
                        return '<div class="red-circle"></div>';
                    }
                    else if (data === 3) {
                        return '<div class="yellow-circle"></div>';
                    }
                    else if (data === 2) {
                        return '<div class="blue-circle"></div>';
                    }
                    else if (data <= 1) {
                        return '<div class="green-circle"></div>';
                    }
                }
            },
            --Other columns 
            }
        ]

这很好但是如果我将渲染调用提取回函数（需要多次重用）并尝试如下代码，它就不起作用。

function renderCellItems(data, type, row) {
        if (data === 4) {
            return '<div class="red-circle"></div>';
        }
        else if (data === 3) {
            return '<div class="yellow-circle"></div>';
        }
        else if (data === 2) {
            return '<div class="blue-circle"></div>';
        }
        else if (data <= 1) {
            return '<div class="green-circle"></div>';
        }
    }

...............

{
    data: 'FirstStep',
    render: renderCellItems(data, type, row)
}

Answer 1

问题是因为您当前正在从该函数提供响应作为render属性，即。 HTML字符串，但属性需要一个函数。

您需要为该函数提供引用。为此，请删除尾随括号和参数：

{
  data: 'FirstStep',
  render: renderCellItems
}

另请注意，您可以通过使用数组来存储返回值来改进逻辑：

function renderCellItems(data, type, row) {
  var classes = ['green-circle', 'blue-circle', 'yellow-circle', 'red-circle'];
  return '<div class="' + classes[Math.max(data, 1) - 1] + '"></div>';
}

console.log(0, renderCellItems(0));
console.log(1, renderCellItems(1));
console.log(2, renderCellItems(2));
console.log(3, renderCellItems(3));
console.log(4, renderCellItems(4));

渲染回调函数

1 个答案: