Question

对于数据网格，我使用DevExtreme datagrid，内容文本放在textarea上，如：

$("#test").dxDataGrid( {
  columns: [
    {
       ...
       customizeText: function(cellInfo) {
         return cellInfo.value.replace(/(?:\r\n|\r|\n)/g, "<br/>");
       },
       editCellTemplate: function(cellElement, cellInfo) {
                  var $input;
                  var numberOfCariage = cellInfo.value.split('\n').length;

                  // if is textarea (by seeing if contains cariage return
                  if (/(?:\r\n|\r|\n)/g.test(cellInfo.value)) {
                     $input = $('<textarea rows="' + numberOfCariage + '" class="dx-texteditor-input" />');
                  } else {
                     $input = $('<input autocomplete="off" class="dx-texteditor-input" spellcheck="false" tabindex="0" name="" role="textbox" style="text-align: left;" type="text" />');
                  }

                  $input.val(cellInfo.value);
                  $(cellElement).append($input);
                  cellInfo.setValue(function () {
                     return $input.val();
                  });
       }
    }
  ],

  editing: {
        mode: "row",
        allowUpdating: true
  }
});

问题是如果我编辑一个textarea的单元格，如果我按ENTER键在该textarea中添加新行，我就退出了编辑模式。

如何防止这种情况？

Answer 1

stopPropagation方法对您的情况有所帮助。

只需为textarea添加keydown事件处理程序：

$input.on('keydown', function(e) {
    // Check if pressed key is 'Enter'
    if(e.keyCode === 13) {
        e.stopPropagation();
    }
});

要查看结果，请尝试修改“排名”。在此demo。

防止从DevExtreme js datagrid退出编辑模式

1 个答案: