我正在尝试使用Angular 6访问ag-grid上的单个单元格。html看起来像这样:
<ag-grid-angular
style="width: 700px; height: 200px;"
class="ag-theme-balham"
[rowData]="rowData"
[columnDefs]="columnDefs"
rowSelection="single"
colDef.editable=true
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>
打字稿类是:
ngOnInit( ) {
}
onGridReady(params){
this.gridApi = params.api
this.columnApi = params.columnApi
}
updateRow(){
var rowNode = this.gridApi.getRowNode(0);
rowNode.setData(
{ make: 'changed', model: 'changed', price: 10 },
)
}
updateCell(){
var rowNode = this.gridApi.getRowNode(0);
this.gridApi.getRowNode(0)
rowNode.setDataValue("model","mobile")
}
addColumn(){
var rowNode = this.gridApi.getRowNode(0);
var x = parseInt(rowNode.data.price)
var rowNode = this.gridApi.getRowNode(1);
var y = parseInt(rowNode.data.price)
var rowNode = this.gridApi.getRowNode(2);
var z = parseInt(rowNode.data.price)
console.log("price", x ,y, z)
this.total = x+y+z
}
columnDefs = [
// use this for the whole column {headerName: 'Make', field: 'make',cellStyle: { 'border-bottom': '3px double'} },
{headerName: 'Make', field: 'make',cellStyle: {
// you can use either came case or dashes, the grid converts to whats needed
backgroundColor: '#aaffaa' // light green
}},
{headerName: 'Model', field: 'model'},
{headerName: 'Price', field: 'price', editable: true},
{headerName: '', field: '', editable: true}
];
rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000, cellClass: "col-1" },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 }
];
我可以使用cellstyle定位列,但我只想向每个单元格添加边框。 是否有可能像我一样使用以下方法来定位细胞:
var rowNode = this.gridApi.getRowNode(1);
并向rowNode添加样式,或者还有另一种方法可以实现这一点?
答案 0 :(得分:1)
根据documentation,您应该可以通过如下所示传递参数将样式应用于单个单元格,或者可以使用cellClassRules。
columnDefs = [
// use this for the whole column {headerName: 'Make', field: 'make',cellStyle: { 'border-bottom': '3px double'} },
{headerName: 'Make', field: 'make',cellStyle:function(params) {
// you can use either came case or dashes, the grid converts to whats needed
//Style the specific cell with one class and the whole column with another
return (params.colDef===1?'my-class-1':'my-class-2');
}},
{headerName: 'Model', field: 'model'},
{headerName: 'Price', field: 'price', editable: true},
{headerName: '', field: '', editable: true}
];
答案 1 :(得分:1)
我发现如果我使用这个
{headerName: 'Model', field: 'model',cellClass:function(params) {
console.log("params ", params);
console.log("params value", params.value);
console.log("params colDef", params.node.rowIndex);
// you can use either came case or dashes, the grid converts to whats needed
//Style the specific cell with one class and the whole column with another
return (params.node.rowIndex===1?'my-class-1':'my-class-2')}},
,您需要将css放在styles.css中,因为它在组件css文件中不起作用。我可以定位单个单元格。
答案 2 :(得分:0)
如果只想在每个单元格上添加边框,则可以使用简单的CSS解决方案-
.ag-cell {
border: solid 1px blue !important;
}
如果只想为所选单元格添加边框,则可以使用-
.ag-cell-focus {
border: solid 1px blue !important;
}