Kendo UI - 数据源。使用 mvvm 将参数传递给服务器

Question

我无法正确使用数据源。

我的目标：创建用于过滤 kendo 网格（服务器端过滤器）的外部小部件。

我设法让它工作了，但这是一种解决方法，我正在寻找正确的方法

filterGrid 函数完成了所有工作，但它看起来不正确，我希望 parametermap 函数完成所有工作，但我无法弄清楚。请指教

这是我的视图模型的样子（我省略了不太重要的部分）：

var viewModel = kendo.observable({
       selectedInterface: null,
       selectedStatus: null,
       toHilanDate: new Date(),
       updateDate: new Date(),
       employeeId: null,
       factoryId: null,
       eventId:null,
       employees: new kendo.data.DataSource({
            transport: {
                parameterMap: function (data, type) {
                    return { criteria: data };//for the mvc controller
                },
                read: {
                    url: "tohilan/Employees",
                    type: "post",
                    data: {}
                }
            }
        }),
        filterGrid: function () {
            var data = {
                SelectedInterface: this.selectedInterface ? this.selectedInterface.Id:null,
                SelectedStatus: this.selectedStatus? this.selectedStatus.Key:null,
                ToHilanDate: kendo.toString(kendo.parseDate(this.toHilanDate), "d"),
                UpdateDate: kendo.toString(kendo.parseDate(this.updateDate), "d"),
                EmployeeId: this.get("employeeId"),
                FactoryId: this.get("factoryId"),
                EventId: this.eventId,
            };
            //set new data into datasource
           $('#employeeGrid').data('kendoGrid').dataSource.transport.options.read.data = data;
            //refresh grid
            $('#employeeGrid').data('kendoGrid').dataSource.read();
            $('#employeeGrid').data('kendoGrid').refresh();
        }
});
      kendo.bind($("#employees-view"), viewModel);

我的标记如下所示：（同样，只有重要部分）

<ul>
            <li>
                <label for="employeeId">מספר עובד:</label>
                <input type="number" id="employeeId" data-role="maskedtextbox" data-bind="value:employeeId"/>
            </li>
            <li>
                <label for="eventId">מספר אירוע:</label>
                <input type="number" id="eventId" data-role="maskedtextbox" data-bind="value:eventId"/>
            </li>
            <li>
                <label for="factoryId">מספר מפעל:</label>
                <input type="number" id="factoryId" data-role="maskedtextbox" data-bind="value:factoryId"/>
            </li>
            <li>
                <label for="toHilanDate">תאריך העברה לחילן:</label>
                <input type="date" id="toHilanDate" data-role="datepicker" data-bind="value:toHilanDate" />
            </li>
            <li>
                <label for="updateDate">תאריך עדכון:</label>
                <input type="date" id="updateDate" data-role="datepicker" data-bind="value:updateDate" />
            </li>
            <li>
                <label for="event-status">סטטוס אירוע:</label>
                <select id="event-status" data-role="dropdownlist" data-bind="value: selectedStatus, source: statusList" data-text-field="Value" data-value-field="Key" data-option-label=" "></select>
            </li>
            <li>
                <label for="interface">ממשק:</label>
                <select id="interface" data-role="dropdownlist" data-bind="value: selectedInterface, source: interfaceList" data-text-field="Description" data-value-field="Id" data-option-label=" "></select>
            </li>
            <li>
                <button type="submit" data-role="button" data-bind="events: {click:filterGrid}">סנן</button>
            </li>
        </ul>

Answer 1

我想我找到了答案，也许我打错了字什么的。我在 parametermap 函数而不是 filterGrid 函数中创建了数据对象。我刚刚用 viewModel 替换了 "this"。我仍然认为有更好的方法来处理它，但目前它对我来说恰到好处。

Kendo UI - 数据源。使用 mvvm 将参数传递给服务器

Kendo UI - Datasource. pass parameters to server using mvvm

kendo-ui

kendo-datasource

kendo-mvvm