0

我有一个使用 Knockout-Kendo 插件在我的代码中定义的 KendoUI 网格，如下所示。需要注意的是，此网格的列数会根据从服务器接收到的 json 而变化。

<script type="text/html" id="grid">
    <div class="grid-input input" data-bind="kendoGrid:
    {
        data: RowList,
        columns: ko.toJS(GridHeader.ColumnDefinitionList),
        rowTemplate: 'kendoui-grid-row',
        altRowTemplate: 'kendoui-alt-grid-row',
        useKOTemplates: true,
        scrollable: false,
        pageable: { pageSize: 10 },
        sortable: true
    }"></div>
</script>

<script type="text/html" id="kendoui-grid-row">
    <tr data-bind="visible: IsDeleted() == false, template: { name: 'grid-row' }"></tr>
</script>

<script type="text/html" id="kendoui-alt-grid-row">
    <tr data-bind="visible: IsDeleted() == false, template: { name: 'grid-row' }" class="k-alt"></tr>
</script>

<script type="text/html" id="grid-row">
    <td><div class="grid-button delete-row-button"><span class="icon-delete"></span></div></td>
    <!-- ko foreach: CellList -->
    <td data-bind="template: { name: Input.Type, data: Input }">
    </td>
    <!-- /ko -->
</script>

<script type="text/html" id="text">
    <input class="text-input input k-textbox" data-bind="value: Value" />
</script>

在这种情况下，我有一个充满文本框的网格（在网格的每个单元格中，都有一个文本类型的输入）。现在我的问题是，即使输入中有文本，通过单击网格标题进行排序也无济于事。我想做的是能够定义排序的目标。在这种情况下，它将是网格单元内的输入值。

4

1 回答 1

1

不久前我遇到了类似的问题。问题是 Kendo Grid 不适用于 ko observables。作为一种解决方法，您可以创建一个以普通 JS 对象形式返回数据的计算对象：

this.RowList.asJS = ko.computed(function() {
    return ko.toJS(this.RowList());
}, this);

然后data: RowList使用以下内容进行更改：

data: RowList.asJS

然而，这意味着您丢失了行模板中的可观察对象。一种解决方法是在您的行中再次获取原始对象。

首先创建一个辅助函数来通过 ID 快速获取一个项目（假设你有一个 Id 属性）：

this.RowList.getById = function(id) {
    return ko.utils.arrayFirst(this.RowList(), function(row) {
         return ko.unwrap(row.Id) === id;
    });
}, this);

现在您可以getById在行模板中调用：

<script type="text/html" id="kendoui-grid-row">
    <!-- ko with: $root.RowList.getById(Id) -->
        <tr data-bind="visible: IsDeleted() == false, template: { name: 'grid-row' }"></tr>
    <!-- /ko -->
</script>
于 2014-04-28T13:56:27.353 回答