Kendo DataSource:如何为从远程 odata 源读取的数据定义“计算”属性

Posted

技术标签:

【中文标题】Kendo DataSource:如何为从远程 odata 源读取的数据定义“计算”属性【英文标题】:Kendo DataSource: How to define "Computed" Properties for data read from remote odata source 【发布时间】:2013-02-10 18:29:39 【问题描述】:

情况:

剑道数据源

var ordersDataSource = new kendo.data.DataSource(
    type: "odata",
    transport: 
        read: 
            url: "http://localhost/odata.svc/Orders?$expand=OrderDetails"
        
    ,
    schema: 
        type: "json",
        data: function(response)
            return response.value;
        
        total: function(response)
            return response['odata.count'];
        
    ,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true
)

从odata源读取的json数据如下:


    odata.metadata: "xxxx",
    odata.count: "5",
    value: [
        
            OrderId: 1,
            OrderedDate: "2013-02-20",
            OrderInfoA: "Info A",
            OrderInfoB: "Info B"
            OrderDetails: [
                
                    OrderDetailId: 6,
                    OrderDetailInfoC: "Info C",
                    OrderDetailInfoD: "Info D"
                ,
                
                    //Another OrderDetail's data
                
            ]
        ,
        
            // Another Order's data
        
    ]

问题 1

1.如果我想定义一个“计算”属性:OrderedDateRelative,它应该是今天(2013-02-25)和订单创建日期(2013-)之间的天数02-20),喜欢:“5天前”,我如何在客户端实现这一点?

问题1的答案:http://jsbin.com/ojomul/7/edit

问题 2--更新--

2.每个订单都有自己的嵌套属性OrderDetails,那么可以为嵌套的OrderDetails属性定义一个计算字段吗? Like:每个OrderDetail的OrderDetailInfoCAndD,其值应该类似于:OrderDetailInfoC + OrderDetailInfoD,即“Info C Info D”?

谢谢,

院长

【问题讨论】:

+1 表示问题 2,该问题仍未得到解答。 【参考方案1】:

您可以通过指定数据源的模型来创建计算字段:

  dataSource = new kendo.data.DataSource(
    data: [
       first: "John", last: "Doe" , 
       first: "Jane", last: "Doe" 
    ],
    schema: 
      model: 
        // Calculated field
        fullName: function() 
          return this.get("first") + " " + this.get("last");
        
      
    
  );

这是一个现场演示:http://jsbin.com/ojomul/1/edit

【讨论】:

嗨,我编辑了你的演示,jsbin.com/ojomul/4/edit,CalculatedField 没有正确显示。 这是一个函数 - 你需要调用它 CalculatedField() 是的,作为函数调用它,谢谢。另一个问题是:我们可以做一些类似于 Nested Property OrderDetails 的事情吗?请参阅我更新的问题 2。 您能指定类型以便过滤器正常工作吗?比如将类型指定为布尔值、日期等。默认情况下它被视为字符串。【参考方案2】:

这是在 Kendo Grid 中使用计算字段的一种方法。

var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource(
    transport: 
        read: 
            url: crudServiceBaseUrl + "/Products",
            dataType: "jsonp"
        
    ,
    pageSize: 20,
    schema: 
        model: 
            total: function (item) 
                return this.UnitPrice * this.UnitsInStock;
            
        
    
);

$("#grid").kendoGrid(
    dataSource: dataSource,
    pageable: true,
    height: 550,
    sortable: true,
    filterable: true,
    toolbar: ["create"],
    columns: [
         field: "UnitPrice", title: "Unit Price",
         field: "UnitsInStock", title: "Units In Stock", width: "120px" ,
         field: "total()", title: "Total" ]
);

【讨论】:

【参考方案3】:

下面是一个在网格中使用它的示例。然后它还可以对列进行排序。

$("#grid").kendoGrid( 
    dataSource: 
        data: [
             first: "John", last: "Doe" , 
             first: "Jane", last: "Doe" 
        ],
        schema: 
          model: 
            // Calculated field
            fullName: function() 
              return this.first + " " + this.last;
            ,
            fields: 
               first:  type: "string" ,
               last:  type: "string" 
            
          
        
    ,
    columns: [
        
            // Trigger function of the Calculated field
            field: "fullName()",
            title: "Fullname"
        ,
        
            field: "first",
            title: "firstname"
        
    ]
);

【讨论】:

以上是关于Kendo DataSource:如何为从远程 odata 源读取的数据定义“计算”属性的主要内容,如果未能解决你的问题,请参考以下文章

如何为 Kendo TreeList parentID 和 hasChildren 使用自定义字段

如何为 Kendo UI 自动完成控件设置宽度

如何为 kendo ui 下拉菜单设置默认值?

如何为基于 JS、Kendo 和 Jquery 的网站创建原生应用程序 [关闭]

如何为 Kendo UI 日期列 _filter_ 的 DatePicker 设置日期格式

Kendo UI MVC 从 MultiSelect 小部件将 Grid 绑定到 DataSource