剑道网格 - 如何使网格默认按一列显示分组数据 (init）
Kendo Grid - How to make grid displayed grouped data by one column by default (init)?
我想默认在网格中显示分组数据吗？
我应该在读取方法期间执行此操作吗？
非常感谢任何帮助。
编辑：
为对象提交的模型我想用于默认分组的内容如下：
partner: {
defaultValue: {},
nullable: false,
type: "object"
},
列字段为：
{
field :"partner.name",
title : $translate.instant('PARTNER'),
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
},
如果我尝试在请求中执行以下操作结束：
var grid = $("#locations_grid").data('kendoGrid');
grid._group = true;
grid.dataSource._group.push({
aggregates: [],
dir: "asc",
field: "partner.name"
});
grid.refresh();
我总是得到空的网格。
分组的请求结构如下：
{
"entityName": "Location",
"data": {
"take": 10,
"skip": 0,
"page": 1,
"pageSize": 10,
"group": [
{
"field": "partner.name",
"dir": "asc",
"aggregates": []
}
]
}
}
EDIT2 - 网格初始化的完整代码：
$scope.initGrid = function() {
// set container for loading spinner
gridView = $("#locations_grid");
// set all properties for data grid
gridView.kendoGrid({
dataSource: {
transport: {
// READ REQUEST
read: function (options) {
console.log("List");
console.log(options.data);
requestParams = {
"entityName": "Location"
};
requestParams.data = options.data;
console.log(requestParams);
ApiService.doHttpRequest(
"POST",
$rootScope.apiBaseUrl + "location/search",
requestParams
)
.success(function (data, status, headers, config) {
// successful data retrieval
console.log("request success, checking state");
console.log(data);
// sent status to global HTTP status service
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Status response is " + jsonResponse.result);
// do something with data
switch (jsonResponse.result) {
case true:
options.success(data);
break;
case false:
growlNotifications.add($translate.instant('LIST_LOADING_ERROR'), 'error', $rootScope.notificationLifetime);
break;
}
})
.error(function (data, status, headers, config) {
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Processing error with status " +status);
growlNotifications.add($translate.instant('PROCESSING_REQUEST_ERROR') + jsonResponse.message , 'error', $rootScope.notificationLifetime);
// hide loading spinner
kendo.ui.progress(gridView, false);
});
},
// UPDATE REQUEST
update: function (options) {
console.log("Update");
console.log(options.data);
// ADD DATA FOR UPDATE TO THE TOKEN
console.log(requestParams);
console.log(options.data);
requestParams = options.data;
ApiService.doHttpRequest(
"POST",
$rootScope.apiBaseUrl + "/location/update",
requestParams
)
.success(function (data, status, headers, config) {
// successful data retrieval
// successful data retrieval
console.log("request success, checking state");
console.log(data);
// sent status to global HTTP status service
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Status response is " + jsonResponse.result);
// do something with data
switch (jsonResponse.result) {
case true:
growlNotifications.add($translate.instant('UPDATED'), 'success', $rootScope.notificationLifetime);
options.success(data);
break;
case false:
growlNotifications.add($translate.instant('LIST_LOADING_ERROR'), 'error', $rootScope.notificationLifetime);
break;
}
})
.error(function (data, status, headers, config) {
growlNotifications.add($translate.instant('PROCESSING_REQUEST_ERROR') + data , 'error', $rootScope.notificationLifetime);
});
},
// DELETE FUNCTION
destroy: function (options) {
console.log("delete");
console.log(options.data);
// add data to request params
console.log("delete id: " +options.data.id);
// call the service
ApiService.doHttpRequest(
"POST",
$rootScope.apiBaseUrl + "/location/delete",
requestParams)
.success(function (data, status, headers, config) {
// successful data retrieval
console.log("request success, checking state");
console.log(data);
// sent status to global HTTP status service
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Status response is " + jsonResponse.result);
// do something with data
switch (jsonResponse.result) {
case true:
options.success(data);
break;
case false:
growlNotifications.add($translate.instant('LIST_LOADING_ERROR'), 'error', $rootScope.notificationLifetime);
break;
}
})
.error(function (data, status, headers, config) {
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Processing error with status " +status);
growlNotifications.add($translate.instant('PROCESSING_REQUEST_ERROR') + jsonResponse.message , 'error', $rootScope.notificationLifetime);
// hide loading spinner
kendo.ui.progress(gridView, false);
});
},
// CREATE FUNCTION
create: function (options) {
console.log("Create");
console.log(options.data);
// ADD DATA FOR UPDATE TO THE TOKEN
requestParams = options.data;
ApiService.doHttpRequest(
"POST",
$rootScope.apiBaseUrl + "location/create",
requestParams
)
.success(function (data, status, headers, config) {
// successful data retrieval
console.log("request success, checking state");
console.log(data);
// sent status to global HTTP status service
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Status response is " + jsonResponse.result);
// do something with data
switch (jsonResponse.result) {
case true:
options.success(data);
var dataSource = gridView.dataSource;
gridView.data('kendoGrid').dataSource.read();
growlNotifications.add($translate.instant('SUCCESSFULLY_ADDED'), 'success', $rootScope.notificationLifetime);
break;
case false:
growlNotifications.add($translate.instant('PROCESSING_ERROR'), 'error', $rootScope.notificationLifetime);
options.success(data);
break;
}
})
.error(function (data, status, headers, config) {
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Processing error with status " +status);
growlNotifications.add($translate.instant('PROCESSING_REQUEST_ERROR') + jsonResponse.message , 'error', $rootScope.notificationLifetime);
// hide loading spinner
kendo.ui.progress(gridView, false);
});
}
},
requestStart: function(e) {
console.log("Request start");
// show loading spinner
//kendo.ui.progress(gridView, true);
},
requestEnd: function(e) {
console.log("Request end");
/*
if(e.type === "read"){
var grid = $("#locations_grid").data('kendoGrid');
grid._group = true;
grid.dataSource._group.push({
aggregates: [],
dir: "asc",
field: "code"
});
grid.refresh();
}
*/
var response = e.response;
var type = e.type;
console.log(type);
kendo.ui.progress(gridView, false);
},
requestError: function(e) {
console.log("Request error");
// hide loading spinner
kendo.ui.progress(gridView, false);
},
// SCHEMA FOR DATAGRID
schema: {
model: {
id: "id",
fields: {
id: {
editable: false,
nullable: true,
defaultValue: null,
type: "number"
},
partner: {
defaultValue: {},
nullable: false,
type: "object"
},
accessNote: {
editable: true,
nullable: true,
type: "string"
},
address: {
defaultValue: {},
nullable: false
},
bsc: {
editable: true,
nullable: true
},
code:{
editable: true,
nullable: false,
type: "string",
validation: {
required: true,
min: 1
}
},
indoorOutdoor:{
editable: true,
nullable: false,
type: "string",
validation: {
required: {
message: $translate.instant('FIELD_IS_REQUIRED')
}
}
},
siteId:{
editable: true,
nullable: false,
type: "string",
validation: {
required: {
message: $translate.instant('FIELD_IS_REQUIRED')
}
}
},
stationType:{
defaultValue: {},
nullable: false,
validation: {
required: {
message: $translate.instant('FIELD_IS_REQUIRED')
}
}
}
}
},
data: function(response) {
console.log(response.results);
return response.results;
},
total: function(response) {
console.log(response.resultCount);
return response.resultCount;
}
},
// definition for page sorting
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
serverGrouping: true,
},
editable:{
confirmation:true //remove delete confirm message
},
scrollable:true,
//window resizing hack
height: function () {
return GlobalHelperService.getWindowSize();
},
filterable: GridHelperService.filtersTranlations(),
sortable: true,
groupable : {
messages: {
empty : $translate.instant('DRAG_SELECTED_COLUMN_HEADER_HERE_TO_GROUP')
}
},
reorderable: true,
resizable: true,
//dataBound: resizeGrid, //callback when data are loaded
columnMenu: GridHelperService.getColumnMenu(),
pageable: GridHelperService.getBottomToolbar(),
messages:GridHelperService.getToolbarButtonsTranlations(),
toolbar: [
{ name: "create" },
{ name: "save" },
{ name: "cancel" }
],
columns: [
{
field :"partner.name",
title : $translate.instant('PARTNER'),
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"accessNote",
title : $translate.instant('ACCESS_NOTE'),
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"address.city",
title : $translate.instant('ADDRESS_CITY'),
width: 250,
editor: GlobalHelperService.getAddressCityListForAutocomplete,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"address.latitude",
title : $translate.instant('ADDRESS_LAT'),
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"address.longtitude",
title : $translate.instant('ADDRESS_LON'),
width: 250,
template: function(dataItem) {
console.log("DATAITEM IS FOLLOWING:");
console.log(dataItem);
var html = "<div>"+dataItem.address.longtitude+"<a class='"showOnMapBtn'" href='"http://maps.google.com/maps?q="+dataItem.address.latitude+","+dataItem.address.longtitude+"&z=14&ll="+dataItem.address.latitude+","+dataItem.address.longtitude+"'" target='"blank'">"+$translate.instant('MAP')+"</a></div>";
return html;
},
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"address.street",
title : $translate.instant('ADDRESS_STREET'),
width: 250,
editor: GlobalHelperService.getAddressStreetListForAutocomplete,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"bsc",
title : $translate.instant('BSC'),
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"code",
title : $translate.instant('CODE'),
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"indoorOutdoor",
title : $translate.instant('INDOOR_OUTDOOR'),
editor: GlobalHelperService.locationTypeDropDownEditor,
template: function(dataItem) {
switch (dataItem.indoorOutdoor)
{
case "Indoor":
return "Indoor";
case "Outdoor":
return "Outdoor";
case "IndoorOutdoor":
return "Indoor & Outdoor";
default:
return "Zvolte";
}
},
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"siteId",
title : $translate.instant('SITE_ID'),
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"stationType.name",
title : $translate.instant('STATION_TYPE'),
editor: GlobalHelperService.getStationTypeListForAutocomplete,
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
}
]
});
};
我应该在读取方法期间执行此操作吗？
是的，我相信这是最好的方法。以下是在"公司名称"字段读取数据后分组的功能：
$("#grid").kendoGrid({
dataSource: {
requestEnd: function(e){
if(e.type === "read"){
var grid = $("#grid").data('kendoGrid');
grid._group = true;
grid.dataSource._group.push({
aggregates: [],
dir: "asc",
field: "CompanyName"
});
grid.refresh();
}
}
},
groupable: true,
columns: [{
field: "CompanyName"
...
}
],
...
});
剑道道场示例：http://dojo.telerik.com/oRuwA
请记住，此功能不受官方支持，并且使用网格私有字段，因此它可以在将来更新 Kendo 后停止工作。
角度示例：
$scope.initGrid = function() {
gridView = $("#locations_grid");
gridView.kendoGrid({
dataSource: {
requestEnd: function(e){
if(e.type === "read"){
gridView._group = true;
gridView.dataSource._group.push({
aggregates: [],
dir: "asc",
field: "CompanyName"
});
gridView.refresh();
}
}
...
}
...
});
};
相关文章：
- ui网格将单元格显示为选择标记
- ui网格日期单元格过滤器，过滤日期格式导致显示错误的日期
- 如何使用d3在基于网格的(热图）图表上正确显示轴
- Angular UI-GRID未在页面上显示网格
- javascript网格未在IE 8及以上版本中显示
- 如何使用.log数据文件显示EXT-js网格
- ag网格没有显示嵌套的json
- 高亮显示包含<br>以及重新格式化网格
- crm 2011使用javascript在仪表板上隐藏和显示子网格
- 网格中的更新值不会显示在javaspring控制器上
- 由于本地存储代理，Extjs网格面板最多显示25行.如何更改此限制值
- dojox 数据网格不显示
- 可以'编辑后不会将数据保存在数据库中，但网格显示更改
- Angularjs ng 网格，当某些 ng 网格选项中的列 Def 在多 ng 网格显示期间不同时，无法显示某些 ng
- 如何更改ng网格显示的行数
- 网格显示没有数据，但有请求直接为什么
- 如何有一个淘汰网格显示标题和基于下拉结果的数据
- 向剑道网格显示添加自定义验证
- 如何在视口中调整网格并让网格显示垂直滚动条
- 剑道网格显示所有剩余的项目在第二页
