ag-grid 设置行高

最新推荐文章于 2024-03-13 18:05:01 发布
最新推荐文章于 2024-03-13 18:05:01 发布
阅读量3.1k 收藏 4
点赞数 3
分类专栏： ag-grid 文章标签： ag-grid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WQearl/article/details/120273977
版权

ag-gird 表格原生行高实在太宽,现在需要将行高缩小一点.以下将对表格的两种情况进行设置:

1.普通表格数据展示(无分组情况)

   效果如图所示:

设置步骤:

        (1) .rowHeight:设置数据行行高;headerHeight设置表格表头行高,

 rowHeight: 28, // 设置表格行高
 headerHeight: 30, // 设置表格表头的行高

        (2).在defaultColDef中设置cellStyle.的line-height.

            defaultColDef: {
                sortable: true,
                resizable: true,
                cellStyle: {
                    'line-height': '28px',   // 行高设置同步：跟rowHeight属性设置值一致
                },
            },

      注意: rowHeight的值要与ine-height一致.

       如果不设置line-height值的话,表格中的数据会错位显示.如图所示:

 以下为整个页面代码:

<!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>
    <div id="myGrid" style="width: 100%;height: 1000px;" class="ag-theme-alpine"></div>

    <script>
        //定义表格列
        var columnDefs = [
            {
                headerName: '班级',
                field: 'class',
 
            },
            {
                headerName: '姓名',
                field: 'name'
            },
            {
                headerName: '性别',
                field: 'sex'
            },
            {
                headerName: '年龄',
                field: 'age'
            },
            {
                headerName: '省份',
                field: 'sf'
            },

        ];


        var data = [
            { class: '一班', name: '张三', sex: '男', age: '100', 'sf': '浙江' },
            { class: '一班', name: '李四', sex: '女', age: '5', 'sf': '四川' },
            { class: '一班', name: '王五', sex: '女', age: '20', 'sf': '河南' },
            { class: '一班', name: '小李', sex: '女', age: '26', 'sf': '江苏' },
            { class: '二班', name: '小丽', sex: '男', age: '35', 'sf': '湖南' },
            { class: '二班', name: '张云', sex: '男', age: '100', 'sf': '吉林' },
            { class: '二班', name: '吴强', sex: '女', age: '5', 'sf': '浙江' },
            { class: '二班', name: '陈丽', sex: '女', age: '20', 'sf': '内蒙古' },
            { class: '二班', name: '谭笑', sex: '女', age: '26', 'sf': '江苏' },
            { class: '二班', name: '欧阳', sex: '男', age: '35', 'sf': '福建' },
            { class: '二班', name: '李冠', sex: '男', age: '100', 'sf': '宁夏' },
            { class: '二班', name: '张物', sex: '女', age: '5', 'sf': '新疆' },
            { class: '三班', name: '郭翰', sex: '女', age: '20', 'sf': '西藏' },
            { class: '三班', name: '何树', sex: '女', age: '26', 'sf': '广西' },
            { class: '三班', name: '田武', sex: '男', age: '35', 'sf': '海南' },
            { class: '三班', name: '孔紫', sex: '男', age: '35', 'sf': '山东' }
        ];

        //将列和数据赋给gridOptions 
        var gridOptions = {
            columnDefs: columnDefs,
            rowData: data,

            defaultColDef: {
                sortable: true,
                resizable: true,
                cellStyle: {
                    'line-height': '28px',   // 行高设置同步：跟rowHeight属性设置值一致
                },
            },

            rowHeight: 28, // 设置表格行高
            headerHeight: 30, // 设置表格表头的行高
        };

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

</html>

2.列有分组情况:

方法一:

首先,看效果(分组列左边没有计数数据)

 如果有分组列,完全依据以上的无分组情况来写的话,表格数据是有些错位的.

错位效果如下:

所以单靠第一种方法是有问题的,所以自己进行了一下其他设置,暂时能解决这个问题,但是也有一个弊端,弊端在最后会描述.

(1) 首先,rowHeight,line-height这三个属性还是需要设置的,现在展示的就是以上分组数据错位的情况.

(2)重新设置分组列左边的图标( < ,^)样式和位置.

        使用icons属性中的groupExpanded和groupContracted,分别是列展开和折叠的动作.并且在groupExpanded和groupContracted中的img标签中对图片的位置进行设置,以此来调整分组中图标的位置.

icons: {
    groupExpanded: '<img src="../image/tree-open.png"style="width: 20px;height:20px;margin-bottom: 10px"/>', // 展开后的图片
    groupContracted: '<img src="../image/tree-closed.png"style="width: 20px;height:20px;margin-bottom: 10px"/>',// 折叠后的图片
       }

上面代码中的src就是需要放置的图片,在ag-grid中,展开和折叠这两个图片是有地方可以下载的.名字分别是tree-open和tree-closed.

icon下载页面https://www.ag-grid.com/react-data-grid/custom-icons/#provided-theme-iconsicon-default.png?t=L892https://www.ag-grid.com/react-data-grid/custom-icons/#provided-theme-icons

        下载下来的图片都是svg格式,需要转化为png格式或者其他格式的图片才能识别并且展示出来.

现在继续看效果,可以看待分组列旁边的计数还是展示错位::

(3) 本人现在暂时未找到方法将计数的格式调整规范,因为只能先隐藏,所以需要启用autoGroupColumnDef属性,就是对分组列进行一些属性设置的方法.并且在里面的cellRendererParams中继续设置suppressCount=true,以此来不显示分组列右边的个数统计..

autoGroupColumnDef: {
                headerName: '班级（分组后的名称）',  // 设置分组之后列的显示名称，如果不设置，则默认显示为“Group”。
                minWidth: 100, // 设置分组列的最小宽度，其他属性也可以设置，例如：width；maxWidth
                sort: 'asc', // 对分组进行排序，asc是升序，desc是降序
                pinned: 'left', // 将分组列固定在左边
                cellRendererParams: {
                    suppressCount: true,  // 不显示分组列右边的计数个数
                }
        },

最后,再看一次效果图:

 备注:

        这一部分还用到分组后对分组列的名字显示:即在autoGroupColumnDef属性中设置headerName.

以下为效果源码:

<!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>
    <div id="myGrid" style="width: 100%;height: 1000px;" class="ag-theme-alpine"></div>

    <script>
        //定义表格列
        var columnDefs = [
            {
                headerName: '班级',
                field: 'class',
                rowGroup: true,  // 进行分组显示
                hide: true  // 隐藏本列（会重新显示一列分组后的数据）
            },
            {
                headerName: '姓名',
                field: 'name'
            },
            {
                headerName: '性别',
                field: 'sex'
            },
            {
                headerName: '年龄',
                field: 'age'
            },
            {
                headerName: '省份',
                field: 'sf'
            },

        ];


        var data = [
            { class: '一班', name: '张三', sex: '男', age: '100', 'sf': '浙江' },
            { class: '一班', name: '李四', sex: '女', age: '5', 'sf': '四川' },
            { class: '一班', name: '王五', sex: '女', age: '20', 'sf': '河南' },
            { class: '一班', name: '小李', sex: '女', age: '26', 'sf': '江苏' },
            { class: '二班', name: '小丽', sex: '男', age: '35', 'sf': '湖南' },
            { class: '二班', name: '张云', sex: '男', age: '100', 'sf': '吉林' },
            { class: '二班', name: '吴强', sex: '女', age: '5', 'sf': '浙江' },
            { class: '二班', name: '陈丽', sex: '女', age: '20', 'sf': '内蒙古' },
            { class: '二班', name: '谭笑', sex: '女', age: '26', 'sf': '江苏' },
            { class: '二班', name: '欧阳', sex: '男', age: '35', 'sf': '福建' },
            { class: '二班', name: '李冠', sex: '男', age: '100', 'sf': '宁夏' },
            { class: '二班', name: '张物', sex: '女', age: '5', 'sf': '新疆' },
            { class: '三班', name: '郭翰', sex: '女', age: '20', 'sf': '西藏' },
            { class: '三班', name: '何树', sex: '女', age: '26', 'sf': '广西' },
            { class: '三班', name: '田武', sex: '男', age: '35', 'sf': '海南' },
            { class: '三班', name: '孔紫', sex: '男', age: '35', 'sf': '山东' }
        ];

        //将列和数据赋给gridOptions 
        var gridOptions = {
            columnDefs: columnDefs,
            rowData: data,

            defaultColDef: {
                sortable: true,
                resizable: true,
                cellStyle: {
                    'line-height': '28px',   // 行高设置同步：跟rowHeight属性设置值一致
                },
            },

            // 是否展开分组
            groupDefaultExpanded: 1,// 默认情况下打开组的级别：-1：展开所有组；0：不展开组；1：只展开第一层组别；2：之展开前两层组别，（我的理解是，数字是几就展开前几层组别，暂时没有进行多个组别的测试）

            // 对组别的设置
            autoGroupColumnDef: {
                headerName: '班级（分组后的名称）',  // 设置分组之后列的显示名称，如果不设置，则默认显示为“Group”。
                minWidth: 100, // 设置分组列的最小宽度，其他属性也可以设置，例如：width；maxWidth
                sort: 'asc', // 对分组进行排序，asc是升序，desc是降序
                pinned: 'left', // 将分组列固定在左边
                cellRendererParams: {
                    suppressCount: true,  // 不显示分组列右边的计数个数
                }
            },

            rowHeight: 28, // 设置表格行高
            headerHeight: 30, // 设置表格表头的行高

            // 设置分组列左边的图标
            icons: {
                groupExpanded: '<img src="../image/tree-open.png"style="width: 20px;height:20px;margin-bottom: 10px"/>', // 展开后的图片
                groupContracted: '<img src="../image/tree-closed.png"style="width: 20px;height:20px;margin-bottom: 10px"/>',// 折叠后的图片
            }

        };

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

