web-dev-qa-db-fra.com

Grille d'interface utilisateur ajouter une ligne modifiable

Je voulais ajouter une nouvelle ligne dans ma grille existante. En outre, la ligne qui est poussée doit être modifiable.

Je me suis fatigué en dessous du code et la ligne est en train de s'ajouter

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

Quelqu'un peut-il m'aider pour la même chose?.

angularjsangular-ui-grid
6
Rohan Kangale

Essayez cet échantillon 

Mettre à jour

C'est du code source complet 

<!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>

code du contrôleur et du module 

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' });
    };


 }]);

Mise à jour de la démo dans plunkr

4
Ramesh Rajendran

dans le contrôleur

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
 };
}]);

en 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>

0
may lee