我有一个主网格，它是一个应用程序列表。 detailrow包含一个网格，允许对该应用程序的角色进行CRUD操作。我有创建，读取，更新和删除工作的主网格，但不适用于细节网格。
我们正在使用AngularJS，以及CRUD操作的存储库模式，因此我见过的所有示例似乎都与此无关。我只是粘贴我的代码，这应该使事情更清楚。
首先，我的manageApps.html：
<div class="row">
<div class="col-md-12">
<div class="title">Manage Applications</div>
</div>
</div>
<div id="applicationInfoGrid" ng-controller="manageApps as vm">
<div kendo-grid k-options="manageAppsGridOptions"></div>
<script type="text/x-kendo-template" id="rolesGridTemplate">
<span>Roles for {{dataItem.appName}}</span>
<div kendo-grid k-options="detailGridOptions(dataItem)"></div>
</script>
</div>
接下来是manageApps.js文件：
(function () {
'use strict';
var controllerId = 'manageApps';
angular.module('app').controller(controllerId, ['$scope', 'applicationInfoRepository', 'roleRepository', manageApps]);
function manageApps($scope, applicationInfoRepository, roleRepository) {
$scope.custom = {};
$scope.custom.error = false;
// unimportant code removed
var readApps = function (options) {
applicationInfoRepository.getApps().then(function (data) {
options.success(data);
}, showError);
};
var createApp = function (options) {
applicationInfoRepository.addApp(options.data).then(function (data) {
options.success(data);
openSuccess('added', data.appName);
}, showError);
};
var updateApp = function (options) {
applicationInfoRepository.updateApp(options.data).then(function () {
options.success(options.data);
openSuccess('updated', options.data.appName);
}, showError);
};
var deleteApp = function (options) {
applicationInfoRepository.deleteApp(options.data.appName).then(function () {
options.success(options.data);
openSuccess('deleted', options.data.appName);
}, showError);
};
var appListDataSource = new kendo.data.DataSource({
type: 'json',
errors: 'errorHandler',
transport: {
read: readApps,
create: createApp,
update: updateApp,
destroy: deleteApp,
parameterMap: function (data, operation) {
if (operation !== "read") {
return JSON.stringify(data);
} else {
return kendo.data.transports["odata"].parameterMap(data, operation);
}
}
},
schema: {
errors: "error",
edit: "onEdit",
model: {
id: 'appName',
fields: {
appName: {
type: 'string',
editable: true,
validation: { required: { message: "Application Name is required." } },
},
active: { type: 'boolean', defaultValue: true }
}
}
},
error: function (e) {
var obj = JSON.parse(e.xhr.responseText);
alert(obj.error + ': ' + obj.message);
}
});
$scope.manageAppsGridOptions = {
dataSource: appListDataSource,
sortable: true,
pageable: false,
scrollable: false,
detailTemplate: kendo.template($("#rolesGridTemplate").html()),
editable: {
mode: "inline",
confirmation: function (e) {
return "Are you sure that you want to delete the application '" + e.appName + "' and all associated application roles and role users?";
}
},
toolbar: [{ name: 'create', text: 'Add New Application' }],
edit: function (e) {
if (!e.model.isNew()) {
$('input[name=appName]').parent().html(e.model.appName);
}
},
columns: [
{
command: ["edit", "destroy"],
title: " ",
width: "185px"
}, {
field: "appName",
title: "Application Name",
required: true
}, {
field: "active",
title: "Active",
width: "60px",
template: "<input type='checkbox' disabled='disabled' #= active ? 'checked=\"checked\"' : '' # />"
}
]
};
var readRoles = function (options) {
roleRepository.getRolesByAppName(options.data.appName).then(function (data) {
options.success(data);
}, showError);
};
var createRole = function (options) {
roleRepository.addRole(options.data).then(function (data) {
options.success(data);
openSuccess('added', data.roleName);
}, showError);
};
var updateRole = function (options) {
roleRepository.updateRole(options.data).then(function () {
options.success(options.data);
openSuccess('updated', options.data.roleName);
}, showError);
};
var deleteRole = function (options) {
roleRepository.deleteRole(options.data.roleId).then(function () {
options.success(options.data);
openSuccess('deleted', options.data.roleName);
}, showError);
};
var roleListDataSource = new kendo.data.DataSource({
type: 'json',
errors: 'errorHandler',
transport: {
read: readRoles,
create: createRole,
update: updateRole,
destroy: deleteRole,
parameterMap: function(data, operation) {
if (operation !== "read") {
return JSON.stringify(data);
} else {
return kendo.data.transports["odata"].parameterMap(data, operation);
}
}
},
schema: {
errors: "error",
edit: "onEdit",
model: {
id: 'roleId',
fields: {
roleId: {
type: 'int',
editable: false,
validation: { required: { message: "Role Id is required." } },
},
roleName: {
type: 'string',
validation: { required: { message: "Role Name is required." } },
},
roleDescription: {
type: 'string',
}
}
}
},
error: function (e) {
var obj = JSON.parse(e.xhr.responseText);
alert(obj.error + ': ' + obj.message);
}
});
$scope.detailGridOptions = function (dataItem) {
return {
dataSource: roleListDataSource,
sortable: true,
pageable: false,
scrollable: false,
editable: {
mode: "inline",
confirmation: function (e) {
return "Are you sure that you want to delete the role '" + e.roleName + "' and all associated role users?";
}
},
toolbar: [{ name: 'create', text: 'Add New Role' }],
columns: [
{
command: ["edit", "destroy"],
title: " ",
width: "185px"
}, {
field: "roleName",
title: "Role Name",
required: true
}, {
field: "roleDescription",
title: "Role Description",
width: "500px",
}
]
};
}
}
})();
我知道很多，我想最终将所有这些重构为单独的指令，但我认为这会使事情进一步复杂化。我想先让它运转起来。
现在最大的问题是＆＃34;数据＆＃34; ＆＃34; readRoles＆＃34;内的财产功能不包含任何数据。我甚至不知道应该填充什么;我从其他地方复制了代码，它适用于主网格的CRUD功能（＆＃34; readApps＆＃34;，＆＃34; createApp＆＃34;，＆＃34; updateApp＆＃34;和＆ ＃34; deleteApp＆＃34;），但＆＃34;数据＆＃34;中没有数据。当＆＃34; readRoles＆＃34;叫做。我只能假设＆＃34; createRole＆＃34;，＆＃34; updateRole＆＃34;和＆＃34; deleteRole＆＃34;函数会有同样的问题，但我还无法测试。
我有一种感觉，我需要使用＆＃34; dataItem＆＃34; ＆＃34; detailGridOptions＆＃34;中的参数，类似＆＃34; dataSource：roleListDataSource（dataItem）＆＃34;但是我无法弄清楚如何使kendo.data.DataSource声明获取参数，或者即使这可以在这里工作。
另外，是＆＃34; parameterMap＆＃34;这些DataSource会忽略属性，因为我使用的是CRUD函数？我想我在某处读过。如果是这样，我会删除它们。
然后，一旦我把这一切都搞定了，我怎么能把它们分成指令而不搞乱一切？或者这是我应该做的事情？我是AngularJS和Kendo的新手，但是通过＆＃34;试用火＆＃34;来学习。我理解大多数教程和示例，但他们都做了简单的＆＃34;方式，我们的团队正试图通过分离关注点等来做事情，以便使用存储库等。
提前感谢您的帮助！
答案 0 :(得分：0)
我尝试过类似你的代码，它对我有用。
请看一下这个链接 [How to send KendoUI data source OData parameters to an abstract RESTful AngularJS data factory?