使用kendo网格为angularjs进行服务器端过滤 [英] Server side filtering using kendo grid for angularjs

问题描述

我正在尝试使用kendo网格为angularjs实现服务器端过滤。

我不知道该怎么做。



我在Angularjs中的代码：

I'm trying to implement server side filtering using kendo grid for angularjs.
I'm not sure how to do it.

My code in Angularjs:

$scope.DS = new kendo.data.DataSource({
transport: {
read: {
url: "/api/Employees",
dataType: "json",
contentType: "application/json",
type: "GET" },
update: {
url: "/api/Employees/PUT",
dataType: "json",
contentType: "application/json",
type: "PUT" },
destroy:
 { url: "/api/Employees/DELETE",
  dataType: "json",
  contentType: "application/json",
   type: "DELETE" },
  create: { url: "/api/Employees/POST",
  dataType: "json",
  contentType: "application/json",
  type: "POST" },
  parameterMap: function (options, operation)
  { if (operation !== "read") {
  console.log(JSON.stringify(options.models));
  return JSON.stringify(options.models); } } }, 
  batch: true,
  pageSize: 5,
 schema: {
  model: {
 id: "Id",
 data: 'Data',
 total: 'Total',
 errors: 'Errors',
 fields: {
 Id: { editable: false, nullable: false, type: "number" },
 Email: { editable: true }, 
 UserName: { editable: true, type: "string"},
 FirstName: { editable: true, validation: { required: true } },
 LastName: { editable: true, validation: { required: true } },

  Age: { editable: true, validation: { required: true } },

  Phone: { editable: true, validation: { required: true } } } } } });

  $scope.mainGridOptions = { dataSource: $scope.DS,

  /*dataBound: function Autocolumnwidth(e) { var grid = e.sender; for (var 
   i = 0; i < grid.columns.length; i++) { grid.autoFitColumn(i); } },*/

  toolbar: ["create"],

 columns: [ { field: "Id", hidden: true },

{ field: "Email", title: "Email", width: "100px" },

{ field: "UserName", title: "User Name", width: "100px" },

 { field: "FirstName", title: "First Name", width: "100px" },

 { field: "LastName", title: "Last Name", width: "100px" },

 { field: "Phone", title: "Phone", width: "100px" },

 { field: "Age", title: "Age", width: "100px" },

 {command: [{ name: "edit", text: { edit: "Edit", update: "Save", cancel: "Cancel" } },"destroy"], title: "Actions", width: "150px" } ],

  pageable: {

  refresh: true,

 input: true,

   numeric: false,

  pageSizes: [5,10, 20, 30, 50, 75, 100, 500, 1000] },

  sortable: true,

 resizable: true, 

navigatable: true,

serverPaging: true,

serverSorting: true,

serverFiltering: true,

 editable: { mode: "inline" },

 filter: {filters:

  [{ field: 'FirstName', operator: 'Contains', value: 'AA' }] }, // Not working I got SCRIPT438: SCRIPT438: Object doesn't support property or method 'call'

 serverFiltering: true,

 filterable: { mode: "row" },

 noRecords: { template: "No results available." } };

我尝试过：



我不知道如何从服务器端处理它，但我在控制器中有这个代码：

What I have tried:

I don't know how to handle it from server side, but I have this code in controller:

public DataSourceResult Filter(Models.DataSourceRequest request)
{

    var employees = db.Users.OrderBy(o => o.Id);
    var i = employees.ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter);
    var data = i.Data; // This is contain filtered data
    request.Take = i.Total;
    request.Skip = 0;
    return employees.ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter);
}

这是型号：

This is the model:

 public class DataSourceRequest
{
    public int Take { get; set; }
    public int Skip { get; set; }
    public IEnumerable<Kendo.DynamicLinq.Sort> Sort { get; set; }
    public Kendo.DynamicLinq.Filter Filter { get; set; }
} 

推荐答案

scope.DS = new kendo.data.DataSource（{
transport：{
读取：{
url：/ api / Employees，
dataType：json，
contentType：application / json，
类型：GET }，
更新：{
url：/ api / Employees / PUT，
dataType：json，
contentType：application / json，
键入：PUT}，
destroy：
{url：/ api / Employees / DELETE，
dataType：json，
contentType：application / json ，
类型：DELETE}，
create：{url：/ api / Employees / POST，
dataType：json，
contentType：application / json ，
类型：POST}，
parameterMap：function（options，operation）
{if（operation！==read）{
console.log（JSON） .stringify（options.models））;
返回JSON.stringify（options.models）;}}}，
batch：true，
pageSize：5，
schema：{
型号：{
id：Id，
数据：'数据'，
总计：'总计'，
错误：'错误'，
字段：{
Id：{editable：false，nullable：false，type：number}，
电子邮件：{editable：true}，
用户名： {editable：true，type：string}，
FirstName：{editable：true，validation：{required：true}}，
LastName：{editable：true，validation：{required：true} }，

年龄：{editable：true，验证：{required：true}}，

电话：{editable：true，验证：{required：true}}} }}};;

scope.DS = new kendo.data.DataSource({ transport: { read: { url: "/api/Employees", dataType: "json", contentType: "application/json", type: "GET" }, update: { url: "/api/Employees/PUT", dataType: "json", contentType: "application/json", type: "PUT" }, destroy: { url: "/api/Employees/DELETE", dataType: "json", contentType: "application/json", type: "DELETE" }, create: { url: "/api/Employees/POST", dataType: "json", contentType: "application/json", type: "POST" }, parameterMap: function (options, operation) { if (operation !== "read") { console.log(JSON.stringify(options.models)); return JSON.stringify(options.models); } } }, batch: true, pageSize: 5, schema: { model: { id: "Id", data: 'Data', total: 'Total', errors: 'Errors', fields: { Id: { editable: false, nullable: false, type: "number" }, Email: { editable: true }, UserName: { editable: true, type: "string"}, FirstName: { editable: true, validation: { required: true } }, LastName: { editable: true, validation: { required: true } }, Age: { editable: true, validation: { required: true } }, Phone: { editable: true, validation: { required: true } } } } } });

scope.mainGridOptions = {dataSource：

scope.mainGridOptions = { dataSource:

scope.DS，

/ * dataBound： function Autocolumnwidth（e）{var grid = e.sender; for（var
i = 0; i< grid.columns.length; i ++）{grid.autoFitColumn（i）; }，* /

toolbar：[create]，

列：[{field：Id，隐藏：true}，

{field：Email，title：Email，width：100px}，

{field：UserName，title：User Name，width：100px} ，

{字段：FirstName，标题：名字，宽度：100px}，

{字段：姓氏，标题：姓氏，宽度：100px}，

{字段：电话，标题：电话，宽度：100px}，

{字段：年龄，title：Age，width：100px}，

{command：[{name：edit，text：{edit：Edit，update：Save，cancel ：取消}}，销毁]，标题：操作，宽度：150px}]，

可分页：{

刷新：真，

输入：true，

数字：false，

pageSizes：[5,10,20,30,50,75,100,500， 1000]}，

sortable：true，

resizable：true，

navigatable：true，

serverPaging： true，

serverSorting：true，

serverFiltering：tr ue，

可编辑：{mode：inline}，

filter：{filters：

[{field：'FirstName'，operator ：'包含'，值：'AA'}]}，//不工作我得到了SCRIPT438：SCRIPT438：对象不支持属性或方法'call'

serverFiltering：true，

filterable：{mode：row}，

noRecords：{template：没有结果。 }};

scope.DS, /*dataBound: function Autocolumnwidth(e) { var grid = e.sender; for (var i = 0; i < grid.columns.length; i++) { grid.autoFitColumn(i); } },*/ toolbar: ["create"], columns: [ { field: "Id", hidden: true }, { field: "Email", title: "Email", width: "100px" }, { field: "UserName", title: "User Name", width: "100px" }, { field: "FirstName", title: "First Name", width: "100px" }, { field: "LastName", title: "Last Name", width: "100px" }, { field: "Phone", title: "Phone", width: "100px" }, { field: "Age", title: "Age", width: "100px" }, {command: [{ name: "edit", text: { edit: "Edit", update: "Save", cancel: "Cancel" } },"destroy"], title: "Actions", width: "150px" } ], pageable: { refresh: true, input: true, numeric: false, pageSizes: [5,10, 20, 30, 50, 75, 100, 500, 1000] }, sortable: true, resizable: true, navigatable: true, serverPaging: true, serverSorting: true, serverFiltering: true, editable: { mode: "inline" }, filter: {filters: [{ field: 'FirstName', operator: 'Contains', value: 'AA' }] }, // Not working I got SCRIPT438: SCRIPT438: Object doesn't support property or method 'call' serverFiltering: true, filterable: { mode: "row" }, noRecords: { template: "No results available." } };

我尝试过：



我不知道如何从服务器端处理它，但我在控制器中有这个代码：

What I have tried:

I don't know how to handle it from server side, but I have this code in controller:

public DataSourceResult Filter(Models.DataSourceRequest request)
{

    var employees = db.Users.OrderBy(o => o.Id);
    var i = employees.ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter);
    var data = i.Data; // This is contain filtered data
    request.Take = i.Total;
    request.Skip = 0;
    return employees.ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter);
}

这是型号：

This is the model:

 public class DataSourceRequest
{
    public int Take { get; set; }
    public int Skip { get; set; }
    public IEnumerable<Kendo.DynamicLinq.Sort> Sort { get; set; }
    public Kendo.DynamicLinq.Filter Filter { get; set; }
} 

这篇关于使用kendo网格为angularjs进行服务器端过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！