Angular Ui Grid導入數據

我是Angular Ui Grid的新用戶。我目前有一個支持csv文件導出和導入的網格，但導入功能存在問題。Angular Ui Grid導入數據

我有一個來自數據庫的預設數據模擬信息。這會給我這樣的例子如下

Grid Example

我嘗試導入下面

New Grid with different columns

更清晰的呈現出新的數據。我想在第一張圖片中將新數據（第二張圖片）添加到網格中，但在第一張圖片中從網格中完全刪除信息（數據和列）。

換句話說，我希望導入的數據覆蓋在同一個網格中找到的以前的數據。

來源

2016-03-01 cacev000

-1

從問題中不清楚如何將數據綁定到網格？ ui-grid="{ data: myData }"這樣只？

如果您的數據格式和列definations是不同的充，那麼你需要設置他們明確地這樣，

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]的數據內容正確，那麼您必須能夠切換網格數據和選項。

來源

2016-03-01 18:48:31

我目前使用的東西如下。 'self.gridOptions.data = obj [0] .data;''和'self.gridOptions.columnDefs = obj [1] .Data'其中** obj [0] **包含每行的數據和** obj [ 1] **列名稱。我會盡力在我的問題中更清楚。目前正在更新中 – cacev000

我編輯了我的問題，希望更清楚 – cacev000

好的。按照你的說法工作，謝謝。 – cacev000

Angular Ui Grid導入數據

回答

相關問題