アプリケーションのリストであるマスター グリッドがあります。詳細行には、そのアプリケーションのロールに対する CRUD 操作を許可するグリッドが含まれています。マスター グリッドでは作成、読み取り、更新、および削除が機能していますが、詳細グリッドでは機能していません。
AngularJS と CRUD ops のリポジトリ パターンを使用しているため、私が見た例のどれもこれに関連していないようです。コードを貼り付けるだけで、より明確になります。
まず、私の 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 関数を使用しているため、これらの DataSource の「parameterMap」プロパティが無視されるということですか? どっかで読んだ気がする。もしそうなら、私はそれらを削除します。
次に、これがすべて機能するようになったら、すべてを台無しにすることなく、これらをディレクティブに分割するにはどうすればよいでしょうか? それとも、これは私がすべきことですか？私は AngularJS と剣道は初めてですが、「火の試練」で学んでいます。私はほとんどのチュートリアルと例を理解していますが、それらはすべて「単純な」方法で物事を行っており、私たちのチームは懸念事項などを分離することで物事を行おうとしているため、リポジトリなどを使用しています.
助けてくれてありがとう！