셀 색상의 각도 및 ui- 격자 변경

나는 두 개의 열 firstName 및 lastName을 포함하는 UI 그리드가 있습니다. 첫 번째 열 (firstName)에서 배경색을 파란색으로 설정했습니다. lastName 헤더 열을 클릭하면 lastName 열을 파란색으로, firstName 열을 normal로 변경하려고합니다.셀 색상의 각도 및 ui- 격자 변경

Google에서 검색하여 검색했지만 그 예를 찾을 수 없습니다.

어떻게하면됩니까? 여기

여기

var app = angular.module('app', ['ngTouch', 'ui.grid']); 

    app.controller('MainCtrl', [ 
    '$scope','uiGridConstants', function($scope, uiGridConstants) { 

    $scope.gridOptions = { 
     columnDefs: [{ 
     name: 'firstName', 
     field: 'firstName', 
     displayName: 'voornaam', 
     width: 200, 
     cellClass: 'columnClassName' 
     }, { 
     name: 'lastName', 
     field: 'lastName', 
     displayName: 'achternaam', 
     width: 200 
     }], 
     data: [{ 
     "firstName": "Cox", 
     "lastName": "Carney", 
     "company": "Enormo", 
     "employed": true 
     }, { 
     "firstName": "Lorraine", 
     "lastName": "Wise", 
     "company": "Comveyer", 
     "employed": false 
     }, { 
     "firstName": "Nancy", 
     "lastName": "Waters", 
     "company": "Fuelton", 
     "employed": false 
     }] 
    }; 

    $scope.loadData = function() { 
     console.log("clicked"); 
    } 
    } 
]);

내 HTML 내 app.js입니다

<!doctype html> 
<html ng-app="app"> 
    <head> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link rel="stylesheet" type="text/css" href="css/ui-grid.css"> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/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="js/ui-grid.js"></script> 
    <!-- <script src="/release/ui-grid.css"></script> --> 

    <script src="js/app.js"></script> 
    </head> 
    <body> 
    <div ng-controller="MainCtrl as ctrl"> 
     <div id="grid" ui-grid="gridOptions" class="grid"></div> 
    </div> 
    </body> 
</html>

내 CSS를

.grid { 
    width: 500px; 
    height: 250px; 
} 

.red { 
    color: white; background-color: gray !important; 
} 

.my-css-class { 
    color: blue 
} 

.columnClassName[aria-sort="ascending"], .columnClassName[aria-sort="descending"] { 
    background-color: blue !important; 
}

출처

2017-01-25 baliman

나는 ng-table에서 ng-class로 작성했습니다. 코드를 보여줄 수 있습니까? –

클릭하면 당신은 평범한 구식 CSS, 을 사용할 수 있습니다

입니다 헤더가 속성에 추가됩니다. aria-sort = "오름차순"또는 aria-sort = "내림차순"

. sortable[aria-sort="ascending"], . sortable[aria-sort="descending"] { 
    background-color: blue; 
}

출처

2017-01-25 09:18:22

어떻게 columnDefs에 추가합니까? – baliman

코드 스 니펫을 첨부하십시오 –

코드를 추가했습니다. 게시 시작 부분을 참조하십시오. – baliman

셀 색상의 각도 및 ui- 격자 변경

답변

관련 문제