ag-grid 学习笔记五：ag-grid事件（onRowClicked行点击事件、onCellClicked单击单元格事件、onCellDoubleClicked双击单元格事件、全部事件列表）

最新推荐文章于 2024-07-26 18:50:05 发布

菜鸟一只请包涵

最新推荐文章于 2024-07-26 18:50:05 发布

阅读量7.7k

点赞数

分类专栏： ag-grid 文章标签： javascript 前端

本文链接：https://blog.csdn.net/WQearl/article/details/106674215

版权

ag-grid 专栏收录该内容

15 篇文章 29 订阅

订阅专栏

一 onRowClicked行点击事件

此事件发生在点击表格行的时候，事件写在gridOptions下。

 onRowClicked: function (event) {
                //event.data 选中的行内数据，event.event 为鼠标事件，等其他。可以log自己看一下
                console.log('a row was clicked', event);
                var itxst = JSON.stringify(event.data);
                alert(itxst);
            },

上面代码在点击表格某一行以后：

二 onCellClicked单击单元格事件

事件发生在单击单元格的时候发生，事件写在gridOptions下。

 onCellClicked: function(event) {
                //event.data 选中的行内数据，event.event 为鼠标事件，等其他。可以log自己看一下
                console.log('a row was clicked', event);
                  var itxst = JSON.stringify(event.data);
                  alert(itxst);
            },

三 onCellDoubleClicked双击单元格事件

事件发生在双击单元格的时候，同样写在gridOptions下。

 onCellDoubleClicked: function (event) {
                //event.data 选中的行内数据，event.event 为鼠标事件，等其他。可以log自己看一下
                console.log('a row was clicked', event);
                var itxst = JSON.stringify(event.data);
                alert(itxst);
            },

四表格其他事件

请参见ag-gria 原网页。 https://www.ag-grid.com/documentation-main/documentation.php

下面是这篇学习笔记涉及到的整个代码：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ag-grid 事件</title>
    <script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script>

</head>

<body>
    <div id="myGrid" style="width: 100%;height: 500px;" class="ag-theme-alpine"></div>

    <script>
        //定义表格列
        var columnDefs = [
            { headerName: '姓名', field: 'name', 'pinned': 'left' },
            { headerName: '性别', field: 'sex' },
            { 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号' }
        ];

        //将列和数据赋给gridOptions 
        var gridOptions = {
            columnDefs: columnDefs,  //设置列名
            rowData: data,  //设置数据
            /********************************行点击事件*********************************/
            // onRowClicked: function (event) {
            //     //event.data 选中的行内数据，event.event 为鼠标事件，等其他。可以log自己看一下
            //     console.log('a row was clicked', event);
            //     var itxst = JSON.stringify(event.data);
            //     alert(itxst);
            // },

            /***********************单元格单击事件**************************************/
            // onCellClicked: function (event) {
            //     //event.data 选中的行内数据，event.event 为鼠标事件，等其他。可以log自己看一下
            //     console.log('a row was clicked', event);
            //     var itxst = JSON.stringify(event.data);
            //     alert(itxst);
            // },

            /*************************************单元格双击事件**************************************/
            onCellDoubleClicked: function (event) {
                //event.data 选中的行内数据，event.event 为鼠标事件，等其他。可以log自己看一下
                console.log('a row was clicked', event);
                var itxst = JSON.stringify(event.data);
                alert(itxst);
            },

            onGridReady: function () {
                //表格创建完成后执行的事件
                gridOptions.api.sizeColumnsToFit();//调整表格大小自适应
            },
            defaultColDef: {
                editable: true,//单元表格是否可编辑
                enableRowGroup: true,
                enablePivot: true,
                enableValue: true,
                sortable: true, //开启排序
                resizable: true,//是否可以调整列大小，就是拖动改变列大小
                filter: true  //开启刷选
            },
            pagination: true,  //开启分页（前端分页）
            paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）
        };

        //在dom加载完成后 初始化agGrid完成
        document.addEventListener("DOMContentLoaded", function () {
            var eGridDiv = document.querySelector('#myGrid');  //myGrid 是容器div的ID
            new agGrid.Grid(eGridDiv, gridOptions);
        });
    </script>
</body>

</html>

注：

本篇学习笔记还是从ag-grid 中文教程学习而来。对于我这种英文不过关的来说，aggrid官网，实在是无法下口，幸好看到ag-grid中文教程网，表示非常有用。在此表示非常感谢。