我正在努力争取KendoGrid
并Knockout JS
共同努力。到目前为止,一切都很好。。除了我不知道如何使用远程数据源进行过滤和排序(我不希望在能够对数据进行排序和过滤之前将所有数据加载到客户端) )。这是我到目前为止的内容:
标记
<div class="row">
<div id="Grid" data-bind="kendoGrid: Records"></div>
</div>
JS
var PageVM = function (model) {
model = model || {};
var self = this;
self.Id = ko.observable(model.Id || 0);
self.Title = ko.observable(model.Title || '');
self.Slug = ko.observable(model.Slug || '');
self.MetaKeywords = ko.observable(model.MetaKeywords || '');
self.MetaDescription = ko.observable(model.MetaDescription || '');
self.IsEnabled = ko.observable(model.IsEnabled || false);
self.BodyContent = ko.observable(model.BodyContent || '');
self.CssClass = ko.observable(model.CssClass || '');
self.CultureCode = ko.observable(model.CultureCode || '');
}
var ViewModel = function () {
var self = this;
self.Records = ko.observableArray([]);
self.Refresh = function () {
OData.read({
requestUri: "/odata/cms/Pages"
},
function (data, response) {
viewModel.Records([]);
$.each(data.results, function () {
var pageVM = new PageVM(this);
viewModel.Records.push(pageVM);
});
},
function (e) {
alert(e.message);
});
};
self.Edit = function () {
alert("test");
};
ko.bindingHandlers.kendoGrid.options = {
pageable: {
refresh: true
},
scrollable: false,
columns: [{
field: "Title",
title: "Title"
}, {
field: "Slug",
title: "Slug"
},{
field: "IsEnabled",
title: "IsEnabled"
},{
field: "Id",
title: " ",
template: '<a onclick="edit()" class="btn btn-default btn-sm">Edit</a> <a href="Delete/#=Id#" class="btn btn-danger btn-sm">Delete</a>'
}]
};
};
var viewModel;
$(document).ready(function () {
viewModel = new ViewModel();
viewModel.Refresh();
ko.applyBindings(viewModel);
});
function edit() {
alert("test");
}
如您所见,我正在使用OData。至于kendoGrid
敲除绑定,它来自这里:http : //rniemeyer.github.io/knockout-kendo/web/Grid.html
我猜我需要做的可能是首先从KendoGrid本身获取过滤器并进行排序,然后手动将其附加到odata查询字符串中。我还必须手动告诉Kendo总页数,以便它知道要在网格中显示多少页号。
因此,我想我知道需要做些什么,但我不知道从哪里开始(例如,如何使用KendoGrid获取/设置此类数据?)。
经过数小时的尝试,我最终决定了一个更简单的解决方案:直接与源KendoGrid
一起使用OData
,然后仅Knockout
用于创建和编辑单个条目(不需要知道网格中的所有条目) 。
这还花了一些时间。..以下链接是一个好的开始:http : //blogs.telerik.com/kendoui/posts/12-10-25/using_kendo_ui_with_mvc4_webapi_odata_and_ef
但是,它并没有给我所有我需要的答案。例如,我需要弄清楚ASP.NET Web API使用该属性value
来存储数据和odata.count
记录总数。这是我的最终实现(减去淘汰赛内容):
$(document).ready(function() {
$("#Grid").kendoGrid({
data: null,
dataSource: {
type: "odata",
transport: {
read: {
url: "/odata/cms/Pages",
dataType: "json"
}
},
schema: {
data: function (data) {
return data.value;
},
total: function (data) {
return data["odata.count"];
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
filterable: true,
sortable: true,
pageable: {
refresh: true
},
scrollable: false,
columns: [{
field: "Title",
title: "Title"
}, {
field: "Slug",
title: "Slug"
},{
field: "IsEnabled",
title: "Is Enabled"
},{
field: "Id",
title: " ",
template: '<a onclick="editRecord(#=Id#)" class="btn btn-default btn-sm">Edit</a> <a onclick="deleteRecord(#=Id#)" class="btn btn-danger btn-sm">Delete</a>'
}]
});
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句