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，但您需要处理（忽略）服务器中的空行，具体取决于您在网格中保存或处理数据的方式。

通过单击＆＃34;添加行＆＃34;将焦点放在新添加的行上。 Angularjs的ui-grid中的按钮

1 个答案: