阿里云新用户优惠

十一、UI-Grid Add/Delete/Swap Data 增/删/替换 数据

· 341 words · 2 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：112 add/delete/swap data 只要简单地使用一个不同的引用，就可以交换表格中的数据。

  • index.html
<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/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>
    <script src="http://ui-grid.info/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <button type="button" id="swapData" class="btn btn-success" ng-click="swapData()">Swap Data</button>
      <button type="button" id="addData" class="btn btn-success" ng-click="addData()">Add Data</button>
      <button type="button" id="removeFirstRow" class="btn btn-success" ng-click="removeFirstRow()">Remove First Row</button>
      <button type="button" id="reset" class="btn btn-success" ng-click="reset()">Reset</button>
      <br>
      <br>
      <div id="grid1" ui-grid="gridOpts" class="grid"></div>
    </div>
  </body>
</html>
  • main.css
.grid {
  width: 500px;
  height: 250px;
}
  • app.js
var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.swapData = function() {
    if ($scope.gridOpts.data === data1) {
      $scope.gridOpts.data = data2;
      $scope.gridOpts.columnDefs = columnDefs2;
    }
    else {
      $scope.gridOpts.data = data1;
      $scope.gridOpts.columnDefs = columnDefs1;
    }
  };

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

  $scope.removeFirstRow = function() {
    //if($scope.gridOpts.data.length > 0){
       $scope.gridOpts.data.splice(0,1);
    //}
  };

  $scope.reset = function () {
    data1 = angular.copy(origdata1);
    data2 = angular.copy(origdata2);

    $scope.gridOpts.data = data1;
    $scope.gridOpts.columnDefs = columnDefs1;
  }

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

  var origdata1 = angular.copy(data1);

  var columnDefs2 = [
    { name: 'firstName' },
    { name: 'lastName' },
    { name: 'company' },
    { name: 'employed' }
  ];

  var data2 = [
    {
      "firstName": "Waters",
      "lastName": "Shepherd",
      "company": "Kongene",
      "employed": true
    },
    {
      "firstName": "Hopper",
      "lastName": "Zamora",
      "company": "Acium",
      "employed": true
    },
    {
      "firstName": "Marcy",
      "lastName": "Mclean",
      "company": "Zomboid",
      "employed": true
    },
    {
      "firstName": "Tania",
      "lastName": "Cruz",
      "company": "Marqet",
      "employed": true
    },
    {
      "firstName": "Kramer",
      "lastName": "Cline",
      "company": "Parleynet",
      "employed": false
    },
    {
      "firstName": "Bond",
      "lastName": "Pickett",
      "company": "Brainquil",
      "employed": false
    }
  ];

  var origdata2 = angular.copy(data2);

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

关注微信公众号，与我交流吧~

分享