angular - ui-grid angular js - 单元格卡在编辑模式

Question

我在使用 ui-grid 时添加了一个自定义的 editablecelltemplate。问题是一旦单元格进入编辑模式，它就会一直存在。单元格模板稍后根本不显示。

这是我正在使用的 Javascript:

name: app.localize('IsHiddenName'),
field: 'isHidden',
type: 'boolean',
cellTemplate:
    '<div class=\"ui-grid-cell-contents text-center\">' +
    '  <i class="fa fa-check-circle font-green" ng-if="row.entity.isHidden"></i>' +
    '</div>',
editableCellTemplate:
    '<div style="margin:5px;">' +
    '<div class="md-checkbox-list">' +
    '<div class="md-checkbox">' +
       '<input type="checkbox" id="check2-{{row.entity.id}}" class="md-check" ng-class="\'colt\' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD">' +
       '<label for="check2-{{row.entity.id}}"><span class="inc"></span><span class="check"></span><span class="box"></span></label>' +
   '</div>' +
   '</div>'+
   '</div>',

Answer 1

这个问题是因为误解了uigrid自定义可编辑模板。

UI 网格未自行完成单元格编辑。正在等待事件
uiGridEditConstants.events.END_CELL_EDIT.

此事件由 2 个 ui-grid 指令发出:

1. 对于输入元素:ui-grid-editor (您的情况):
   <input ui-grid-editor type="checkbox" id="check2-{{row.entity.id}}" ... >

2. 对于选择元素:ui-grid-edit-dropdown:
   <select ui-grid-edit-dropdown ... >

3. 对于自定义元素:你必须自己发出事件: scope.$emit(uiGridEditConstants.events.END_CELL_EDIT);