Javascript 剑道网格-如何使网格在默认情况下按一列显示分组数据（init）？
默认情况下，我想在网格中显示分组数据吗 我应该在read方法中执行此操作吗 非常感谢你的帮助 编辑： 我要用于默认分组的对象的模型字段如下：Javascript 剑道网格-如何使网格在默认情况下按一列显示分组数据（init）？,javascript,datagrid,kendo-ui,kendo-grid,Javascript,Datagrid,Kendo Ui,Kendo Grid,默认情况下，我想在网格中显示分组数据吗 我应该在read方法中执行此操作吗 非常感谢你的帮助 编辑： 我要用于默认分组的对象的模型字段如下： partner: { defaultValue: {}, nullable: false, type: "object"
partner: {
defaultValue: {},
nullable: false,
type: "object"
},
{
"entityName": "Location",
"data": {
"take": 10,
"skip": 0,
"page": 1,
"pageSize": 10,
"group": [
{
"field": "partner.name",
"dir": "asc",
"aggregates": []
}
]
}
}
{
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();
partner: {
defaultValue: {},
nullable: false,
type: "object"
},
{
"entityName": "Location",
"data": {
"take": 10,
"skip": 0,
"page": 1,
"pageSize": 10,
"group": [
{
"field": "partner.name",
"dir": "asc",
"aggregates": []
}
]
}
}
$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"
}
}
}
]
});
};
$scope.initGrid=function（）{
//设置用于装载微调器的容器
gridView=$（“#位置#网格”）；
//设置数据网格的所有属性
gridView.kendoGrid({
数据源：{
运输：{
//阅读请求
阅读：功能（选项）{
控制台日志（“列表”）；
console.log（options.data）；
requestParams={
“entityName”：“位置”
};
requestParams.data=options.data；
console.log（requestParams）；
ApiService.doHttpRequest(
“职位”，
$rootScope.apiBaseUrl+“位置/搜索”，
请求参数
)
.success（函数（数据、状态、标题、配置）{
//成功的数据检索
log（“请求成功，检查状态”）；
控制台日志（数据）；
//已将状态发送到全局HTTP状态服务
var jsonResponse=ApiService.processReturnedHttpState（状态）；
log（“状态响应为”+jsonResponse.result）；
//处理数据
开关（jsonResponse.result）{
大小写正确：
选项。成功（数据）；
打破
案例错误：
growlNotifications.add（$translate.instant（'LIST\u LOADING\u ERROR'）、'ERROR'、$rootScope.notificationLifetime）；
打破
}
})
.error（函数（数据、状态、标题、配置）{
var jsonResponse=ApiService.processReturnedHttpState（状态）；
console.log（“状态为“+状态的处理错误”）；
growlNotifications.add（$translate.instant（'PROCESSING\u REQUEST\u ERROR'）+jsonResponse.message，'ERROR'，$rootScope.notificationlife）；
//隐藏加载微调器
kendo.ui.progress（gridView，false）；
});
},
//更新请求
更新：功能（选项）{
控制台日志（“更新”）；
console.log（options.data）；
//将要更新的数据添加到令牌
console.log（requestParams）；
console.log（options.data）；
requestParams=options.data；
ApiService.doHttpRequest(
“职位”，
$rootScope.apiBaseUrl+“/location/update”，
请求参数
)
.success（函数（数据、状态、标题、配置）{
//成功的数据检索
//成功的数据检索
log（“请求成功，检查状态”）；
控制台日志（数据）；
//已将状态发送到全局HTTP状态服务
var jsonResponse=ApiService.processReturnedHttpState（状态）；
log（“状态响应为”+jsonResponse.result）；
//处理数据
开关（jsonResponse.result）{
大小写正确：
growlNotifications.add（$translate.instant（'UPDATED'），'success'，$rootScope.notificationLifetime）；
选项。成功（数据）；
打破
案例错误：
growlNotifications.add（$translate.instant（'LIST\u LOADING\u ERROR'）、'ERROR'、$rootScope.notificationLifetime）；
打破
}
})
.error（函数（数据、状态、标题、配置）{
growlNotifications.add（$translate.instant（'PROCESSING\u REQUEST\u ERROR'）+数据，'ERROR'，$rootScope.notificationlife）；
});
},
//删除函数
销毁：功能（选项）{
控制台日志（“删除”）；
console.log（options.data）；
//将数据添加到请求参数
log（“删除id:+options.data.id”）；
//呼叫服务
ApiService.doHttpRequest(
“职位”，
$rootScope.apiBaseUrl+“/location/delete”，
请求参数）
.success（函数（数据、状态、标题、配置）{
//成功的数据检索
log（“请求成功，检查状态”）；
控制台日志（数据）；
//已将状态发送到全局HTTP状态服务
var jsonResponse=ApiService.processReturnedHttpState（状态）；
log（“状态响应为”+jsonR