</html>

方法二:

即在上述方法基础上不设置 icons,suppressCount, 并且将line-height替换为  'margin-top',将  'margin-top'值设置为负数(具体数值需要根据表格调试).但是这样的方法会导致鼠标点击时也有错位的情况.效果如下:

以下是上面效果的所有代码:

<!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>
    <div id="myGrid" style="width: 100%;height: 1000px;" class="ag-theme-alpine"></div>

    <script>
        //定义表格列
        var columnDefs = [
            {
                headerName: '班级',
                field: 'class',
                rowGroup: true,  // 进行分组显示
                hide: true  // 隐藏本列（会重新显示一列分组后的数据）
            },
            {
                headerName: '姓名',
                field: 'name'
            },
            {
                headerName: '性别',
                field: 'sex'
            },
            {
                headerName: '年龄',
                field: 'age'
            },
            {
                headerName: '省份',
                field: 'sf'
            },

        ];


        var data = [
            { class: '一班', name: '张三', sex: '男', age: '100', 'sf': '浙江' },
            { class: '一班', name: '李四', sex: '女', age: '5', 'sf': '四川' },
            { class: '一班', name: '王五', sex: '女', age: '20', 'sf': '河南' },
            { class: '一班', name: '小李', sex: '女', age: '26', 'sf': '江苏' },
            { class: '二班', name: '小丽', sex: '男', age: '35', 'sf': '湖南' },
            { class: '二班', name: '张云', sex: '男', age: '100', 'sf': '吉林' },
            { class: '二班', name: '吴强', sex: '女', age: '5', 'sf': '浙江' },
            { class: '二班', name: '陈丽', sex: '女', age: '20', 'sf': '内蒙古' },
            { class: '二班', name: '谭笑', sex: '女', age: '26', 'sf': '江苏' },
            { class: '二班', name: '欧阳', sex: '男', age: '35', 'sf': '福建' },
            { class: '二班', name: '李冠', sex: '男', age: '100', 'sf': '宁夏' },
            { class: '二班', name: '张物', sex: '女', age: '5', 'sf': '新疆' },
            { class: '三班', name: '郭翰', sex: '女', age: '20', 'sf': '西藏' },
            { class: '三班', name: '何树', sex: '女', age: '26', 'sf': '广西' },
            { class: '三班', name: '田武', sex: '男', age: '35', 'sf': '海南' },
            { class: '三班', name: '孔紫', sex: '男', age: '35', 'sf': '山东' }
        ];

        //将列和数据赋给gridOptions 
        var gridOptions = {
            columnDefs: columnDefs,
            rowData: data,

            defaultColDef: {
                sortable: true,
                resizable: true,
                cellStyle: {
                    'margin-top':"-5px"
                },
            },

            // 是否展开分组
            groupDefaultExpanded: 1,// 默认情况下打开组的级别：-1：展开所有组；0：不展开组；1：只展开第一层组别；2：之展开前两层组别，（我的理解是，数字是几就展开前几层组别，暂时没有进行多个组别的测试）

            // 对组别的设置
            autoGroupColumnDef: {
                headerName: '班级（分组后的名称）',  // 设置分组之后列的显示名称，如果不设置，则默认显示为“Group”。
                minWidth: 100, // 设置分组列的最小宽度，其他属性也可以设置，例如：width；maxWidth
                sort: 'asc', // 对分组进行排序，asc是升序，desc是降序
                pinned: 'left', // 将分组列固定在左边
           
            },

            rowHeight: 30, // 设置表格行高
            headerHeight: 30, // 设置表格表头的行高

      
        };

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

</html>

方法三:      

        时隔一天，又找到一种方式。现在不仅可以简单设置行高，就连右边的计数也可以显示出来，并且也不用单独替换图标。

        同样先来看效果：

         要实现这样的效果，这里需要设置三个地方：

                （1） 设置rowHeight属性。

            rowHeight: 28, // 设置表格行高
            headerHeight: 30, // 设置表格表头的行高

                （2） 设置cellStyle属性

                cellStyle: (params) => {
                    // 判断是不是分组列，如果是的话就不需要设置line-height属性，如果不是的话就需要设置line-height（因为.ag-cell-expandable只对分组列有作用）
                    if (params.column.colId === "ag-Grid-AutoColumn") {
                        return {};
                    }
                    return { "line-height": "28px" };
                }

                （3）引入ag-grid的css style中的 .ag-cell-expandable

    <style>
   
        /* 对表格分组样式的渲染  */
        .ag-cell-expandable {
            font-weight: bold;
            color: blue;
            margin-top: -6px;   /* 根据表格的实际情况来调整距离 */
        }
    </style>

        注意的是，ag-grid的版本需要是高版本，这个页面用的是 V26的企业版，我之前使用V23的时候，使用 .ag-cell-expandable无效果。不能实现相应功能。

        以下为上图的完整代码：

<!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> -->
 


    <!-- 以下 ag-grid 新版本链接 ，已经将文件夹中的ag-grid-enterprise.min.js 替换成了新版本,要保存新版本的ag-grid-enterprise.min.js文件，
        只需在网页上打开这个链接，然后右键另存问，就可以将这个js文件保存下来，放在引用中使用 -->
    <script src="https://unpkg.com/@ag-grid-enterprise/all-modules@26.0.0/dist/ag-grid-enterprise.min.js">
    </script>
 
    <style>
   
        /* 对表格分组样式的渲染  */
        .ag-cell-expandable {
            font-weight: bold;
            color: blue;
            margin-top: -6px;   /* 根据表格的实际情况来调整距离 */
          
        }
    </style>
</head>

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

    <script>
        //定义表格列
        var columnDefs = [
            {
                headerName: '班级',
                field: 'class',
                rowGroup: true,  // 进行分组显示
                hide: true  // 隐藏本列（会重新显示一列分组后的数据）
            },
            {
                headerName: '姓名',
                field: 'name'
            },
            {
                headerName: '性别',
                field: 'sex'
            },
            {
                headerName: '年龄',
                field: 'age'
            },
            {
                headerName: '省份',
                field: 'sf'
            },

        ];


        var data = [
            { class: '一班', name: '张三', sex: '男', age: '100', 'sf': '浙江' },
            { class: '一班', name: '李四', sex: '女', age: '5', 'sf': '四川' },
            { class: '一班', name: '王五', sex: '女', age: '20', 'sf': '河南' },
            { class: '一班', name: '小李', sex: '女', age: '26', 'sf': '江苏' },
            { class: '二班', name: '小丽', sex: '男', age: '35', 'sf': '湖南' },
            { class: '二班', name: '张云', sex: '男', age: '100', 'sf': '吉林' },
            { class: '二班', name: '吴强', sex: '女', age: '5', 'sf': '浙江' },
            { class: '二班', name: '陈丽', sex: '女', age: '20', 'sf': '内蒙古' },
            { class: '二班', name: '谭笑', sex: '女', age: '26', 'sf': '江苏' },
            { class: '二班', name: '欧阳', sex: '男', age: '35', 'sf': '福建' },
            { class: '二班', name: '李冠', sex: '男', age: '100', 'sf': '宁夏' },
            { class: '二班', name: '张物', sex: '女', age: '5', 'sf': '新疆' },
            { class: '三班', name: '郭翰', sex: '女', age: '20', 'sf': '西藏' },
            { class: '三班', name: '何树', sex: '女', age: '26', 'sf': '广西' },
            { class: '三班', name: '田武', sex: '男', age: '35', 'sf': '海南' },
            { class: '三班', name: '孔紫', sex: '男', age: '35', 'sf': '山东' }
        ];


        //将列和数据赋给gridOptions 
        var gridOptions = {
            columnDefs: columnDefs,
            rowData: data,

            defaultColDef: {
                sortable: true,
                resizable: true,
                cellStyle: (params) => {
                    // 判断是不是分组列，如果是的话就不需要设置line-height属性，如果不是的话就需要设置line-height（因为.ag-cell-expandable只对分组列有作用）
                    if (params.column.colId === "ag-Grid-AutoColumn") {
                        return {};
                    }
                    return { "line-height": "28px" };
                }
            },

            // 是否展开分组:默认情况下打开组的级别：-1：展开所有组；0：不展开组；1：只展开第一层组别；2：之展开前两层组别，（我的理解是，数字是几就展开前几层组别，暂时没有进行多个组别的测试）
            groupDefaultExpanded: 1,

            // 对组别的设置
            autoGroupColumnDef: {
                headerName: '班级（分组后的名称）',  // 设置分组之后列的显示名称，如果不设置，则默认显示为“Group”。
                minWidth: 100, // 设置分组列的最小宽度，其他属性也可以设置，例如：width；maxWidth
                sort: 'asc', // 对分组进行排序，asc是升序，desc是降序
                pinned: 'left', // 将分组列固定在左边
            },

            rowHeight: 28, // 设置表格行高
            headerHeight: 30, // 设置表格表头的行高
        };

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

</html>

以上便是本篇文章的所有内容，如果有哪位兄台有更完美的解决方法,请不吝赐教！！！！！

