AngularJS UI网格

Question

 catsUser.controller('MainCtrl', ['$scope', '$http','uiGridConstants','$interval', function ($scope, $http,uiGridConstants,$interval) { $scope.resultSummary=true; $scope.getEventJson=function(){ $http.get('ui/app/components/cpf/user/data/JsonDataForGrid.json').then(function(response){ console.log(response) $scope.EventList=response.data; $scope.CreateGrids(); }) } $scope.getEventJson(); $scope.data = {}; $scope.gridapis=[] $scope.CreateGrids = function() { var count=0; 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){ console.log("ON REGISTER API FOR GRID:"+eventData); var k=eventData.slice(-1); $scope.gridapis[k]=gridApi //Listener to change the color gridApi.edit.on.afterCellEdit($scope,function(rowEntity,colDef,newval,oldval){ colDef.cellClass = function(grid, row, col, rowRenderIndex, colRenderIndex) { if (rowEntity.EventID === row.entity.EventID &&newval !== oldval && row.isSelected==true) { return "changecolor"; } return ""; }; gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN); }) if($scope.resultSummary){ $scope.gridapis[k].grid.modifyRows($scope.data['griddata'+k].data); for(var i=0; i< $scope.selRows[k].length; i++){ if($scope.selRows[k]) gridApi.selection.selectRow(($scope.selRows[k])[i]); } } } }) }; $scope.selRows=[]; $scope.AllRowsData=[] $scope.submitEvents=function(){ $scope.resultSummary=false; angular.forEach($scope.gridapis,function(gridApi,key){ $scope.AllRowsData.push($scope.data['griddata'+key].data) $scope.selRows[key]=gridApi.selection.getSelectedRows(); $scope.data['griddata'+key].enableRowHeaderSelection = false; $scope.gridapis[key].core.notifyDataChange( uiGridConstants.dataChange.OPTIONS); $scope.data['griddata'+key].data=$scope.selRows[key]; }) } $scope.backToResultSummary=function(){ $scope.resultSummary=true; angular.forEach($scope.gridapis,function(gridApi,key){ $scope.data['griddata'+key].data=$scope.AllRowsData[key]; $scope.data['griddata'+key].enableRowHeaderSelection = true; gridApi.core.notifyDataChange( uiGridConstants.dataChange.OPTIONS); }) } $scope.isActive=function(){ return true } $scope.toggleAccord=function(){ if($scope.isActive==true){ $scope.isActive=false } if($scope.isActive==false){ $scope.isActive=true } } }]); //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> <div ng-if="resultSummary" class="grid" style="width:1570px;background-color:white;" ui-grid-edit ui-grid-move-columns ui-grid="data['griddata'+$index]" ui-grid-selection> </div> <div ng-if="!resultSummary" class="grid" style="width:1570px;background-color:white;" ui-grid-edit ui-grid-move-columns ui-grid="data['griddata'+$index]" > </div> </accordion-group> </accordion> 

I have two ui grids.In first Ui grid i have a afteredit listener which changes color of a cell by columndef cellclass if cell is edited.

Suppose i have edited few cells in grid and that cells color changed.

Now i want to display the rows of first grid along with the changed color...Iam able to display the rows but im unable to change cellclass of second because i dont know where to start.

Note:-im using dynamic multiple ui grids. Columndef is dynamically given.so i cant write cellclass in columndef.we have to set it programatically

Answer 1

You can begin with

cellTemplate: '<div ng-class="{ \'my-css-class\':grid.appScope.rowFormatter(row) }"> ... '

where rowFormatter should be a function that has to be attached to scope in the controller:

$scope.rowFormatter = function(row) {
    return row.entity.gender === 'male';
};