ag-grid 学习

全栈程序员站长

发布于 2022-09-20 14:05:22

2.7K0

发布于 2022-09-20 14:05:22

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

项目要将 angular 从 1.5升级到 5，ui-grid 在 5 中并不支持，所以为了替换 ui-grid ，来学习了 ag-grid 。

简单来说，2 者相差并不大，使用方式也大致雷同，这里用 js 直观的记录一下：

<html> <head> <!-- reference the ag-Grid library--> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/10.1.0/ag-grid.js"></script>--> <script src="ag-grid.js"></script> <style> .orange { color: orange; } </style> </head> <body> <h1>Simple ag-Grid Example</h1> <!-- the div ag-Grid will use to render it's data --> <div id="myGrid" style="height: 200px;width:700px" class="ag-fresh"></div> <p> <button type='button' onclick="deselectAllFnc()">clear selection</button> <button type='button' onclick="selectAllFnc()">select all</button> </p> <script> // row data ，行内数据 var rowData = [ {name: "Toyota", model: "Celica", price: 35000,operation: 'a', folder: true, children: [{name:'3x', model:'sss', price:37000}]}, {name: "Ford", model: "Mondeo", price: 32000,folder: true, open: true, children: [{name:'test', model:'test', price:100}]}, {name: "Porsche", model: "Boxter", price: 72000} ] // column definitions，表格列属性 var columnDefs = [ { headerName: 'Name', field: 'name', width: 200, enableRowGroup: true, checkboxSelection: function (params) { // we put checkbox on the name if we are not doing grouping return params.columnApi.getRowGroupColumns().length === 0; }, headerCheckboxSelection: function (params) { // we put checkbox on the name if we are not doing grouping return params.columnApi.getRowGroupColumns().length === 0; }, headerCheckboxSelectionFilteredOnly: true, cellRenderer: 'group', cellRendererParams: { innerRenderer: function (params) { return params.data.name; }, suppressCount: true } }, {headerName: "Model", field: "model"}, {headerName: "Price", field: "price"}, {headerName: "Operation", field: "operation", cellRenderer: function(params) { return '<button onclick="btnClick(1);">click1</button> <button onclick="btnClick(2);">click2</button>'}} ] // Grid Definition  // let the grid know which columns and what data to use // 表格初始化配置 var gridOptions = { // PROPERTIES - object properties, myRowData and myColDefs are created somewhere in your application //列标题设置  columnDefs: columnDefs, //行内数据插入  rowData: rowData, animateRows: true, // PROPERTIES - simple boolean / string / number properties  //是否支持列宽调整  enableColResize: true, //行高设置  rowHeight: 26, //单行选中，"multiple" 多选（ctrl）,"single" 单选  rowSelection: 'multiple', // enable sorting ，是否支持排序  enableSorting: true, // enable filtering ，是否可以筛选  enableFilter: true, //默认筛选字段 //quickFilterText: 's', //选中组可选中组下子节点 //groupSelectsChildren: true, //true的话，点击行内不会进行行选择  suppressRowClickSelection: true, //阻止列拖拽移动 //suppressMovableColumns: true, //阻止列拖拽出表格，列移除  suppressDragLeaveHidesColumns: true, //给整行加样式，  getRowClass: function(params) { return (params.data.name === 'Ford') ? "orange" : null; }, // EVENTS - add event callback handlers  onModelUpdated: function(event) { console.log('model updated'); }, //行内点击触发事件  onRowClicked: function(event) { //event.data 选中的行内数据，event.event 为鼠标事件，等其他。可以log自己看一下  console.log('a row was clicked', event); }, //列宽度改变触发  onColumnResized: function(event) { console.log('a column was resized'); }, //表格加载完成触发  onGridReady: function(event) { console.log('the grid is now ready'); }, //单元格点击触发  onCellClicked: function(event) { console.log('a cell was cilcked'); }, //单元格双击触发  onCellDoubleClicked: function(event) { console.log('a cell was dbcilcked'); }, onCellContextMenu: function(event) { }, onCellValueChanged: function(event) { }, onCellFocused: function(event) { }, onRowSelected: function(event) { }, onSelectionChanged: function(event) { }, onBeforeFilterChanged: function(event) { }, onAfterFilterChanged: function(event) { }, onFilterModified: function(event) { }, onBeforeSortChanged: function(event) { }, onAfterSortChanged: function(event) { }, onVirtualRowRemoved: function(event) { }, // CALLBACKS  isScrollLag: function() { return false; }, getNodeChildDetails: function(file) { if (file.folder) { return { group: true, children: file.children, expanded: file.open }; } else { return null; } } } //取消选中状态 function deselectAllFnc() { gridOptions.api.deselectAll(); } //全选 function selectAllFnc() { gridOptions.api.selectAll(); } function btnClick(value) { console.log(value); } // wait for the document to be loaded, otherwise, // ag-Grid will not find the div in the document.  document.addEventListener("DOMContentLoaded", function() { // lookup the container we want the Grid to use var eGridDiv = document.querySelector('#myGrid'); // create the grid passing in the div to use together with the columns & data we want to use new agGrid.Grid(eGridDiv, gridOptions); // create handler function，增加监听事件 function myRowClickedHandler(event) { console.log('the row was clicked'); } // add the handler function  gridOptions.api.addEventListener('rowClicked', myRowClickedHandler); }); </script> </body> </html>

效果图：