【问题标题】:Unable to set focus on and edit a cell in slick grid无法在光滑网格中设置焦点并编辑单元格
【发布时间】:2015-10-21 15:48:38
【问题描述】:

我正在使用光滑的网格。在网格的顶部,我们有一个文本框。当用户在文本框中输入一个值并跳出标签时,我们需要在网格中输入一个新行。

这就是代码的样子:

gridOptions = {

            useCheckBoxField: 'selected',
            data: 'data',
            columns: 'columns',
            enableCellNavigation: true,
            enableColumnReorder: true,
            editable: true,
            autoEdit: true,
            multiColumnSort: true,
            rowSelectionModel: 'selectedRows',
            enableAddRow: true
        }

这是我尝试编辑的第一列的外观。

{id: 'id', name: 'id', field: 'id', editor: Slick.Acsiom.Editors.Text, sortable: true, width: 210, minWidth: 100},

这是输入新行然后使第一个单元格可编辑并将焦点设置在单元格上的代码。

var d =  $scope.$grid.grid.getData();
               $scope.$grid.grid.invalidateRow(d.length);
               //Adds the new row as the first row.
               d.unshift(item);
               $scope.$grid.grid.updateRowCount();
               $scope.$grid.grid.setData(d);
                   $scope.selectedRows = [];
                   $scope.selectedRows = [0];

               //Sets the first row and first column as editable
               $scope.$grid.grid.setActiveCell($scope.selectedRows,0);
               $scope.$grid.grid.gotoCell(0,0,true);

问题:一切正常,除了单元格仍然不可编辑。用户必须手动单击单元格进行编辑。添加行后如何使单元格可编辑?

【问题讨论】:

  • 如果 .editActiveCell 不起作用,我们可能需要一个 jsbin/工作示例来查看是什么干扰了使单元格可编辑。
  • 其他人使用editActiveCell() 提供的解决方案应该可以达到预期的效果。可以在in this plnkr 中看到它们的快速模型,只需单击“编辑单元格”按钮。如果这不起作用,那么问题可能出在自定义编辑器Slick.Acsiom.Editors.Text 中的代码上。需要复制问题的 plnkr / fiddle 以确定问题所在。

标签: javascript jquery slickgrid


【解决方案1】:

使用grid.editActiveCell - 在此处查看更多信息https://github.com/mleibman/SlickGrid/wiki/Slick.Grid#wiki-editActiveCell

设置活动单元格后,使其可编辑。

var grid = $scope.$grid.grid;
var row = $scope.selectedRows[0];
var col = 0;
grid.setActiveCell(row, col);
grid.editActiveCell(Slick.Acsiom.Editors.Text);

【讨论】:

  • 感谢您的快速回复。但它不会使单元格可编辑。我仍然需要单击单元格以使其可编辑。
  • $scope.selectedRows 是数字还是数组?你可能需要$scope.$grid.grid.setActiveCell($scope.selectedRows[0], 0);
【解决方案2】:

遇到类似问题,我需要以下三行来打开一个单元格进行编辑。

grid.setActiveCell(row, col);
grid.setOptions({editable: true});
grid.editActiveCell(grid.getCellEditor());

如果一个单元格被验证为可编辑,我使用布尔值“editCell”和“cellEditOpen”,并设置 grid.setOptions({editable: false});根据需要

【讨论】:

  • 感谢您的快速帮助。即使这个解决方案对我也不起作用
猜你喜欢
  • 1970-01-01
  • 2018-05-29
  • 1970-01-01
  • 1970-01-01
  • 2014-06-22
  • 1970-01-01
  • 1970-01-01
  • 2015-05-22
  • 1970-01-01
相关资源
最近更新 更多