ng-grid가 있으며 옵션은 다음과 같습니다.
$scope.gridOptions = {
enableRowSelection: true,
enableSelectAll: true,
selectionRowHeaderWidth: 35,
rowHeight: 35,
showGridFooter: false,
enableColumnMenus: false,
enableSorting: true,
enableFiltering: true,
columnDefs: [
{
name: "",
field: "fake",
cellTemplate: '<div class="ui-grid-cell-contents" >' +
'<button value="Edit" ng-if="!row.inlineEdit.isEditModeOn" ng-click="row.inlineEdit.deleteRow($event)">Delete</button>' +
'<button value="Edit" ng-if="!row.inlineEdit.isEditModeOn" ng-click="row.inlineEdit.enterEditMode($event)">Edit</button>' +
'<button value="Edit" ng-if="row.inlineEdit.isEditModeOn" ng-click="row.inlineEdit.saveEdit($event)">Update</button>' +
'<button value="Edit" ng-if="row.inlineEdit.isEditModeOn" ng-click="row.inlineEdit.cancelEdit($event)">Cancel</button>' +
'</div>',
enableCellEdit: false,
enableFiltering: false,
enableSorting: false,
showSortMenu: false,
enableColumnMenu: false,
width: "10%"
},
{
name: 'Id',
visible: false
},
{
name: 'Key',
enableCellEdit: true,
cellTemplate: '<div class="ui-grid-cell-contents"><div ng-class="{\'viewr-dirty\' : row.inlineEdit.entity[col.field].isValueChanged }">{{row.entity[col.field]}}</div></div>',
width: "30%"
},
{
name: 'Value',
enableCellEdit: true,
cellTemplate: '<div class="ui-grid-cell-contents"><div ng-class="{\'viewr-dirty\' : row.inlineEdit.entity[col.field].isValueChanged }">{{row.entity[col.field]}}</div></div>',
width: "30%"
}
]
}
인라인 편집을 사용하고 있으므로 셀에 버튼이 있습니다. 이 버튼 중 하나는 삭제입니다. 이 버튼을 클릭하면 데이터베이스에서 레코드가 삭제됩니다. 그러나 삭제 작업이 완료된 후 그리드를 새로 고치고 싶습니다. 공장에서 함수를 호출합니다.
angular.module('ui.grid').factory('InlineEdit', function ($interval, $rootScope, $mdDialog, LocalizationService, AlertDialogFactory) {
function inlineEdit(entity, index, grid) {
this.grid = grid;
this.index = index;
this.entity = {};
this.isEditModeOn = false;
this.init(entity);
}
inlineEdit.prototype = {
init: function (rawEntity) {
var self = this;
for (var prop in rawEntity) {
self.entity[prop] = {
value: rawEntity[prop],
isValueChanged: false,
isSave: false,
isCancel: false,
isEdit: false
}
}
},
deleteRow: function (event) {
event && event.stopPropagation();
var self = this;
self.isEditModeOn = false;
for (var prop in self.entity) {
self.entity[prop].isSave = true;
self.entity[prop].isEdit = false;
}
LocalizationService.deleteRow(self.grid.rows[self.index]).then(function (result) {
if (result.data.IsOk) {
// CODE HERE...
}
else {
AlertDialogFactory.ShowAlertDialog(result.data.Message, "ERROR");
}
});
},
}
return inlineEdit;
})
result.data.IsOk
true 인 경우 gridOptions.data
공장 기능에서 어떻게 새로 고칠 수 있습니까? 공장에서 어떻게 범위에 도달 할 수 있습니까?
솔루션으로 $ rootScope에서 이벤트를 브로드 캐스트 할 수 있습니다. 다음과 같습니다.
$rootScope.$broadcast("rowDeleted");
그리고 $ scope에 액세스 할 수있는 곳에서 해당 이벤트를 처리하십시오.
$scope.$on("rowDeleted", deleteHandler);
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다