分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – UI网格添加可编辑的行，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

有人可以帮助我吗？

解决方法

试试这个样本

更新

这是完整的源代码

<!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,{ name: 'Test insert ',title: 'Test insert' });
    };


 }]);