2013-06-24 23 views
16

Tôi có một ứng dụng mà người dùng chọn một tùy chọn để lấy dữ liệu lưới từ phía máy chủ và phụ thuộc vào lựa chọn của người dùng, số cột dữ liệu lưới có thể thay đổi. Tôi đang sử dụng Angularjs và ng-grid để hiển thị dữ liệu. Lần đầu tiên, nó hoạt động tốt và hiển thị số cột chính xác (ví dụ: 2 cột). nhưng khi người dùng chọn tùy chọn khác, có 3 cột lưới dữ liệu, ng-lưới vẫn nghĩ về các cột cũ thông tin và cố gắng để ánh xạ thứ hai 3-cols lưới dữ liệu trong 2 cột cũ. Vì thông tin cột không có sẵn, tôi không thể sử dụng cộtDef trong bộ điều khiển. Làm thế nào tôi có thể làm mới cột ng lưới.
Lưu ý: Tôi đã cố gắng để đặt mã tại jsFiddle (http://jsfiddle.net/User888/pwUeX/11/), nhưng bằng cách nào đó, tôi không thể chạy nó. Mã hoàn chỉnh của tôi ở đây.Làm thế nào để làm mới ng lưới khi griddata có số cột khác nhau từ griddata hiển thị trước đây

Ngoài ra: Làm cách nào tôi có thể hiển thị hàng # trong lưới ng mà không gửi nó từ máy chủ.

My HTML file: 
<!DOCTYPE html> 
<html ng-app="myApp"> 
    <head lang="en"> 
     <meta charset="utf-8"> 
     <title>test </title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
     <script type="text/javascript" src="http://angular-ui.github.io/ng-grid/lib/ng-grid.js"></script> 
     <script type="text/javascript" src="gridExample.js"></script> 

     <link rel="stylesheet" type="text/css" href="http://angular-ui.github.io/ng-grid/css/ng-grid.css" /> 
     <link rel="stylesheet" type="text/css" href="css/style.css" /> 
    </head> 
    <body ng-controller="GridExampleCtrl"> 
    <div> 
     Grid Selection:  
     <select ng-model="gridSelectedId"> 
      <option ng-repeat="gridSel in gridSels" value="{{gridSel.GridSelId}}">{{gridSel.GridSelName}}</option> 
     </select> 

     <br/>User selected: {{gridSelectedId}} <br><hr>  
     <div> 
      <button ng-click="display()">Display</button><hr> 
      <div class="gridStyle" ng-grid="gridOptions"></div> 
     </div>  
    </div> 
    </body> 
</html> 

My Controller là:

var app = angular.module('myApp', ['ngGrid']); 

app.controller('GridExampleCtrl', function ($scope, $http, $timeout) {  

    $scope.myData = []; 

    $scope.grid1 = [{name: "grid1a", age: 50}, 
        {name: "grid1b", age: 43}, 
        {name: "grid1c", age: 50}, 
        {name: "grid1d", age: 29}, 
        {name: "grid1e", age: 34}]; 

    $scope.grid2 = [{lastname: "grid2a", age: 50, state:'Idaho'}, 
        {lastname: "grid2b", age: 43, state:'NewYork'}, 
        {lastname: "grid2c", age: 50, state:'California'}, 
        {lastname: "grid2d", age: 29, state:'Arizona'}, 
        {lastname: "grid2e", age: 34, state:'Utah'}]; 

    $scope.gridSels = [ 
         {GridSelId : 1, GridSelName : 'Grid 1' },  
         {GridSelId : 2, GridSelName : 'Grid 2' } 
         ] 

    $scope.gridOptions = { 
       data: 'myData', 
       enableColumnResize: true, 
       showGroupPanel: true, 
       //pagingOptions: $scope.pagingOptions 
      }; 

    $scope.display = function(){ 
     console.log("User selected grid : " + $scope.gridSelectedId); 
     if ($scope.gridSelectedId == 1) { 
      $scope.myData = $scope.grid1;   
     } else { 
      $scope.myData = $scope.grid2; 
     } 
    };  

}); 

và css trông giống như:

.gridStyle { 
    border: 1px solid rgb(212,212,212); 
    width: 800px; 
    height: 400px; 
} 

Trả lời

8

Mặc dù a bug trong ng-lưới ngăn câu trả lời này làm việc tốt với enableColumnResize: true (thay đổi cho columnDefs sau khi thay đổi cột sẽ dẫn đến dữ liệu vô hình), trong các trường hợp cơ bản, bạn có thể làm điều gì đó dọc theo các dòng

$scope.colDefs = []; 

$scope.$watch('myData', function() { 
$scope.colDefs = []; 

angular.forEach(Object.keys($scope.myData[0]), function(key){ 
    $scope.colDefs.push({ field: key }); 
    }); 
} 
); 

$scope.gridOptions = { 
    data: 'myData', 
    columnDefs: 'colDefs', 
    enableColumnResize: false, 
    showGroupPanel: true 
}; 

Dưới đây là một plunker làm việc thể hiện nó với ví dụ của bạn: http://plnkr.co/edit/w1DLtS

+4

Tôi sẽ cảnh báo rằng việc tạo lại mảng colDefs mỗi lần có thể tốn khá nhiều tài nguyên. Ng lưới thực hiện rất nhiều khoảng cách tính toán mỗi khởi tạo. Bạn có thể được phục vụ tốt hơn thay đổi thông số "hiển thị: đúng/sai" thay thế. – Clev3r

10

Bạn cũng có thể gọi một phương thức được cung cấp trong mã nguồn. Điều này có thể không có sẵn tại thời điểm đặt câu hỏi nhưng tôi đã tự mình gặp vấn đề. Nếu bạn có thể nhắm mục tiêu lưới riêng của mình, bạn có thể sử dụng một cái gì đó tương tự như đoạn mã này

scope.gridOptions.ngGrid.buildColumns(); 

buildColumns() là chức năng quan trọng và bạn cần phải xác định lại mảng columnDefs như brentiumbrent nêu

+1

Tôi không thể làm điều này để làm việc, như tại thời điểm thay đổi cột của tôi tài sản ngGrid vẫn còn null. Bạn có thể cho tôi biết nơi bạn đã đặt mã đó không? Tôi đoán bạn đang nghe một số loại sự kiện và sau đó đá nó ra? Cảm ơn bạn. – PRB

+0

Vâng, cuộc gọi chức năng đó được thực hiện sau khi chỉ thị kendo có thể bị ràng buộc. Chúng tôi gọi đó là kết quả của việc chọn/bỏ chọn các cột từ danh sách thả xuống nằm ở nơi khác trên trang. Rất tiếc vì đã trả lời câu hỏi này quá muộn..không nhận ra bạn đã đăng nhận xét. – Nolic0321

0

tôi cũng chạy vào vấn đề này khi tôi đã cố gắng để làm điều này như dịch vụ (không cần phải thiết lập nó một mình tất cả thời gian tôi cần nó).

Một mảnh của dịch vụ của tôi:

setColumns: function(columnDefs){ 
    $rootScope.columnDefs = columnDefs;  
    return $rootScope.columnDefs; 
} 

tôi cho tên cột mới và các lĩnh vực trong mảng (columnDefs) sau khi tôi gán cột mới.