ag |
您所在的位置:网站首页 › aggridvue中文文档 › ag |
目录 一 多表头 二 固定列 三 拖动改变列的宽度和位置 四 数据筛选器 五 编辑表格 六 所有代码 一 多表头1.合并两层表头 合并表头,在第一层表头下加children子项即可。例如: //定义表格列 var columnDefs = [ { headerName: '分组A', children: [ { headerName: '姓名', field: 'name', 'pinned': 'left' }, { headerName: '性别', field: 'sex' }, ] }, { headerName: '分组B', children: [{ headerName: '年龄', field: 'age' }, { headerName: '籍贯', field: 'jg' }, { headerName: '省份', field: 'sf' }, { headerName: '地址', field: 'dz' } ] } ];效果图如下: 可是你会发现,分组A并没有对表头进行合并。原因是:姓名列被固定到了左边,所以在合并的时候,必须将性别那列也设置为固定,才能将姓名和性别合并列。具体代码如下: var columnDefs = [ { headerName: '分组A', children: [ { headerName: '姓名', field: 'name', 'pinned': 'left' }, //同合并列的数据,是否固定属性必须要一致 { headerName: '性别', field: 'sex' ,'pinned': 'left'}, ] }, { headerName: '分组B', children: [{ headerName: '年龄', field: 'age' }, { headerName: '籍贯', field: 'jg' }, { headerName: '省份', field: 'sf' }, { headerName: '地址', field: 'dz' } ] } ];具体效果如下: 2.合并三层表头 三层列合并,若是最上层是一列时,设置固定列会导致三层合并失效。比如以下代码: var columnDefs = [ { headerName: '最顶层分组' , children: [ { headerName: '分组A', children: [ { headerName: '姓名', field: 'name' ,'pinned': 'left'}, { headerName: '性别', field: 'sex','pinned': 'left' } ] }, { headerName: '分组B', children: [ { headerName: '年龄', field: 'age' }, { headerName: '籍贯', field: 'jg' }, { headerName: '省份', field: 'sf' }, { headerName: '地址', field: 'dz' } ] }] } ];上述代码结果为: 所以,当表头最终合并为只有一列时,不要设置固定列(pinned) 以下为正确代码以及效果图: var columnDefs = [ { headerName: '最顶层分组' , children: [ { headerName: '分组A', children: [ { headerName: '姓名', field: 'name' }, { headerName: '性别', field: 'sex'} ] }, { headerName: '分组B', children: [ { headerName: '年龄', field: 'age' }, { headerName: '籍贯', field: 'jg' }, { headerName: '省份', field: 'sf' }, { headerName: '地址', field: 'dz' } ] }] } ]; 设置文字居中: .ag-header-cell-label { justify-content: center; } 二 固定列固定列使用pinned属性设置。 1.固定在右边 //定义表格列 var columnDefs = [ { headerName: '姓名', field: 'name','pinned': 'right' } ];2.固定在左边 var columnDefs = [ { headerName: '姓名', field: 'name','pinned': 'left' } ]; 三 拖动改变列的宽度和位置defaultColDef: { resizable: true,//是否开启调整列大小,就是拖动改变列大小 } defaultColDef: { lockPosition: false //禁止拖动列的位置 } 四 数据筛选器 数据筛选器有两种,一种是自己设置筛选列,筛选条件;一种是默认筛选器。 1.设置筛选列。 数据筛选器有三种类型,分别是数字类型、字符串类型和时间类型。 类型功能agNumberColumnFilter数字类型过滤器,提供大于、小于、等于、不等于、区间数字比较agTextColumnFilter字符串类型筛选器,提供包含、不包含、等于、开始等于、结束等于比较agDateColumnFilter时间类型筛选器,提供大于、小于、等于、不等于、区间数字比较
设置是否开启筛选: defaultColDef: { filter: true //所有列开启刷选器 },具体用法如下: 在定义表格列的时候,就需要设置刷选器,将需要筛选的列设置好。 var columnDefs = [ { headerName: '最顶层分组' , children: [ { headerName: '分组A', children: [ //设置字符串筛选方式,设定姓名这一列可以筛选 { headerName: '姓名', field: 'name' ,filter: 'agTextColumnFilter'}, { headerName: '性别', field: 'sex' } ] }, { headerName: '分组B', children: [ { headerName: '年龄', field: 'age' }, { headerName: '籍贯', field: 'jg' }, { headerName: '省份', field: 'sf' }, { headerName: '地址', field: 'dz' } ] }] } ];实现效果如下: 注:如果只开启这一列的筛选,则上面的 filter属性需要设置为false,如果需要全部开启,则设置为true。但是其他列没有在列定义时设置筛选模式,则会显示表格默认的筛选方式。如下图: 2.第二种是表格默认的筛选器,不用专门在定义列的时候设置筛选类型。就只是设置属性filter为true即可。筛选模式默认显示,就如上图所示。 3.表格中直接显示筛选器。 一般情况下,筛选器是没有直接显示出来的,都是点击列头,在列头中进行筛选,另一种情况是将筛选器直接显示出来。那就设置floatingFilter属性为true即可。如下示例: var gridOptions = { columnDefs: columnDefs, rowData: data, onGridReady: function () { gridOptions.api.sizeColumnsToFit(); }, defaultColDef: { editable: true, lockPosition:true, enableRowGroup: true, enablePivot: true, enableValue: true, sortable: true, resizable: true, filter: false }, pagination: true, paginationAutoPageSize: true, floatingFilter:true //设置是否直接显示过滤器 };具体效果如图所示: 注意:如果需要将过滤器直接显示出来,就必须在列定义的时候设置列过滤(filter: 'agTextColumnFilter'),不能使用表格默认的过滤方式。否则并无过滤功能,效果如下图显示: 表格默认是不可编辑的,编辑表格分成编辑行和编辑单元格。
1.单元格编辑。 设置单元格可编辑需要设置属性editable。为true的时候可以编辑,为false的时候不可以编辑。编辑完成后可以触发onCellEditingStopped事件,可以针对修改做一些其他操作。 var gridOptions = { columnDefs: columnDefs, //设置列名 rowData: data, //设置数据 onGridReady: function () { //表格创建完成后执行的事件 gridOptions.api.sizeColumnsToFit();//调整表格大小自适应 }, defaultColDef: { editable: true,//单元表格是否可编辑 lockPosition: true, enableRowGroup: true, enablePivot: true, enableValue: true, sortable: true, //开启排序 resizable: true,//是否可以调整列大小,就是拖动改变列大小 filter: true //开启刷选 }, pagination: true, //开启分页(前端分页) paginationAutoPageSize: true, //根据网页高度自动分页(前端分页) floatingFilter: true, //是否显示筛选器 //单元格编辑完成事件************************** onCellEditingStopped: function (event) { var itxst = JSON.stringify(event.data); alert(itxst); //编辑完成后弹出数据 }, };具体效果如果图所示,将王五改成小五: 2.行编辑。 表格不仅可以只编辑一个单元格,还可以编辑一整行。这个不仅需要先设置单元格可编辑(editable:true),还要设置属性: editType: "fullRow"。编辑一行也有行编辑完成事件。具体如以下代码: var gridOptions = { columnDefs: columnDefs, //设置列名 rowData: data, //设置数据 onGridReady: function () { //表格创建完成后执行的事件 gridOptions.api.sizeColumnsToFit();//调整表格大小自适应 }, defaultColDef: { editable: true,//单元表格是否可编辑(不管是只编辑一个单元格或者需要编辑一行,这个属性都需要设置为true) lockPosition: true, enableRowGroup: true, enablePivot: true, enableValue: true, sortable: true, //开启排序 resizable: true,//是否可以调整列大小,就是拖动改变列大小 filter: true //开启刷选 }, pagination: true, //开启分页(前端分页) paginationAutoPageSize: true, //根据网页高度自动分页(前端分页) floatingFilter: true, //是否显示筛选器 editType: "fullRow", //开启行编辑 //行编辑完成事件 onRowEditingStopped: function (event) { var itxst = JSON.stringify(event.data); alert(itxst); }, //单元格编辑完成事件************************** // onCellEditingStopped: function (event) { // var itxst = JSON.stringify(event.data); // alert(itxst); //编辑完成后弹出数据 // }, }; 效果如下图: ag-grid入门示例 .ag-header-cell-label { justify-content: center; } //定义表格列 两层合并列 // var columnDefs = [ // { // headerName: '分组A', // children: [ // { headerName: '姓名', field: 'name', 'pinned': 'left' }, //同合并列的数据,是否固定属性必须要一致 // { headerName: '性别', field: 'sex' ,'pinned': 'left'}, // ] // }, // { // headerName: '分组B', // children: [{ headerName: '年龄', field: 'age' }, // { headerName: '籍贯', field: 'jg' }, // { headerName: '省份', field: 'sf' }, // { headerName: '地址', field: 'dz' } // ] // } // ]; //三层列合并(若是最上层是一列时,设置固定列会导致三层合并失效) var columnDefs = [ { headerName: '最顶层分组' , children: [ { headerName: '分组A', children: [ { headerName: '姓名', field: 'name', filter: 'agTextColumnFilter' }, //设置姓名这一列可以筛选 { headerName: '性别', field: 'sex' } ] }, { headerName: '分组B', children: [ { headerName: '年龄', field: 'age' }, { headerName: '籍贯', field: 'jg' }, { headerName: '省份', field: 'sf' }, { headerName: '地址', field: 'dz' } ] }] } ]; //与列对应的数据; 属性名对应上面的field var data = [ { name: '张三', sex: '男', age: '100', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路1号' }, { name: '李四', sex: '女', age: '5', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }, { name: '王五', sex: '女', age: '20', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路31号' }, { name: '王五', sex: '女', age: '26', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路111号' }, { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }, { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }, { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }, { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }, { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }, { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }, { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }, { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }, { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }, { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }, { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' } ]; //将列和数据赋给gridOptions var gridOptions = { columnDefs: columnDefs, //设置列名 rowData: data, //设置数据 onGridReady: function () { //表格创建完成后执行的事件 gridOptions.api.sizeColumnsToFit();//调整表格大小自适应 }, defaultColDef: { editable: true,//单元表格是否可编辑(不管是只编辑一个单元格或者需要编辑一行,这个属性都需要设置为true) lockPosition: true, enableRowGroup: true, enablePivot: true, enableValue: true, sortable: true, //开启排序 resizable: true,//是否可以调整列大小,就是拖动改变列大小 filter: true //开启刷选 }, pagination: true, //开启分页(前端分页) paginationAutoPageSize: true, //根据网页高度自动分页(前端分页) floatingFilter: true, //是否显示筛选器 editType: "fullRow", //开启行编辑 //行编辑完成事件 onRowEditingStopped: function (event) { var itxst = JSON.stringify(event.data); alert(itxst); }, //单元格编辑完成事件************************** // onCellEditingStopped: function (event) { // var itxst = JSON.stringify(event.data); // alert(itxst); //编辑完成后弹出数据 // }, }; //在dom加载完成后 初始化agGrid完成 document.addEventListener("DOMContentLoaded", function () { var eGridDiv = document.querySelector('#myGrid'); //myGrid 是容器div的ID new agGrid.Grid(eGridDiv, gridOptions); }); 此篇自学笔记从ag-grid中文教程 ag-grid 中文教程学习而来。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |