Question

我有一个KendoUI网格，使用Knockout-Kendo插件在我的代码中定义如下。请务必注意，此网格的列数会根据从服务器收到的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>

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

Answer 1

我前一段时间遇到过类似的问题。问题是剑道网格与ko observables不能很好地协同工作。作为一种解决方法，您可以创建一个compute，它将数据作为普通的JS对象返回：

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

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

data: RowList.asJS

但这意味着你会丢失行模板中的observable。解决此问题的方法是在行内再次获取原始对象。

首先创建一个帮助函数，以便通过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>

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

1 个答案: