Question

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

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

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

这是“值”列的代码段，以及我用于模板的代码段（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。

这是因为在函数内部始终是 javascript，而＃标记仅是kendo模板语言中的指令。

因此，将模板简化为：

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绑定，以获得更优雅的解决方案，而不是使用显式单击处理程序，但是我必须对此进行更多的试验才能弄清楚。

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

1 个答案: