angularjs – UI网格添加可编辑的行

发布时间：2020-12-17 07:11:17 所属栏目：安全来源：网络整理

导读：我想在现有网格中添加一个新行.此外,正在推送的行应该是可编辑的. 我在代码下面累了,行已经添加了,但我希望添加可编辑的字段 $scope.addNewItem=function() { $scope.data.push( { name: 'Test add ' });}; 有人可以帮助我吗？解决方法试试这个样本更新

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

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

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


 }]);

Updated Demo in plunkr

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!