通过单击 Angularjs 的 ui 网格中的 "Add Row" 按钮，将焦点放在新添加的行上进行编辑

Question

点击添加行按钮时，它应该在 ui-grid 中添加一个新行，并且需要为特定新添加行的所有列带来编辑焦点。

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

    <div ng-controller="MainCtrl">
      <div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-edit ui-grid-cellnav></div>
      <br/>
      <br/>
      <button class="btn btn-default" ng-click="addUser()">Add row</button>
    </div>

    <script src="app.js"></script>
  </body>
</html>

Answer 1

在你的 addUser() 函数之前添加这个

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;
}

不幸的是（由于 ui-grid 限制我无法解决），您需要在初始数据收集中创建一个空行。

{
    "firstName": "Nancy",
    "lastName": "Waters",
    "company": "Fuelton",
    "employed": false
},
{
    "firstName": null,
    "lastName": null,
    "company": null,
    "employed": null
}

然后 push() 而不是 unshift() 到倒数第二行...

$scope.gridOptions.data.push(_model);
$scope.gridApi.cellNav.scrollToFocus($scope.gridOptions.data[$scope.gridOptions.data.length - 2], $scope.gridOptions.columnDefs[0]);

这在您的 plunker 中有效，但您需要处理（忽略）服务器中的空行，具体取决于您在网格中保存或处理数据的方式。

通过单击 Angularjs 的 ui 网格中的 "Add Row" 按钮，将焦点放在新添加的行上进行编辑

Bring Edit with focus on a row newly added by clicking "Add Row" button in ui-grid of Angularjs

angular-ui-grid