将 Json 响应绑定到 Kendo 网格答案

【问题标题】：Binding the Json response to Kendo grid将 Json 响应绑定到 Kendo 网格
【发布时间】：2017-01-30 21:56:18
【问题描述】：

我有点困惑如何在我的剑道网格中绑定响应。

如下所示获取响应表单服务

我需要在 Grid 中显示响应，如下所示

我正在为网格使用 Angular js、MVC 和剑道。

这是在 Grid 中修改我的响应数据的最佳方法。在 MVC 或 Angular js 中。

提前感谢

【问题讨论】：

剑道网格具有按键分组行的功能。你可以试试。

标签： javascript c# angularjs json asp.net-mvc

【解决方案1】：

如果您更喜欢让网格的数据源处理数据分组和聚合，那么只需使用网格的数据源即可。下面的代码是 razor 语法，但是，在 Kendo ui js 中有一个直接的等价物。

DataSource(dataSource => dataSource
    .Server()
    .Aggregates(aggregates =>
    {
        aggregates.Add(p => p.Amount).Sum();
    })
    .Group(groups => groups.Add(p => p.CustomerName)
)

【讨论】：

【解决方案2】：

我认为你不能在网格中进行原生操作。但是您可以使用解决方法 - 更改您的数据以表示必要的视图。

我在这里修改了某人的小提琴：http://jsfiddle.net/SugMK/47/

首先你必须对你的数据进行分组，在你的例子中uid确定id和title，所以你可以在uid上进行分组：

var result = _.groupBy(result, (item) => { return item.uid });

第二次迭代结果对象，其结构类似于

{ 
   uid1:  [
           {row1_with_uid1}, 
           {row2_with_uid1}
          ], 
    uid2: [
           {row1_with_uid2}, 
           {row2_with_uid2}
          ] 
}

并使用您的自定义逻辑聚合（或不聚合）必要的行。在您的情况下，您必须将两个 code 字段作为文本与 br 作为分隔符：

_.forEach(result, (items) => {
     var newItem = items[0]; // set default.

     items.splice(0, 1); // since first item is default - remove it from aggregate array
     _.forEach(items, (item) => { newItem.code = newItem.code + "<br />" + item.code; }); // aggregate item.

     newResult.push(newItem); // save aggregated item.
});

第三您必须将聚合字段（代码）的encoded参数设置为false，以将您的br表示为HTML，而不是文本：

{ field: "code", title: "multiline", encoded: false }

附：我认为您可以创建自己的更好的实现，但我创建这个示例是为了更好地理解我的想法。

【讨论】：