角度 UI 网格导入数据

Angular Ui Grid Import Data

本文关键字：数据 导入 网格 UI 角度      更新时间：2023-09-26

我是Angular Ui Grid的新手。我目前有一个支持导出和导入 csv 文件的网格，但导入功能有问题。

我有一个预设的数据模拟来自数据库的信息。 这将给我类似下面的例子

网格示例

我尝试导入如下所示的新数据

具有不同列的新网格

更清楚一点。我想将新数据（第二张图片）添加到第一张图片中的网格中，但从第一张图片的网格中完全删除信息（数据和列）。

换句话说，我希望导入的数据覆盖在同一网格中找到的先前数据。

从问题来看，不清楚如何将数据绑定到网格？ ui-grid="{ data: myData }"只喜欢这样？

如果你的数据格式和列反抗不同，那么你需要像这样显式设置它们，

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope', function ($scope) {
gridOptions1 = {
        enableSorting: true,
        columnDefs: [
          { name:'firstName', field: 'first-name' },
          { name:'1stFriend', field: 'friends[0]' },
          { name:'city', field: 'address.city'},
          { name:'getZip', field: 'getZip()', enableCellEdit:false}
        ],
        data : [      {
                           "first-name": "Cox",
                           "friends": ["friend0"],
                           "address": {street:"301 Dove Ave", city:"Laurel", zip:"39565"},
                           "getZip" : function() {return this.address.zip;}
                       }
                   ]
      };
  
gridOptions2 = {
        enableSorting: true,
        columnDefs: [
          { name:'firstName1', field: 'first-name1' },
          { name:'1stFriend1', field: 'friends1[0]' },
          { name:'city1', field: 'address1.city'}
        ],
        data : [      {
                           "first-name1": "Cox1",
                           "friends1": ["friend1"],
                           "address1": {street:"301 Dove Ave1", city:"Laurel1", zip:"395651"}
                       }
                   ]
      };
  
  $scope.gridOptions = gridOptions1;
  $scope.changeBinding = function(){
    
      $scope.gridOptions = gridOptions2;
  }
}]);
.grid {
  width: 500px;
  height: 250px;
}
<!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">  
</head>
<body>
  <div ng-controller="MainCtrl">
    <div id="grid1" ui-grid="gridOptions" ui-grid-edit class="grid"></div>
    <button ng-click="changeBinding()">Change</button>
  </div>
</body>
</html>

我使用了在ui-grid文档中给出的相同示例

更新：更改为动态网格选项。如果来自 obj[0] 和 obj[1] 的数据内容正确，则必须能够切换网格数据和选项。

相关文章：