2017-12-09 14 views
0

Angularjs UIグリッド

catsUser.controller('MainCtrl', ['$scope', '$http','uiGridConstants','$interval', function ($scope, $http,uiGridConstants,$interval) { 
 

 
\t $scope.resultSummary=true; 
 
\t 
 
\t $scope.getEventJson=function(){ 
 
\t \t 
 
\t \t $http.get('ui/app/components/cpf/user/data/JsonDataForGrid.json').then(function(response){ 
 
\t \t \t console.log(response) 
 
\t \t \t $scope.EventList=response.data; 
 
\t \t \t $scope.CreateGrids(); 
 
\t \t \t 
 
\t \t }) 
 
\t } 
 
    
 
\t $scope.getEventJson(); 
 

 
    $scope.data = {}; 
 
    $scope.gridapis=[] 
 
    $scope.CreateGrids = function() { 
 

 
\t var count=0; 
 
\t angular.forEach($scope.EventList,function(Evt){ 
 
     var eventData = "griddata" + count; 
 
     $scope.data[eventData] = []; 
 
     $scope.data[eventData] = { 
 
     enableRowSelection: false, 
 
     enableSorting: true, 
 
     enableColumnResizing: true, 
 
     enableGridMenu: true, 
 
     enableFiltering: false, 
 
     enableCellEditOnFocus:true,   
 
     multiSelect: true, 
 
     data:Evt.record, 
 
     columnDefs:Evt.col 
 
     
 
     }; 
 
     count++; 
 
     
 
     
 
     $scope.data[eventData].onRegisterApi=function(gridApi){ 
 
    \t 
 
    \t console.log("ON REGISTER API FOR GRID:"+eventData); 
 

 
    \t var k=eventData.slice(-1); 
 
    \t $scope.gridapis[k]=gridApi 
 
    \t 
 
    \t 
 
    \t //Listener to change the color 
 
    \t gridApi.edit.on.afterCellEdit($scope,function(rowEntity,colDef,newval,oldval){ 
 
      \t colDef.cellClass = function(grid, row, col, rowRenderIndex, colRenderIndex) { 
 
      \t  if (rowEntity.EventID === row.entity.EventID &&newval !== oldval && row.isSelected==true) { 
 
      \t   return "changecolor"; 
 
      \t  } 
 
      \t  return ""; 
 
      \t  }; 
 
      \t  gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);   \t    \t \t    \t \t   
 
      }) 
 
    \t 
 
    \t 
 
    \t 
 
    \t 
 
    \t if($scope.resultSummary){ 
 
    \t $scope.gridapis[k].grid.modifyRows($scope.data['griddata'+k].data); \t \t  \t 
 
\t \t for(var i=0; i< $scope.selRows[k].length; i++){ 
 
\t \t \t if($scope.selRows[k]) 
 
\t \t \t gridApi.selection.selectRow(($scope.selRows[k])[i]);            
 
    \t \t } 
 
    \t } 
 
\t 
 
    \t 
 

 
     } 
 
    
 
    }) 
 
    }; 
 

 
    
 
    
 
    
 
    
 
    
 
    $scope.selRows=[]; 
 
    $scope.AllRowsData=[] 
 
    $scope.submitEvents=function(){ \t 
 
    $scope.resultSummary=false; 
 
    angular.forEach($scope.gridapis,function(gridApi,key){ \t 
 
\t 
 
\t $scope.AllRowsData.push($scope.data['griddata'+key].data) 
 
\t $scope.selRows[key]=gridApi.selection.getSelectedRows(); \t \t  \t 
 
\t $scope.data['griddata'+key].enableRowHeaderSelection = false; \t 
 
\t $scope.gridapis[key].core.notifyDataChange(uiGridConstants.dataChange.OPTIONS); \t 
 
\t $scope.data['griddata'+key].data=$scope.selRows[key]; 
 

 
}) 
 
    } 
 
    
 
    $scope.backToResultSummary=function(){ \t 
 
\t $scope.resultSummary=true; \t 
 
\t angular.forEach($scope.gridapis,function(gridApi,key){ \t \t \t \t \t 
 
\t \t $scope.data['griddata'+key].data=$scope.AllRowsData[key]; \t \t \t \t \t \t  
 
\t \t $scope.data['griddata'+key].enableRowHeaderSelection = true; 
 
\t \t gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS); 
 
\t }) \t 
 
    } 
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 

 
$scope.isActive=function(){ 
 
\t 
 
\t 
 
\t return true 
 
\t 
 
\t 
 
} 
 
    
 
$scope.toggleAccord=function(){ 
 
\t if($scope.isActive==true){ 
 
\t \t $scope.isActive=false 
 
\t } 
 
\t 
 
\t if($scope.isActive==false){ 
 
\t \t $scope.isActive=true 
 
\t } 
 
} 
 
    
 

 
    
 
}]); 
 

 

 

 

 

 

 

 
//JSON DATA 
 

 

 
[ 
 
    { 
 
    "EventName": "BONU CA00007986795/0031366-000/Euroclear 96008", 
 
    "col": [ 
 
     { 
 
     "name": "EventID", 
 
     "displayName": "EventID" 
 
     }, 
 
     { 
 
     "name": "Account ID", 
 
     "displayName": "Account ID" 
 
     }, 
 
     { 
 
     "name": "Reference No", 
 
     "displayName": "Reference No" 
 
     }, 
 
     { 
 
     "name": "Security", 
 
     "displayName": "Security" 
 
     }, 
 
     { 
 
     "name": "Event Type", 
 
     "displayName": "Event Type" 
 
     }, 
 
     { 
 
     "name": "Event Category", 
 
     "displayName": "Event Category" 
 
     }, 
 
     { 
 
     "name": "Ex Date", 
 
     "displayName": "Ex Date" 
 
     }, 
 
     { 
 
     "name": "Entitlement Method", 
 
     "displayName": "Entitlement Method" 
 
     }, 
 
     { 
 
     "name": "Rate", 
 
     "displayName": "Rate" 
 
     }, 
 
     { 
 
     "name": "Rate Per share", 
 
     "displayName": "Rate Per share" 
 
     }, 
 
     { 
 
     "name": "Type", 
 
     "displayName": "Type" 
 
     }, 
 
     { 
 
     "name": "Status", 
 
     "displayName": "Status" 
 
     }, 
 
     { 
 
     "name": "Source", 
 
     "displayName": "Source" 
 
     } 
 
    ], 
 
    "record": [ 
 
     { 
 
     "EventID": "CA00007986795", 
 
     "Account ID": "NBL0178529", 
 
     "Reference No": "US0378331005", 
 
     "Security": "APPLE INC", 
 
     "Event Type": "BONU", 
 
     "Event Category": "MAND", 
 
     "Ex Date": "15/10/2017", 
 
     "Entitlement Method": "Calculated/NV", 
 
     "Rate": "1751", 
 
     "Rate Per share": " ", 
 
     "Type": "NEWM", 
 
     "Status": "Released", 
 
     "Source": "EUROCLEAR" 
 
     }, 
 
     { 
 
     "EventID": "CA00007986796", 
 
     "Account ID": "NBL0178529", 
 
     "Reference No": "US0378331005", 
 
     "Security": "APPLE INC", 
 
     "Event Type": "BONU", 
 
     "Event Category": "MAND", 
 
     "Ex Date": "15/10/2017", 
 
     "Entitlement Method": "Calculated/NV", 
 
     "Rate": "2751", 
 
     "Rate Per share": " ", 
 
     "Type": "NEWM", 
 
     "Status": "Released", 
 
     "Source": "EUROCLEAR" 
 
     }, 
 
     { 
 
     "EventID": "CA00007986797", 
 
     "Account ID": "NBL0178529", 
 
     "Reference No": "US0378331005", 
 
     "Security": "APPLE INC", 
 
     "Event Type": "BONU", 
 
     "Event Category": "MAND", 
 
     "Ex Date": "15/10/2017", 
 
     "Entitlement Method": "Calculated/NV", 
 
     "Rate": "2751", 
 
     "Rate Per share": "275/109.31 USD", 
 
     "Type": "NEWM", 
 
     "Status": "Released", 
 
     "Source": "EUROCLEAR" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "EventName": "BONU CA00007986795/0022255-001/Euroclear 96008", 
 
    "col": [ 
 
     { 
 
     "name": "EventID", 
 
     "displayName": "EventID" 
 
     }, 
 
     { 
 
     "name": "Account ID", 
 
     "displayName": "Account ID" 
 
     }, 
 
     { 
 
     "name": "Reference No", 
 
     "displayName": "Reference No" 
 
     }, 
 
     { 
 
     "name": "Security", 
 
     "displayName": "Security" 
 
     }, 
 
     { 
 
     "name": "Event Type", 
 
     "displayName": "Event Type" 
 
     }, 
 
     { 
 
     "name": "Event Category", 
 
     "displayName": "Event Category" 
 
     }, 
 
     { 
 
     "name": "Ex Date", 
 
     "displayName": "Ex Date" 
 
     }, 
 
     { 
 
     "name": "Entitlement Method", 
 
     "displayName": "Entitlement Method" 
 
     }, 
 
     { 
 
     "name": "Rate", 
 
     "displayName": "Rate" 
 
     }, 
 
     { 
 
     "name": "Rate Per share", 
 
     "displayName": "Rate Per share" 
 
     }, 
 
     { 
 
     "name": "Type", 
 
     "displayName": "Type" 
 
     }, 
 
     { 
 
     "name": "Status", 
 
     "displayName": "Status" 
 
     }, 
 
     { 
 
     "name": "Source", 
 
     "displayName": "Source" 
 
     } 
 
    ], 
 
    "record": [ 
 
     { 
 
     "EventID": "CA00007986795", 
 
     "Account ID": "NBL0178529", 
 
     "Reference No": "US0378331005", 
 
     "Security": "APPLE INC", 
 
     "Event Type": "BONU", 
 
     "Event Category": "MAND", 
 
     "Ex Date": "15/10/2017", 
 
     "Entitlement Method": "Calculated/NV", 
 
     "Rate": "1751", 
 
     "Rate Per share": " ", 
 
     "Type": "NEWM", 
 
     "Status": "Released", 
 
     "Source": "EUROCLEAR" 
 
     }, 
 
     { 
 
     "EventID": "CA00007986796", 
 
     "Account ID": "NBL0178529", 
 
     "Reference No": "US0378331005", 
 
     "Security": "APPLE INC", 
 
     "Event Type": "BONU", 
 
     "Event Category": "MAND", 
 
     "Ex Date": "15/10/2017", 
 
     "Entitlement Method": "Calculated/NV", 
 
     "Rate": "2751", 
 
     "Rate Per share": " ", 
 
     "Type": "REPE", 
 
     "Status": "Released", 
 
     "Source": "EUROCLEAR" 
 
     }, 
 
     { 
 
     "EventID": "CA00007986797", 
 
     "Account ID": "NBL0178529", 
 
     "Reference No": "US0378331005", 
 
     "Security": "APPLE INC", 
 
     "Event Type": "BONU", 
 
     "Event Category": "MAND", 
 
     "Ex Date": "15/10/2017", 
 
     "Entitlement Method": "Calculated/NV", 
 
     "Rate": "2751", 
 
     "Rate Per share": "275/109.31 USD", 
 
     "Type": "REPE", 
 
     "Status": "Released", 
 
     "Source": "EUROCLEAR" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "EventName": "BONU CA00007986795/0045386-000/Euroclear 96008", 
 
    "col": [ 
 
     { 
 
     "name": "EventID", 
 
     "displayName": "EventID" 
 
     }, 
 
     { 
 
     "name": "Account ID", 
 
     "displayName": "Account ID" 
 
     }, 
 
     { 
 
     "name": "Reference No", 
 
     "displayName": "Reference No" 
 
     }, 
 
     { 
 
     "name": "Security", 
 
     "displayName": "Security" 
 
     }, 
 
     { 
 
     "name": "Event Type", 
 
     "displayName": "Event Type" 
 
     }, 
 
     { 
 
     "name": "Event Category", 
 
     "displayName": "Event Category" 
 
     }, 
 
     { 
 
     "name": "Ex Date", 
 
     "displayName": "Ex Date" 
 
     }, 
 
     { 
 
     "name": "Entitlement Method", 
 
     "displayName": "Entitlement Method" 
 
     }, 
 
     { 
 
     "name": "Rate", 
 
     "displayName": "Rate" 
 
     }, 
 
     { 
 
     "name": "Rate Per share", 
 
     "displayName": "Rate Per share" 
 
     }, 
 
     { 
 
     "name": "Type", 
 
     "displayName": "Type" 
 
     }, 
 
     { 
 
     "name": "Status", 
 
     "displayName": "Status" 
 
     }, 
 
     { 
 
     "name": "Source", 
 
     "displayName": "Source" 
 
     } 
 
    ], 
 
    "record": [ 
 
     { 
 
     "EventID": "CA00007986795", 
 
     "Account ID": "NBL0178529", 
 
     "Reference No": "US0378331005", 
 
     "Security": "APPLE INC", 
 
     "Event Type": "BONU", 
 
     "Event Category": "MAND", 
 
     "Ex Date": "15/10/2017", 
 
     "Entitlement Method": "Calculated/NV", 
 
     "Rate": "1751", 
 
     "Rate Per share": " ", 
 
     "Type": "NEWM", 
 
     "Status": "Released", 
 
     "Source": "EUROCLEAR" 
 
     }, 
 
     { 
 
     "EventID": "CA00007986796", 
 
     "Account ID": "NBL0178529", 
 
     "Reference No": "US0378331005", 
 
     "Security": "APPLE INC", 
 
     "Event Type": "BONU", 
 
     "Event Category": "MAND", 
 
     "Ex Date": "15/10/2017", 
 
     "Entitlement Method": "Calculated/NV", 
 
     "Rate": "2751", 
 
     "Rate Per share": " ", 
 
     "Type": "NEWM", 
 
     "Status": "Released", 
 
     "Source": "EUROCLEAR" 
 
     }, 
 
     { 
 
     "EventID": "CA00007986797", 
 
     "Account ID": "NBL0178529", 
 
     "Reference No": "US0378331005", 
 
     "Security": "APPLE INC", 
 
     "Event Type": "BONU", 
 
     "Event Category": "MAND", 
 
     "Ex Date": "15/10/2017", 
 
     "Entitlement Method": "Calculated/NV", 
 
     "Rate": "2751", 
 
     "Rate Per share": "275/109.31 USD", 
 
     "Type": "NEWM", 
 
     "Status": "Released", 
 
     "Source": "EUROCLEAR" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "EventName": "BONU CA00007986795/0019555-000/Mitsubishi 87x564", 
 
    "col": [ 
 
     { 
 
     "name": "EventID", 
 
     "displayName": "EventID" 
 
     }, 
 
     { 
 
     "name": "Account ID", 
 
     "displayName": "Account ID" 
 
     }, 
 
     { 
 
     "name": "Reference No", 
 
     "displayName": "Reference No" 
 
     }, 
 
     { 
 
     "name": "Security", 
 
     "displayName": "Security" 
 
     }, 
 
     { 
 
     "name": "Event Category", 
 
     "displayName": "Event Category" 
 
     }, 
 
     { 
 
     "name": "Status", 
 
     "displayName": "Status" 
 
     }, 
 
     { 
 
     "name": "Source", 
 
     "displayName": "Source" 
 
     } 
 
    ], 
 
    "record": [ 
 
     { 
 
     "EventID": "CA00007986795", 
 
     "Account ID": "NBL0178529", 
 
     "Reference No": "US0378331005", 
 
     "Security": "DEVON ENERGY", 
 
     "Event Category": "MAND", 
 
     "Status": "Released", 
 
     "Source": "Mitsubishi" 
 
     }, 
 
     { 
 
     "EventID": "CA00007986796", 
 
     "Account ID": "NBL0178529", 
 
     "Reference No": "US0378331005", 
 
     "Security": "DEVON ENERGY", 
 
     "Event Category": "MAND", 
 
     "Status": "Released", 
 
     "Source": "Mitsubishi" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "EventName": "INTR CA00007986777/0045390-000/BNP Parib. Mill. 100960-208", 
 
    "col": [ 
 
     { 
 
     "name": "EventID", 
 
     "displayName": "EventID" 
 
     }, 
 
     { 
 
     "name": "Account ID", 
 
     "displayName": "Account ID" 
 
     }, 
 
     { 
 
     "name": "Reference No", 
 
     "displayName": "Reference No" 
 
     }, 
 
     { 
 
     "name": "Security", 
 
     "displayName": "Security" 
 
     }, 
 
     { 
 
     "name": "Event Type", 
 
     "displayName": "Event Type" 
 
     }, 
 
     { 
 
     "name": "Event Category", 
 
     "displayName": "Event Category" 
 
     }, 
 
     { 
 
     "name": "Ex Date", 
 
     "displayName": "Ex Date" 
 
     }, 
 
     { 
 
     "name": "Entitlement Method", 
 
     "displayName": "Entitlement Method" 
 
     }, 
 
     { 
 
     "name": "Amount", 
 
     "displayName": "Amount" 
 
     }, 
 
     { 
 
     "name": "Balance", 
 
     "displayName": "Balance" 
 
     }, 
 
     { 
 
     "name": "Type", 
 
     "displayName": "Type" 
 
     }, 
 
     { 
 
     "name": "Status", 
 
     "displayName": "Status" 
 
     }, 
 
     { 
 
     "name": "Source", 
 
     "displayName": "Source" 
 
     } 
 
    ], 
 
    "record": [ 
 
     { 
 
     "EventID": "CA00007986777", 
 
     "Account ID": "NBL0178529", 
 
     "Reference No": "US0378331005", 
 
     "Security": "APPLE INC", 
 
     "Event Type": "INTR", 
 
     "Event Category": "MAND", 
 
     "Ex Date": "15/10/2017", 
 
     "Entitlement Method": "Calculated", 
 
     "Amount": "10000", 
 
     "Balance": "1000 /-", 
 
     "Type": "NEWM", 
 
     "Status": "Released", 
 
     "Source": "BNP Parib. Mill." 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "EventName": "INTR CA00007986777/0045500-000/BNP Parib. Mill. 325043-450", 
 
    "col": [ 
 
     { 
 
     "name": "EventID", 
 
     "displayName": "EventID" 
 
     }, 
 
     { 
 
     "name": "Account ID", 
 
     "displayName": "Account ID" 
 
     }, 
 
     { 
 
     "name": "Reference No", 
 
     "displayName": "Reference No" 
 
     }, 
 
     { 
 
     "name": "Security", 
 
     "displayName": "Security" 
 
     } 
 
    ], 
 
    "record": [ 
 
     { 
 
     "EventID": "CA00007986777", 
 
     "Account ID": "NBL0178529", 
 
     "Reference No": "US0378331005", 
 
     "Security": "APPLE INC" 
 
     }, 
 
     { 
 
     "EventID": "CA00007986778", 
 
     "Account ID": "NBL0178529", 
 
     "Reference No": "US0378331005", 
 
     "Security": "APPLE INC" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "EventName": "INTR CA00007986777/0055555-000/BNP Parib. Mill. 104444-477", 
 
    "col": [ 
 
     { 
 
     "name": "EventID", 
 
     "displayName": "EventID" 
 
     }, 
 
     { 
 
     "name": "Account ID", 
 
     "displayName": "Account ID" 
 
     }, 
 
     { 
 
     "name": "Reference No", 
 
     "displayName": "Reference No" 
 
     }, 
 
     { 
 
     "name": "Security", 
 
     "displayName": "Security" 
 
     }, 
 
     { 
 
     "name": "Event Type", 
 
     "displayName": "Event Type" 
 
     }, 
 
     { 
 
     "name": "Event Category", 
 
     "displayName": "Event Category" 
 
     }, 
 
     { 
 
     "name": "Ex Date", 
 
     "displayName": "Ex Date" 
 
     }, 
 
     { 
 
     "name": "Entitlement Method", 
 
     "displayName": "Entitlement Method" 
 
     }, 
 
     { 
 
     "name": "Amount", 
 
     "displayName": "Amount" 
 
     }, 
 
     { 
 
     "name": "Balance", 
 
     "displayName": "Balance" 
 
     }, 
 
     { 
 
     "name": "Type", 
 
     "displayName": "Type" 
 
     }, 
 
     { 
 
     "name": "Status", 
 
     "displayName": "Status" 
 
     }, 
 
     { 
 
     "name": "Source", 
 
     "displayName": "Source" 
 
     } 
 
    ], 
 
    "record": [ 
 
     { 
 
     "EventID": "CA00007986795", 
 
     "Account ID": "NBL0178529", 
 
     "Reference No": "US0378331005", 
 
     "Security": "APPLE INC", 
 
     "Event Type": "BONU", 
 
     "Event Category": "MAND", 
 
     "Ex Date": "15/10/2017", 
 
     "Entitlement Method": "Calculated", 
 
     "Amount": "10000", 
 
     "Balance": "397.50 USD", 
 
     "Type": "REPE", 
 
     "Status": "Released", 
 
     "Source": "BNP Parib. Mill." 
 
     }, 
 
     { 
 
     "EventID": "CA00007986796", 
 
     "Account ID": "NBL0178529", 
 
     "Reference No": "US0378331005", 
 
     "Security": "APPLE INC", 
 
     "Event Type": "BONU", 
 
     "Event Category": "MAND", 
 
     "Ex Date": "15/10/2017", 
 
     "Entitlement Method": "Calculated", 
 
     "Amount": "10000", 
 
     "Balance": "397.50 USD", 
 
     "Type": "NEWM", 
 
     "Status": "Released", 
 
     "Source": "BNP Parib. Mill." 
 
     } 
 
    ] 
 
    } 
 
]
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<input ng-if="resultSummary" type="button" value="Submit" ng-click="submitEvents()"> 
 
<input ng-if="!resultSummary" type="button" value="Back" ng-click="backToResultSummary()"> 
 
     <accordion close-others="false"> 
 
     <accordion-group is-open="isActive" ng-click="toggleAccord()" ng-repeat="obj in data" ng-if="data['griddata'+$index].data.length>0"> 
 
      <accordion-heading> 
 
      {{EventList[$index].EventName}} 
 
      
 
      </accordion-heading>    
 
     \t \t \t <div ng-if="resultSummary" class="grid" style="width:1570px;background-color:white;" ui-grid-edit ui-grid-move-columns ui-grid="data['griddata'+$index]" 
 
      \t ui-grid-selection> 
 
     \t \t \t </div> 
 
     \t \t \t <div ng-if="!resultSummary" class="grid" style="width:1570px;background-color:white;" ui-grid-edit ui-grid-move-columns ui-grid="data['griddata'+$index]" 
 
      \t > 
 
     \t \t \t </div> 
 
\t \t 
 
     </accordion-group> 
 
    
 
     </accordion>

私は私は、セルを編集する場合columndef cellclassによってセルの色を変更aftereditリスナーを持つ2つのUI grids.In最初のUIグリッドを有します。

グリッド内に少数のセルを編集し、そのセルの色が変わったとします。

変更された色と共に最初のグリッドの行を表示したいと思います。行を表示することができますが、どこで開始するのかわからないので、私は秒のcellclassを変更できません。

注:-imは動的複数UIグリッドを使用しています。 Columndefは、私はあなたが

rowFormatterがスコープに添付する必要がある関数であるべき
cellTemplate: '<div ng-class="{ \'my-css-class\':grid.appScope.rowFormatter(row) }"> ... ' 

で始めることができ、プログラムで

+0

コードの最小動作例(MWE)を投稿して、人々があなたが尋ねていることを明確に理解できるようにしますか? – brannerchinese

答えて

0

それを設定する必要がcolumndef.weでcellclassを書くカント動的given.soされますコントローラ:

$scope.rowFormatter = function(row) { 
    return row.entity.gender === 'male'; 
}; 
関連する問題