我无法以正确的方式使用数据源。
我的目标:创建用于过滤剑道网格的外部小部件(服务器端过滤器)。
我设法使它工作,但这是一种解决方法,我正在寻找正确的方法
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>