Question

我想在现有网格中添加一个新行。此外，推送的行应该是可编辑的。

我在代码下面累了，行正在添加，但我希望添加可编辑的字段

//

有人可以帮助我。

Answer 1

试试这个样本

更新

这是完整的源代码

<!doctype html>
<html ng-app="app">
  <head>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/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-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
    </head>
  <body>

<div ng-controller="MainCtrl">
<div ui-grid="{ data: data, columnDefs: columnDefs,enableRowSelection: true,
    enableSelectAll: true,
    enableFiltering: true, }" class="grid" ui-grid-selection ui-grid-edit ui-grid-cellnav></div>
<button ng-click="addNewItem()" > ADD item</button>
<button ng-click="insertNewItem()" > Insert item</button>
</div>


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

控制器和模块代码

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.edit','ui.grid.cellNav']);

app.controller('MainCtrl', ['$scope', function ($scope) {
   $scope.data = [
     { name: 'Bob', title: 'CEO' },
     { name: 'Frank', title: 'Lowly Developer' }
   ];

   $scope.columnDefs = [
     {name: 'name', cellEditableCondition:true},
     {name: 'title', cellEditableCondition:true}
   ];

    $scope.addNewItem=function()
    {
      $scope.data.push( { name: 'Test add ', title: 'Test add' });
    };

    $scope.insertNewItem=function()
    {
      $scope.data.splice(1, 0,  { name: 'Test insert ', title: 'Test insert' });
    };


 }]);

Updated Demo in plunkr

Answer 2

控制器中的

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.addData = function() {
    var n = $scope.gridOpts.data.length + 1;
    $scope.gridOpts.data.push({
        "firstName": "New " + n,
        "lastName": "Person " + n,
        "company": "abc",
        "employed": true,
        "gender": "male"
      });
  };

var columnDefs1 = [
  { name: 'firstName' },
  { name: 'lastName' },
  { name: 'company' },
  { name: 'gender' }
];

var data1 = [
  {
   "firstName": "Cox",
   "lastName": "Carney",
   "company": "Enormo",
   "gender": "male"
  },
  {
   "firstName": "Lorraine",
   "lastName": "Wise",
   "company": "Comveyer",
   "gender": "female"
 },
 {
   "firstName": "Nancy",
   "lastName": "Waters",
   "company": "Fuelton",
   "gender": "female"
 },
 {
   "firstName": "Misty",
   "lastName": "Oneill",
   "company": "Letpro",
   "gender": "female"
 }
];

 $scope.gridOpts = {
    columnDefs: columnDefs1,
    data: data1
 };
}]);

in html

<body>
<div ng-controller="MainCtrl">
  <button type="button" id="addData" class="btn btn-success" ng-click="addData()">Add Data</button>
  <div id="grid1" ui-grid="gridOpts" class="grid"></div>
</div>

Answer 3

 $scope.gridOpts.data.push({
        "firstName": "New " + n,
        "lastName": "Person " + n,
        "company": "abc",
        "employed": true,
        "gender": "male",
    enableCellEdit: true,
      });

add enableCellEdit：是，启用

UI网格添加可编辑行

3 个答案:

更新

Updated Demo in plunkr