Knockout-kendo KendoUI Grid 按网格单元格中的输入值排序答案

【问题标题】：Knockout-kendo KendoUI Grid Sorting by the input value in the grid cellKnockout-kendo KendoUI Grid 按网格单元格中的输入值排序
【发布时间】：2014-04-23 19:11:13
【问题描述】：

我有一个使用 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>

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

【问题讨论】：

标签： kendo-ui kendo-grid knockout-kendo

【解决方案1】：

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

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

然后将 data: RowList 更改为以下内容：

data: RowList.asJS

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

首先创建一个辅助函数来通过 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>

【讨论】：