ag-grid 学习笔记一：使用ag-grid显示简单数据

最新推荐文章于 2024-05-10 10:00:51 发布

前端菜鸟来报道

最新推荐文章于 2024-05-10 10:00:51 发布

阅读量3.7k

点赞数

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

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

版权

ag-grid 专栏收录该内容

15 篇文章 28 订阅

订阅专栏

我的第一个前端项目就用到了ag-grid。写这篇文章用来记录学习到的东西。

一、导入ag-grid-enterprise.min.js文件的方式。

导入方式有两种：

方式一：使用<script>标签添加。前提是已经将文件放到了此项目相关文件夹中。

<script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script>

方式二：通过链接添加，这个就不需要下载ag-grid-enterprise.min.js到项目文件夹中。需要添加以下两个链接。

<script src="http://www.itxst.com/package/ag-grid/ag-grid-community.js"></script> 
<link href="http://www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet"/>

二、使用方法+样式

1.首先需要在HTML页面中定义一个容器，自己习惯用div。设置div的id、宽度和高度以及ag-grid的显示样式，具体样式有以下5种。

    <!--ag-theme-alpine：是用于设置ag-grid的主题，其主题有多种，其中包括ag-theme-alpine、ag-theme-alpine-dark 、ag-theme-balham、
        ag-theme-balham-dark和ag-theme-material，具体样式看下面图中-->
    <div id="myGrid" style="width: 100%;height: 500px;" class="ag-theme-alpine"></div>

（1）样式：ag-theme-alpine

（2）样式：ag-theme-alpine-dark

(3)样式：ag-theme-balham

(4)样式：ag-theme-balham-dark

(5)样式：ag-theme-material

2.配置表格列名和数据。

（1）定义表格的列

             //定义表格列
            var columnDefs = [
            { headerName: '姓名', field: 'name', 'pinned': 'left' },
            { headerName: '性别', field: 'sex' },
            { headerName: '年龄', field: 'age' },
            { headerName: '籍贯', field: 'jg' },
            { headerName: '省份', field: 'sf' },
            { headerName: '地址', field: 'dz' },
        ];

如图所示：

headerName：是表格的列名。

field：是对应的数据项，通过这个来将数据和列对应起来。

pinned：将此列固定在左边。

还有其他属性，会在下面几篇文章中进行介绍。

（2）定义表格数据。

 //与列对应的数据; 属性名对应上面的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号' }
        ];

data是一个数组对象，里面的name、sex、age等需要与上面列的file字段对应起来。

3.初始化表格设置

        //将列和数据赋给gridOptions 
        var gridOptions = {
            columnDefs: columnDefs,  //设置列名
            rowData: data,  //设置数据
            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);
        });

以下是完整的代码。

<!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>
    <!-- 引入ag-grid有两种方式 -->
    <!-- 方式一：添加ag-grid-enterprise.min.js 文件到项目中 -->
    <script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script>
    <!-- 方式二 -->
    <!-- <script src="http://www.itxst.com/package/ag-grid/ag-grid-community.js"></script> -->
    <!-- <link href="http://www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet"/> -->

</head>

<body>
    <!--ag-theme-alpine：是用于设置ag-grid的主题，其主题有多种，其中包括ag-theme-alpine、ag-theme-alpine-dark 、ag-theme-balham、
        ag-theme-balham-dark和ag-theme-material，具体样式看下面图中-->
    <div id="myGrid" style="width: 100%;height: 500px;" class="ag-theme-material"></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号' },
            { 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,//单元表格是否可编辑
                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>

注：此篇文章从http://www.itxst.com/ag-grid/tutorial.html学习而来。

前端菜鸟来报道

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
ag-grid 学习笔记一：使用ag-grid显示简单数据

我的第一个前端项目就用到了ag-grid。写这篇文章用来记录学习到的东西。一导入ag-grid-enterprise.min.js文件的方式。导入方式有两种：方式一：使用<script>标签添加。前提是已经将文件放到了此项目相关文件夹中。<script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script> 方式二：通过链接添加，这个就不需要...
复制链接

扫一扫