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

时间:2015-04-16 15:31:29

标签: kendo-ui kendo-datasource kendo-mvvm

我无法以正确的方式使用数据源。

我的目标:创建用于过滤kendo网格的外部窗口小部件(服务器端过滤器)。

我设法让它发挥作用,但这是一种解决方法,我正在寻找正确的方法

filterGrid函数完成所有工作,但它看起来不对, 我希望参数映射功能完成所有工作,但我无法弄明白。 请指教。

这是我的视图模型的样子(我省略了不太重要的部分):

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>

1 个答案:

答案 0 :(得分:0)

我想我找到了答案,也许我有一个错字或什么的。 我在parametermap函数中创建了数据对象而不是filterGrid函数。我刚刚更换了#34;这个&#34;使用viewModel。我仍然认为有更好的方法可以解决它,但目前它正好适合我。