गतिशील एजी ग्रिड

Question

का उपयोग कर रहा का उपयोग कर एजी ग्रिड technology.I'm AngularJS के लिए नया हूँ और स्तंभ प्रदर्शित करना चाहते हैं गतिशील

---

मेरी json डेटा है स्तंभ प्रदर्शित करने के लिए कैसे:

[{Date:'12-12-2015',Name:'ammu',mark:20},{Date:'12-12-2015',Name:'appu',mark:24},{Date:'12-12-2015',Name:'anu',mark:27},{Date:'13-12-2016',Name:'ammu',mark:23},{Date:'13-12-2015',Name:'anu',mark:20}] 

---

मेरे अपेक्षित आउटपुट Expected Output

है मौजूदा कोड नीचे दिया गया है

$scope.gridOptions = { 
    columnDefs: [], 
    enableFilter: true, 
    rowData: [], 
    rowSelection: 'multiple', 
    rowDeselection: true 
}; 
$scope.customColumns = []; 
Getdetails(); 
function Getdetails() 
{ 
    masterdataFactory.Getdetails() 
    .success(function (Student) { 
     f (Student.length != 0) { 
      for(var i=0;i<Student.length;i++) { 
       $scope.customColumns.push(
        { 
         headerName: Student[i].Name, 
         field: "Mark", 
         headerClass: 'grid-halign-left' 

        } 
       ); 
      }; 
      $scope.gridOptions.columnDefs = $scope.customColumns; 
      $scope.gridOptions.rowData = Student; 
      $scope.gridOptions.api.setColumnDefs(); 
      }     
    }) 
     .error(function (error) { 
      $scope.status = 'Unable to load data: ' + error.message; 
     }); 
} 

मौजूदा आउटपुट नीचे Existing Output

दिया जाता है, मौजूदा उत्पादन

Answer 1

पहले json डेटा की व्यवस्था

[{Date:'12-12-2015',ammu:20,appu:24,anu:27},{Date:'13-12-2016' ammu:23,anu:20}] 

इस उद्देश्य के लिए

मैं कोड निम्नलिखित

   function generateChartData() { 
      var chartData = [], 
       categories = {}; 
      debugger; 
      for (var i = 0; i <Student.length; i++) { 
       var newdate = Student[ i ].Date; 
       var Name=Student[ i ].Name; 
       var Mark=Student[ i ].Mark; 
       // add new data point 
       if (categories[ newdate ] === undefined) { 
        categories[ newdate ] = { 
         DATE: newdate 
        }; 
        chartData.push(categories[ newdate ]); 
       } 

       // add value to existing data point 

       categories[ newdate ][ Name] = Mark; 
      } 

      return chartData; 
     } 

ग्रिड विकल्प का उपयोग कर रहा नीचे दिया गया है

$scope.gridOptions = { 
      columnDefs: coldef(), 
      enableFilter: true, 
      rowData: [], 
      rowSelection: 'multiple', 
      rowDeselection: true, 
      enableColResize: true, 

      } 
      }; 
     $scope.gridOptions.columnDefs = $scope.customColumns; 
     $scope.gridOptions.rowData =generateChartData(); 
     $scope.gridOptions.rowData = generateChartData(); 
} 

स्तंभ परिभाषा गतिशील है जो

नीचे दिया गया है

function coldef() 
{ 
    for(var i=0;i<headers.length;i++) { 
     debugger; 
     $scope.customColumns.push(
           { 
            headerName: headers[i], 
            field:headers[i], 
            headerClass: 'grid-halign-left', 
            width:180, 
            filter: 'set', 
          }); 
     } } 

इस शीर्षक में

एक सरणी है। इस सरणी विभिन्न छात्र के नाम

var headers=new Array(); 
headers[0]="DATE"; 
var Names= Student.map(function (item) { return item.Name}); 
Names= Names.filter(function (v, i) { return Names.indexOf(v) == i; }); 
     for(var i=1;i<=Names.length;i++) 
     { 
      headers[i]=Names[i-1]; 
     } 

Answer 2

मुझे लगता है कि डेटा अपने इनपुट डेटा (विद्यार्थी) अपराधी हो सकते हैं से मेरी अपेक्षित आउटपुट तक पहुंच कैसे कोष्ठक को लग सकता है निराले ढंग से जोड़ा जाना (अपने डेटा की नकल की है, लेकिन आसान होने के लिए स्वरूपित पढ़ने के लिए):

[ 
    {Date:'12-12-2015',Name:'ammu',mark:20}, 
    Date:'12-12-2015',Name:'appu',mark:24}, 
    Date:'12-12-2015',Name:'anu',mark:27}, 
    Date:'13-12-2016',Name:'ammu',mark:23}, 
    {Date:'13-12-2015',Name:'anu',mark:20} 
] 

दूसरा, तीसरा एक nd चौथी लाइन की शुरुआत { नहीं है।

Answer 3

ऐसा लगता है कि आप अपना डेटा प्राप्त करने के लिए एसिंक कॉल का उपयोग कर रहे हैं ताकि कॉल ग्रिड से पहले ही शुरू हो जाए।

के बाद ग्रिड initialiazed है आप (gridOptions.api ...) girdOptions.columnsDef के बजाय ग्रिड API का उपयोग करना (http://www.ag-grid.com/angular-grid-api/index.php देखें)

Answer 4

अपने कोड में काफी कुछ चीजें गलतियों को सुधारने के होते हैं:

पहला: 'एपीआई' फ़ील्ड शुरू में उपलब्ध नहीं है।

1. ग्रिड अभी तक लोड नहीं की गई (एक $ टाइमआउट या http://www.ag-grid.com पर तैयार घटना जांच दस्तावेज़ में कॉल लपेट): यह दो बातें मतलब है कर सकते हैं।
2. आप अपने डीओएम तत्व में एजी-ग्रिड निर्देश भूल जाते हैं ताकि ग्रिड बिल्कुल शुरू नहीं हो सके।

2: $ scope.gridOptions.api.setColumnDefs() का उपयोग नहीं करते; लेकिन $ scope.gridOptions.api.setColumnDefs (myNewColumnsDefs);

तीसरा: यदि ग्रिड पहले ही शुरू हो चुका है, तो rowData उपयोग api.setRowData (myDatas) का उपयोग न करें, संभवत: सेटकॉलमडिफ को कॉल करने के बाद इसका उपयोग करके बेहतर है, लेकिन मुझे नहीं लगता कि यह कुछ भी गड़बड़ कर देगा।

Answer 5

$scope.gridOptions ={ 
     enableSorting: true, 
     enableFilter: true, 
     suppressMovableColumns:true, 
     enableColResize: true, 
     columnDefs : [], 
     rowHeight : 27, 
     tooltipField : true, 
     suppressLoadingOverlay : true, 
     overlayLoadingTemplate: '<span class="ag-overlay-loading-center" style=background:lightgoldenrodyellow>Please wait while your rows are loading</span>', 
     //getRowStyle : getRowStyleScheduled 
    };  

    $scope.gridRefresh = function() { 
$scope.columnsHeaders =[]; 
     for (var i = 0, len = $scope.columnsHeaders.length; i < len; i++) { 
      $scope.columnsHeaders[i].headerName = $scope.columnsHeaders[i].name; 
      $scope.columnsHeaders[i].field = $scope.columnsHeaders[i].field; 
      $scope.columnsHeaders[i].cellRenderer = function(params) { 
       if(params.value != null) { 
        return '<span title="'+params.value+'">'+params.value+'</span>'; 
       }else { 
        return null; 
       } 
      } 
     $scope.gridOptions.columnDefs.push($scope.columnsHeaders[i]); 
     } 
     $scope.gridOptions.api.setColumnDefs($scope.gridOptions.columnDefs); 
     $scope.gridOptions.api.setRowData($scope.Rows); 
     $scope.gridOptions.columnApi.autoSizeColumns($scope.gridOptions.columnDefs); 
    } 

Answer 6

// the api will not be available unless it is compiled with the **$timeout** or **setTimeout** because this javascript library does not fall in angular digest cycle 
$timeout(function() { 
    $scope.gridOptions.api.setColumnDefs(masterColumnDefs); 
}, 0); 

यह एजी ग्रिड की API एक्सेस करने की आपकी मदद करेगा होते हैं।

आशा है कि इससे मदद मिलती है!