建设网站的建筑公司,专业网站建设电话,小松建设官方网站,一个网站做多少内链合适网格中的每一列都使用列定义(ColDef)来定义。列根据在网格选项中指定的列定义的顺序在网格中定位。 列定义 下面的例子展示了一个定义了3列的简单网格:
templateag-grid-vuestyleheight: 300px; width: 1000pxclassag-theme-balham:colum… 网格中的每一列都使用列定义(ColDef)来定义。列根据在网格选项中指定的列定义的顺序在网格中定位。 列定义 下面的例子展示了一个定义了3列的简单网格:
templateag-grid-vuestyleheight: 300px; width: 1000pxclassag-theme-balham:columnDefscolumnDefs:rowDatarowDatagrid-readyonGridReady/ag-grid-vue
/templatescript
import { AgGridVue } from ag-grid-vue;
export default {name: AgTable,components: {AgGridVue,},data() {return {gridApi: null,columnDefs: [{ field: athlete }, { field: sport }, { field: age }],rowData: [{ athlete: athlete-01, sport: sport-01, age: age-01 },{ athlete: athlete-02, sport: sport-02, age: age-02 },],};},methods: {onGridReady(params) {this.gridApi params.api;this.gridApi.sizeColumnsToFit();},},
};
/script列头分组
如果你想对列进行分组你可以像这样将它们作为子列包含: columnDefs: [{headerName: Group A,children: [{ field: athlete },{ field: sport },{ field: age },]}]
效果 访问行数据值 colDef。字段属性用于访问行数据对象中的值。在大多数情况下字段将是来自行数据对象的属性名。但是如果行数据包含嵌套对象则可以使用点表示法引用深层属性值。 例如如果行数据有一个对象属性奖牌其中包含个人奖牌数那么要显示获得的金牌请使用字段值medal .gold。 使用规则
ag-grid-vue:rowDatarowData:columnDefscolumnDefs
/ag-grid-vuethis.rowData [{athlete: Michael Phelps,medals: {gold: 8, silver: 1, bronze: 0}}
];
this.columnDefs [{ field: athlete },// Using dot notation to access nested property{ field: medals.gold, headerName: Gold },
]; 示例
templateag-grid-vuestyleheight: 200px; width: 1000pxclassag-theme-balham:columnDefscolumnDefs:rowDatarowDatagrid-readyonGridReady/ag-grid-vue
/templatescript
import { AgGridVue } from ag-grid-vue;
export default {name: AgTable,components: {AgGridVue,},data() {return {gridApi: null,columnDefs: [{ field: name },{ field: medals.gold, headerName: Gold },{ field: person.age },],rowData: [{name: Michael Phelps,person: {age: 23,country: United States,},medals: {gold: 8,silver: 0,bronze: 0,},},{name: Michael Phelps,person: {age: 19,country: United States,},medals: {gold: 6,silver: 0,bronze: 2,},},{name: Michael Phelps,person: {age: 27,country: United States,},medals: {gold: 4,silver: 2,bronze: 0,},},],};},methods: {onGridReady(params) {this.gridApi params.api;this.gridApi.sizeColumnsToFit();},},
};
/script效果
自定义列类型 除了上述特性之外网格还提供了其他方法来帮助简化和避免重复的列定义。这是通过以下方式完成的: defaultColDef:包含所有列将继承的属性。defaultColGroupDef:包含所有列组将继承的属性。columnTypes:包含列定义可以继承的属性的特定列类型。 默认列和列类型可以指定列上可用的任何列属性。 注意列类型被设计为仅对列工作即它们不会应用于列组。 下面的代码片段演示了这三个属性: ag-grid-vue:columnDefscolumnDefs:defaultColDefdefaultColDef:defaultColGroupDefdefaultColGroupDef:columnTypescolumnTypes/* other grid options ... */
/ag-grid-vuethis.columnDefs [// uses the default column properties{ headerName: Col A, field: a},// overrides the default with a number filter{ headerName: Col B, field: b, filter: agNumberColumnFilter },// overrides the default using a column type{ headerName: Col C, field: c, type: nonEditableColumn },// overrides the default using a multiple column types{ headerName: Col D, field: d, type: [dateColumn, nonEditableColumn] }
];// a default column definition with properties that get applied to every column
this.defaultColDef {// set every column widthwidth: 100,// make every column editableeditable: true,// make every column use text filter by defaultfilter: agTextColumnFilter,
};// a default column group definition with properties that get applied to every column group
this.defaultColGroupDef {marryChildren: true,
};// define a column type (you can define as many as you like)
this.columnTypes {nonEditableColumn: { editable: false },dateColumn: {filter: agDateColumnFilter,filterParams: { comparator: myDateComparator },suppressMenu: true}
};
当网格创建列时它从默认列定义开始然后添加在启用Cell Data Type上定义的属性然后添加通过列类型定义的属性最后添加来自特定列定义的属性。
在每个阶段如果已经存在列属性则后者将覆盖现有值。例如如果defaultColDef设置为edit: true但columnType设置为edit: false则该列将不可编辑。
例如下面是创建上面所示的“Col C”时使用的步骤大纲:
// Step 1: the grid starts with an empty definition
{}// Step 2: default column properties are merged in
{ width: 100, editable: true, filter: agTextColumnFilter }// Step 3: column type properties are merged in (using the type property), overriding where necessary
{ width: 100, editable: false, filter: agTextColumnFilter }// Step 4: finally column definition properties are merged in, overriding where necessary
{ headerName: Col C, field: c, width: 100, editable: false, filter: agTextColumnFilter } 下面的示例演示了不同的配置属性
1. 普通设置不设置默认值
templateag-grid-vuestylewidth: 100%; height: 100%classag-theme-alpine:columnDefscolumnDefsgrid-readyonGridReady:rowDatarowData/ag-grid-vue
/templatescript
import { AgGridVue } from ag-grid-vue;export default {name: AgTable,components: {AgGridVue,},data() {return {gridApi: null,columnDefs: [{ field: athlete },{ field: sport },{ field: age, type: numberColumn },{ field: year, type: numberColumn },{field: date,type: [dateColumn, nonEditableColumn],width: 220,},{headerName: Medals,groupId: medalsGroup,children: [{ headerName: Gold, field: gold, type: medalColumn },{ headerName: Silver, field: silver, type: medalColumn },{ headerName: Bronze, field: bronze, type: medalColumn },{headerName: Total,field: total,type: medalColumn,// 该列是可折叠的columnGroupShow: closed,},],},],gridApi: null,columnApi: null,defaultColDef: {// 设置默认列宽度width: 150,// 使每个列都可编辑editable: true,// 让每个列默认使用text过滤器filter: agTextColumnFilter,// 默认情况下启用浮动过滤器floatingFilter: true,// 调整列的大小resizable: true,// 禁用单元格数据类型cellDataType: false,},defaultColGroupDef: null,columnTypes: null,rowData: null,};},methods: {onGridReady(params) {this.gridApi params.api;// this.gridApi.sizeColumnsToFit();this.gridColumnApi params.columnApi;const updateData (data) params.api.setRowData(data);fetch(https://www.ag-grid.com/example-assets/olympic-winners.json).then((resp) resp.json()).then((data) updateData(data));},},created() {this.defaultColGroupDef {marryChildren: true,};this.columnTypes {numberColumn: { width: 130, filter: agNumberColumnFilter },medalColumn: { width: 100, columnGroupShow: open, filter: false },nonEditableColumn: { editable: false },dateColumn: {// specify we want to use the date filterfilter: agDateColumnFilter,// add extra parameters for the date filterfilterParams: {// provide comparator functioncomparator: (filterLocalDateAtMidnight, cellValue) {// In the example application, dates are stored as dd/mm/yyyy// We create a Date object for comparison against the filter dateconst dateParts cellValue.split(/);const day Number(dateParts[0]);const month Number(dateParts[1]) - 1;const year Number(dateParts[2]);const cellDate new Date(year, month, day);// Now that both parameters are Date objects, we can compareif (cellDate filterLocalDateAtMidnight) {return -1;} else if (cellDate filterLocalDateAtMidnight) {return 1;} else {return 0;}},},},};},
};
/script效果 2. 添加默认设置 defaultColDef
templateag-grid-vuestylewidth: 100%; height: 100%classag-theme-alpine:columnDefscolumnDefsgrid-readyonGridReady:defaultColDefdefaultColDef:rowDatarowData/ag-grid-vue
/template
defaultColDef: {// 设置默认列宽度width: 150,// 使每个列都可编辑editable: true,// 让每个列默认使用text过滤器filter: agTextColumnFilter,// 默认情况下启用浮动过滤器floatingFilter: true,// 调整列的大小resizable: true,// 禁用单元格数据类型cellDataType: false,}, 效果 3. defaultColGroupDef Marry Children 有时您希望组的列始终粘在一起。要实现这一点请设置列组属性marryChildrentrue。下面的例子演示了以下内容: Medals有marryChildrentrue。 如果在这些组中移动列则无法将列移出组。例如如果你拖拽Gold就不可能把它拖出Medals组。 如果移动非组列例如Silver则不可能将其放置在组的中间因此不可能将组分开。 举例
1. 没有设置defaultColGroupDef 初始状态 拖动列“Silver”后 2. 设置defaultColGroupDef
templateag-grid-vuestylewidth: 100%; height: 100%classag-theme-alpine:columnDefscolumnDefsgrid-readyonGridReady:defaultColDefdefaultColDef:defaultColGroupDefdefaultColGroupDef:rowDatarowData/ag-grid-vue
/templatecreated() {this.defaultColGroupDef {marryChildren: true,};
} 初始状态 拖动列“Silver”后 4. columnTypes
templateag-grid-vuestylewidth: 100%; height: 100%classag-theme-alpine:columnDefscolumnDefsgrid-readyonGridReady:defaultColDefdefaultColDef:defaultColGroupDefdefaultColGroupDef:columnTypescolumnTypes:rowDatarowData/ag-grid-vue
/templatecreated() {this.columnTypes {numberColumn: { width: 130, filter: agNumberColumnFilter },medalColumn: { width: 100, columnGroupShow: open, filter: false },nonEditableColumn: { editable: false },dateColumn: {// specify we want to use the date filterfilter: agDateColumnFilter,// add extra parameters for the date filterfilterParams: {// provide comparator functioncomparator: (filterLocalDateAtMidnight, cellValue) {// In the example application, dates are stored as dd/mm/yyyy// We create a Date object for comparison against the filter dateconst dateParts cellValue.split(/);const day Number(dateParts[0]);const month Number(dateParts[1]) - 1;const year Number(dateParts[2]);const cellDate new Date(year, month, day);// Now that both parameters are Date objects, we can compareif (cellDate filterLocalDateAtMidnight) {return -1;} else if (cellDate filterLocalDateAtMidnight) {return 1;} else {return 0;}},},},};}, 示例 右对齐和数字列 网格为向右对齐列提供了方便的快捷方式。将列定义类型设置为rightalaligned将列标头和内容向右对齐这使得用户更容易扫描数据。 注意
因为右对齐用于数字所以我们还提供了一个别名numericColumn可用于将标题和单元格文本向右对齐。
使用规则
ag-grid-vue:columnDefscolumnDefs
/ag-grid-vuethis.columnDefs [{ headerName: Column A, field: a },{ headerName: Column B, field: b, type: rightAligned },{ headerName: Column C, field: c, type: numericColumn },
]; 右对齐列类型通过设置标题和单元格类属性来工作如下所示。如果您手动设置headerClass或cellClass那么您可能需要自己包含右对齐的CSS类因为列类型属性被显式定义的列属性覆盖。
rightAligned: {headerClass: ag-right-aligned-header,cellClass: ag-right-aligned-cell
}