Kendo-Knockout:如何过滤和排序远程数据源?

马特

我正在努力争取KendoGridKnockout 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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用Kendo UI过滤JSON数据源

来自分类Dev

Kendo UI Grid本地数据源列默认排序

来自分类Dev

Kendo UI Grid本地数据源列默认排序

来自分类Dev

Kendo UI Grid,对数据源组进行排序

来自分类Dev

如何在排序时同步Kendo UI网格数据源?

来自分类Dev

kendo UI数据源和复杂的JSON

来自分类Dev

如何在Kendo ListView中更改数据源

来自分类Dev

如何在Kendo Grid中使用SignalR数据源

来自分类Dev

如何在Kendo Grid中使用SignalR数据源

来自分类Dev

如何动态更改Kendo UI Treeview数据源

来自分类Dev

如何使用Kendo MVVM和c#从服务器端API调用发出Kendo数据源请求?

来自分类Dev

页面加载后的Kendo数据源

来自分类Dev

kendo网格日期格式数据源

来自分类Dev

遍历从JayData返回的kendo数据源

来自分类Dev

查询Kendo UI数据源

来自分类Dev

从其数据源获取Kendo Grid

来自分类Dev

带有远程数据源的Kendo TreeView仅填充根元素

来自分类Dev

Kendo UI Diagram的数据源可以同步到远程API吗?

来自分类Dev

Kendo数据源过滤器无法按预期工作

来自分类Dev

Kendo UI数据源过滤器通过比较字段

来自分类Dev

Kendo-UI数据源“包含”过滤器不起作用

来自分类Dev

Kendo UI网格数据源在过滤器上触发额外的Ajax请求

来自分类Dev

Kendo UI数据源过滤器通过比较字段

来自分类Dev

Kendo-UI数据源“包含”过滤器不起作用

来自分类Dev

Kendo数据源过滤器无法按预期工作

来自分类Dev

Kendo 数据源包含过滤器不起作用

来自分类Dev

从Kendo Grid数据源导出所有数据

来自分类Dev

Kendo UI图表-数据绑定后更新数据源

来自分类Dev

使用本地存储缓存Kendo数据源数据