kendo-ui 网格列中的自定义模板具有不一致的数据类型

Question

我需要使用 kendo-ui 网格进行数据编辑。问题是返回响应中的每个可能项都是字符串，但其中包含其他类型的值（例如 Value = "true" 或 Value = "32%" 或 Value = "[0:standard, 1:advanced]"）。

所以我需要在网格上设置模板以对应字符串中的不同数据类型。 所以对于真/假我必须有复选框，对于 32%，它应该提供文本框，但有百分比验证，对于数组响应，它需要是一个下拉列表。

我设法使用编辑器设置下拉和文本框选项，但我无法使复选框以任何方式正确处理。复选框按预期显示，但无论我尝试什么，它都不会在保存网格后将数据绑定到网格。 （无论值如何，它总是不被检查）

这是“值”列的代码 sn-p 以及我用于模板的代码（item.type === "3" 是布尔值）。

                        field: 'value',
                        title: 'value',
                        headerAttributes: {
                            'class': 'table-header-cell'
                        },
                        template: function (item) {
                                if (item.type === "3") {
                                    var boolValue = (/true/i).test(item.value);
                                    item.value = boolValue;
                                    return  '<input id="' + item.name+ '" type="checkbox" #= value ? \'checked="checked"\' : "" # class="chkbx" />';
                                } else {
                                    return ''; //this will follow for other types
                                }
                            },

提前致谢。

Answer 1

当模板定义是一个函数时，您不需要像使用 kendo 的模板语言或直接使用字符串定义 kendo 模板时那样使用 # 标记来区分标记和 javascript。

这是因为在函数内部它是 always javascript 并且 # 标记只是剑道模板语言中的指令。

因此，将您的模板简化为：

template: function (item) {
  return  '<input class="chkbx" id="' + item.name + '" type="checkbox"' + (item.value ? 'checked="checked"' : '') + '/>';
}

为简单起见，我省略了其他数据类型处理。

然后，您需要添加代码以在复选框更改发生时将其推送到网格的数据源中：

$("#grid").on("click", ".chkbx", function () {
    var $checkBox = $(this),
    checked = $checkBox.is(":checked"),
    dataItem = grid.dataItem($checkBox.closest("tr"));

    dataItem.set("value", checked);
});

这是我目前在生产代码中使用的一种技术。

Dojo example

也可以在模板中使用 kendo MVVM 绑定来获得更优雅的解决方案，而不是显式点击处理程序，但我必须对此进行更多试验才能弄清楚。