1
각도 프로젝트에서 ng-grid (UI-grid)를 사용하고 있습니다. 내 클라이언트가 모형 테이블로 표 형태의 그리드를 제공했습니다. 이제 클라이언트 디자인에 따라 UI 그리드를 디자인하고 싶습니다.각도 그리드에 사용자 정의 스타일 적용
제게 어떻게 이것을 할 수 있는지 제안 해주십시오.
각도 프로젝트에서 ng-grid (UI-grid)를 사용하고 있습니다. 내 클라이언트가 모형 테이블로 표 형태의 그리드를 제공했습니다. 이제 클라이언트 디자인에 따라 UI 그리드를 디자인하고 싶습니다.각도 그리드에 사용자 정의 스타일 적용
제게 어떻게 이것을 할 수 있는지 제안 해주십시오.
다음은 ng-grid에 이미지를 추가하는 방법의 예입니다. 당신은 cellTemplate을 사용할 수 있고, 이것의 내용은
// main.js
var에 응용 = angular.module ('을 myApp', [ 'ngGrid']) ...뿐만 아니라 별도 * .html 파일로 저장할 수 있습니다;
app.controller ('MyCtrl'기능 ($ 범위, $ HTTP) {
$http.post('/MyPage/index.json?details=full').success(function (data) {
$scope.carData = data;
});
$scope.updatecar =function(row){
$http.post('/MyPage/index.json?details=&carID='+row.getProperty('carID')+'&enable='+row.getProperty('link')).success(function (data) {
$scope.carData = data;
});
};
$scope.gridOptions = {
data: 'carData',
columnDefs: [{field: 'carName', displayName: 'car Name'},
{field: 'carTemperature', displayName: 'Temperature'
, cellTemplate:
'<div ng-class="ngCellText">' +
'{{row.getProperty(col.field)}} <img ng-src="{{row.getProperty(\'imageName\')}}" alt=""/>'+
' <a href ="" ng-click="updatecar(row)">' +
'{{row.getProperty(\'linkText\')}} </a>' +
'</div>'
}
]
};
});
CSS를 사용하십시오! 정말로, 그게 당신의 모든 질문입니까? 적어도 질문에 스크린 샷과 같은 것을 포함하면 도움이 될 것이라고 생각하지 않습니까? – mainguy
클라이언트가 ui.grid에 적용하려고하는 디자인입니다. 스크린 샷 링크 : https://www.dropbox.com/s/x44jb7nvww8t1yq/Screen%20Shot%201936-07-12%20at%206.47.57%20pm.png?dl=0 – user2042077