Question

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

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

Grid Example

我尝试导入下面显示的新数据

New Grid with different columns

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

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

Answer 1

从问题来看，目前还不清楚如何将数据绑定到网格？ 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 documentaion

中给出的相同示例

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

Angular Ui Grid导入数据

1 个答案: