Блог

Я использую Angular вместе с UI-Grid (http://ui-grid.info /)

Я настроил сетку, используя приведенные ниже параметры

 this.mdGridLogOptions.gridOptions= {
enableSorting: false,
enableColumnMenus: false,
enableAutoFitColumns: false,
paginationPageSizes: [25, 50, 100, 200, 500],
enableFiltering: true,
enableGridMenu: false,
enableCellEditOnFocus: true,
columnDefs: [
    { 
field: 'override_date',enableCellEdit:true,
displayName: 'PROMISE DATE', type: 'date', 
cellFilter: 'date:"MMM-dd-yyyy"', 
cellTemplate:'<div class="ui-grid-cell-contents" layout="row" layout-align="space-between end"><div>{{COL_FIELD CUSTOM_FILTERS}}</div><div ng-click="grid.appScope.clickHandler()" class="material-icons md-light">event</div></div>', 
editableCellTemplate: '<div uigriddatepicker ng-class="colt   col.uid"></div>'}}
  

Поле отображается правильно, как показано ниже. У меня есть пара проблем

1. Для редактирования поля работает только двойной щелчок. Я понимаю, что editcellonfocus — это опция, но она работает не так, как предполагалось, поскольку я не могу отключить двойной щелчок
2. Я хочу запустить процесс редактирования, нажав кнопку календаря и отключив кнопку двойного щелчка. есть ли событие запуска BEGINEDIT для родительской ячейки?

Я хотел сделать то же самое сегодня, похоже, что «обычного» способа сделать это нет, вам нужно имитировать событие «dblclick» в ячейке, которую вам нужно начать редактировать.

Итак, сначала в вашей CellTemplate вам нужно отправить «строку» в качестве параметра в функцию обработки щелчков.

  ng-click="grid.appScope.clickHandler(row)"
  

позже в clickHandler вам нужно узнать индекс выбранной строки, а затем получить html-элемент ячейки, который вы хотите начать редактировать.

   scope.clickHandler = function(row){
    // this is a hack to make possible editing on cell by button click
    // get the row index of the clicked element
    var rowIndex = row.grid.renderContainers.body.visibleRowCache.indexOf(row);
    // then get the jqLite element of the cell that needs to be edited
    var el = angular.element(document.querySelectorAll('.ui-grid-row')[rowIndex].children[0].children[0]);
    // simulate double click on the cell to start editing
    el.triggerHandler('dblclick');
  };
  

если мы используем celltemplate, то событие single click для редактирования не работает. попробуйте любой другой способ отображения ваших данных вместо использования celltemplate. я думаю, у нас есть cellfilter, директива используйте ссылку нижеhttp://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed