ag-grid 学习

项目要将 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 groupingreturn params.columnApi.getRowGroupColumns().length === 0;},headerCheckboxSelection: function (params) {// we put checkbox on the name if we are not doing groupingreturn 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 οnclick="btnClick(1);">click1</button> <button οnclick="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 usevar eGridDiv = document.querySelector('#myGrid');// create the grid passing in the div to use together with the columns & data we want to usenew 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>

效果图：

转载于:https://www.cnblogs.com/guofan/p/8352407.html

ag-grid 学习相关推荐

miniui文件上传 linux,MINIUI grid学习笔记
grid 控件 a.事件的绑定和移除 grid.on("rowclick", fn); //绑定事件 (这个的话类似jquery的绑定事件) grid.un("rowcl ...
ALV GRID学习笔记----Double Click事件
10月底的时候进行了BC412课程的培训,课后自己做了一些实验,从今天开始就将这些实验记录下来,以便于以后需要使用的时候能够查询一下!(很遗憾的是公司组织了很多的培训,但是在实际工作中很少能够运到,所 ...
CSS grid学习（一）
一,兼容性需要兼容IE10以下.ios 10.3 的Safari以下的话,该布局方式不适用. 数据来自:Can I use: https://www.caniuse.com/#search=grid ...
Ag Grid 表格树 Vue Data Grid: Tree Data
目录 Tree Data 模式提供 Tree Data 配置组列 Auto Column Group Custom Column Group 示例:组织层次结构填充组 Tree Data 聚合(合 ...
grid 栅格/网格布局学习笔记
1.前言栅格布局或者说网格布局是很好用的东西,像一些商城类的排版就很适合用栅格布局,但是存在一定的兼容性问题,兼容性暂时还没有研究,这边学习总结是针对grid也就是栅格布局的使用的学习总结,下面将介 ...
ai人工智能编程_从人工智能动态编程：Q学习
ai人工智能编程 A failure is not always a mistake, it may simply be the best one can do under the circumsta ...
神经网络与深度学习笔记汇总五
神经网络与深度学习笔记汇总五往期回顾将之前掘金写的学习笔记所遇困难搬到这里,方便查看复习遇到问题: 报错 (未解决) 学习内容: 1.报错operand should contain 1 col ...
Cube.js 试试这个新的数据分析开源工具
cube.JS 1 cube.JS简介 Cube是无界面商业智能平台.它帮助数据工程师和应用程序开发人员从现代数据存储中访问数据,将其组织为一致的定义,并将其交付给每个应用程序.Cube 旨在与所有支 ...
顶级好用的 5 款 Vue table 表格组件测评与推荐
本文首发:<顶级好用的 5 款 Vue table 表格组件测评与推荐 - 卡拉云> Vue table 表格组件作为绝大多数项目需要内嵌的组件,可谓十分重要.表格看起来虽简单,实则坑很深 ...
分享12款 JavaScript 表格控件（DataGrid）
JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...

ag-grid 学习

ag-grid 学习相关推荐

最新文章

热门文章