前端菜鸟来报道
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs中设置grid默认行高及换行
03-12
Extjs 中想改变grid 行高，如果只是简单的设置了height的值是可以实现grid 的行高，但是如果使用了插件：rowexpander ，最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼，为了找到资源下载，被迫无奈积分，望谅解，如果真的有需要可以联系我
tinyMCE富文本编辑器line-height行高插件
10-12
tinyMCE富文本编辑器line-height行高插件，下载后放在tinyMCE插件的plugins文件夹中，之后初始化中引入plugins，即可在toolbar中展示
推荐一个非常好用的表格组件 - AG Grid
最新发布
杨树林er的博客
03-13 1013
AG-Grid是一个高级数据网格，适用于JavaScript / TypeScript应用程序。AG-Grid没有其他依赖项，不需要提前加载 Vue 或 React 或 Angular，甚至不使用 JQuery、Undercore 或 LoDash。没有依赖性意味着AG-Grid可以与任何框架一起工作。
活字格-自动设置行高.zip
09-09
活字格-自动设置行高
关于css中line-height(行高)设置无效的问题的解决方法
09-22
主要介绍了关于css中line-height(行高)设置无效的问题的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ag-grid 右键单元格动态改变单元格样式
仗剑行于江湖，执笔记江湖事。
06-14 1588
自定义单元格单击或右键时，给单元格添加不一样的样式而苦苦搜寻，可找了好久却好像都没有呢？巧了，笔者已经实现了这一看似很简单地功能！
ag-grid 使用cellRendererSelector或cellRenderer渲染单元格，数据更新联动
weixin_58873157的博客
03-10 4032
例如A组件数据更新后，需要B组件做出处理 1.渲染两个组件 const columnDefs: (ColDef | ColGroupDef)[] = [ { headerName: 'Type',//渲染出的header field: 'Type',//关联的字段 editable: false,//false为不可编辑 // cellRenderer: TypeCellRender,//渲染自定义组件 cellRendere
ag-grid表格属性
grow_的博客
08-24 3349
ad-grid属性
Ag Grid细节网格（表格行展开）Vue Data Grid: Master / Detail
huchaoyue_的博客
12-28 1367
Vue Data Grid: Master / Detail Master Detail指的是一个叫做Master Grid的顶层网格，它的行可以展开。当行被展开时，另一个网格会显示与被展开行有关的更多细节。出现的网格被称为细节网格。
Ag Grid 组件 Vue Data Grid: Components
huchaoyue_的博客
12-30 2786
VueJS 组件可以定义为简单的内联组件，也可以定义为完整/复杂的外部组件（即在单独的文件中）。每种组件类型（单元格渲染器、单元格编辑器等）的页面都包含如何注册和使用每种组件类型的例子。然而，在这里，退一步讲，把注意力集中在所有组件类型所共有的组件注册过程上，是很有用的。按名称直接引用（已弃用）网格完全支持这两个选项 - 但是我们建议按名称引用，因为不推荐使用直接引用注册。按名称注册也是两种选择中更灵活的一种，鉴于此，文档中的所有示例都使用按名称注册。
ag-grid在Vue项目中的基本使用
热门推荐
sleepwalker_1992的专栏
11-01 2万+
ag-grid官网 1、安装 npm install ag-grid-community ag-grid-vue --save-dev 2、在main.js中引入ag-grid的样式文件 // 引入ag-grid的样式文件 import '../node_modules/ag-grid-community/dist/styles/ag-grid.css'; import '../node...
给ag-grid表头添加tooltip的两种方式
莱克博尔德的博客
07-21 1873
ag-grid的使用：为表格添加 tooltip 的两种方法，总有一种适合你。
Ag Grid 表格树 Vue Data Grid: Tree Data
huchaoyue_的博客
12-31 2322
使用树形数据来显示具有父/子关系的数据，其中的父/子关系是作为数据的一部分提供的。例如，一个文件夹可以包含零个或多个文件和其他文件夹。在介绍更高级的用例之前，本节介绍使用树数据的简单方法。
ag-grid 列组和行组学习
【爱打盹的喵】的专栏
06-11 3309
首先，话不多说，直接上效果图。 代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=...
react deafult bc
weixin_38964818的博客
02-22 293
【代码】react deafult bc。
ag-grid 学习笔记三：ag-grid设置（定义列、选择行、复选框、设置行高列宽、置顶合计行、底部合计行、行组、客户端排序）
【爱打盹的喵】的专栏
06-09 1万+
目录 一 定义列 二 选择行 三 设置复选框 四 设置行高列宽 五 置顶合计行 六 底部合计行 七 行组 八 客户端排序 一 定义列 表格的列有如下常用属性。 名称 说明 headerName 显示的列名称，和数据没有关系显示给用户看的 field 字段，headerName对于的数据字段，如上面代码“姓名”列对应的数据字段是name pinned 列固定（冻结列）的位置，，支持left right,把列固定在左边或者右边 valueFormat
el-table高度适应外围容器，ag-gride高度适应外围容器
趟过java，遇见web
02-15 583
el-table高度适应外围容器。ag-gride高度适应外围容器。
Ag-grid之在column添加icon
lionheart922的专栏
09-11 1238
定义RowCellRender class RowCellRenderer { eGui: any; init(params: { param1: string, param2: string, param3: boolean }) { if (!params.isParamsDataNull) { this.eGui = document.createElement('span'); this.eGui.innerHTML = `<i cl
解决Gridview列表view高度无法固定的方法
zhangmingCSDN
05-23 2361
代码比较简单，直接贴在下面： import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.widget.Te

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值