十一、UI-Grid 增/删/替换数据

最新推荐文章于 2024-08-01 15:20:50 发布

西柚叨叨

最新推荐文章于 2024-08-01 15:20:50 发布

阅读量2.2k

点赞数

分类专栏： angularjs ui-grid中文api 文章标签： angularjs ui-grid ui-grid中文 ui-gird中文版

原文链接：https://xiyoudaodao.gitee.io/ui-grid/ui-grid-add-delete-swap-data/

版权

angularjs ui-grid中文api 专栏收录该内容

35 篇文章 11 订阅

订阅专栏

原文：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="/release/ui-grid.js"></script>
    <script src="/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>

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

Demo
这里写图片描述
文章来源：西柚叨叨的个人博客