单击按钮

Question

我正在使用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射击事件？

Answer 1

如果我们使用celltemplate，则单击事件进行编辑不起作用。 尝试任何其他方式来显示您的数据而不是使用celltemplate.i认为我们有cellfilter，指令 使用以下链接 http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed/

Answer 2

我今天想做同样的事情，似乎没有“正常”的方法来做到这一点，你需要模拟你需要开始编辑的单元格上的“dblclick”事件。

首先在您的cellTemplate中，您需要将“row”作为参数发送到点击处理函数。

 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');
  };