Question

我在我的例子中使用了UI网格。我在这里看到了编辑行的文档。 http://ui-grid.info/docs/#/tutorial/205_row_editable 在给定的示例中，用户可以编辑row中的列。我也使相同的示例也包含模块但不能编辑我的列..什么是编辑列的过程？

这是我的代码 http://plnkr.co/edit/zypDrZeJUx9ZoTHNnMxc?p=preview

已添加模块

angular.module('app',['ngTouch', 'ui.grid', 'ui.grid.selection' ,'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.cellNav'])

这是我的JS文件

$scope.gridOptions = {
        //filter demo
        // enableFiltering: true,
        // showHeader: false, // show header check
            enableRowSelection: true,
            multiSelect:false,
            //show checkbox front of each row or not
            enableRowHeaderSelection: false,
            onRegisterApi : function(gridApi){
      //set gridApi on scope
      $scope.gridApi = gridApi;
      gridApi.selection.on.rowSelectionChanged($scope,function(row){
        var msg = 'row selected ' + row.entity.age;
        console.log(row);
      });
            },

             enableFiltering: true,


     columnDefs: [
         {
                 field: 'gender', 
                 displayName:'Gender',
                 filter: { 
                     type: uiGridConstants.filter.SELECT,
                     selectOptions: [ 
                         { value: 'm', label: 'male' },
                         { value: 'F', label: 'female' },
                         { value: 'N', label: 'mdd' }

                     ]
                 },
             },



       {field: 'name', displayName:'First'},
       {field: 'lastname', displayName:'Second',enableSorting: false}
       ]
   }

Answer 1

看看演示，我希望这是你想要的。

它与你的不完全相同，但你仍然可以编辑代码。

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.selection']);


app.controller('MainCtrl', ['$scope', '$http', '$q', '$interval', 'uiGridConstants',
  function($scope, $http, $q, $interval, uiGridConstants) {
    $scope.data = [{
      name: 'abc',
      lastname: 'hrt',
      gender: 'm',
      age: 28

    }, {
      name: 'pqr',
      lastname: 'oiu',
      gender: 'F',
      age: 8

    }, {
      name: 'lqm',
      lastname: 'ytu',
      gender: 'N',
      age: 11

    }];

    $scope.gridOptions = {
      enableFiltering: true,
      enableRowSelection: true,
      multiSelect: false,
      enableRowHeaderSelection: false
    };

    $scope.gridOptions.columnDefs = [{
      name: 'gender',
      displayName: 'Gender',
      filter: {
        type: uiGridConstants.filter.SELECT,
        selectOptions: [{
            value: 'm',
            label: 'male'
          }, {
            value: 'F',
            label: 'female'
          }, {
            value: 'N',
            label: 'mdd'
          }

        ]
      }
    }, {
      name: 'name',
      displayName: 'First'
    }, {
      name: 'lastname',
      displayName: 'Second'
    }];

    $scope.saveRow = function(rowEntity) {
      // create a fake promise - normally you'd use the promise returned by $http or $resource
      var promise = $q.defer();
      $scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise);

      promise.resolve();
    };

    $scope.gridOptions.onRegisterApi = function(gridApi) {
      //set gridApi on scope
      $scope.gridApi = gridApi;
      gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);

      gridApi.selection.on.rowSelectionChanged($scope, function(row) {
        var msg = 'row selected ' + row.entity.age;
        console.log(row);
      });
    };

    $scope.gridOptions.data = $scope.data;
  }
]);

<!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 ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-selection class="grid"></div>
  </div>


  <script src="app.js"></script>
</body>

</html>

如有任何进一步的问题，欢迎您。这是Plunker。

如何在角度js中编辑值的列？

1 个答案: