我有一个主网格，它是应用程序列表。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",
}
]
};
}
}
})();
我知道这很多，我想最终将所有这些重构为单独的指令，但我认为这会使事情变得更加复杂。我想先让它工作。
现在最大的问题是“readRoles”函数中的“data”属性不包含任何数据。我什至不知道应该填充什么；我从其他地方复制了代码，它适用于主网格的 CRUD 函数（“readApps”、“createApp”、“updateApp”和“deleteApp”），但“data”属性中没有数据当调用“readRoles”时。我只能假设“createRole”、“updateRole”和“deleteRole”函数会有同样的问题，但我还不能测试它们。
我感觉我需要在“detailGridOptions”中使用“dataItem”参数，例如“dataSource: roleListDataSource(dataItem)”，但我不知道如何让 kendo.data.DataSource 声明带一个参数，或者即使这会在这里工作。
此外，由于我使用的是 CRUD 函数，这些数据源是否会忽略“parameterMap”属性？我想我在某个地方读到过。如果是这样，我会删除它们。
然后，一旦我让这一切正常工作，我如何将它们拆分成指令而不搞乱一切？或者这是我什至应该做的事情？我是 AngularJS 和 Kendo 的新手，但是通过“试炼”来学习。我了解大多数教程和示例，但它们都以“简单”的方式做事，我们的团队正试图通过分离关注点等来做事，因此使用存储库等。
提前感谢您的帮助！