📌  相关文章
📜  jQWidgets jqxGrid closeablegroups 属性(1)

📅  最后修改于: 2023-12-03 15:32:17.705000             🧑  作者: Mango

jQWidgets jqxGrid closeablegroups 属性介绍

简介

jQWidgets jqxGrid 是一个功能强大的表格插件，可以让你快速地在你的网站上创建一个功能完善的表格。

closeablegroups 属性是 jqxGrid 插件中的一个重要属性，它允许你在 jqxGrid 中创建可折叠的分组，并且可以通过点击分组来展开或者关闭分组。这个属性可以方便的让用户在查看表格时对数据进行分组统计，以达到更好的数据呈现效果。

属性说明
closeablegroups

closeablegroups 是 jqxGrid 插件中的一个重要属性，它代表着关闭分组的功能开启，也就是当设置了 closeablegroups 为 true 时，分组标签旁边将出现一个关闭图标，点击该图标可以折叠或者展开分组。

closeablegroups: true //开启关闭分组的功能
使用方法

为了快速使用 closeablegroups 属性，你需要按照以下步骤进行配置：

第一步：引入 jQWidgets 插件的 js 和 css 文件

在你的 HTML 文件中引入 jQWidgets 组件的 js 和 css 文件，这些文件可以通过官方网站进行下载，也可以通过 CDN 进行获取。

<head>
    <!-- 引入 jQWidgets css 文件 -->
    <link rel="stylesheet" href="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/styles/jqx.base.css">
    
    <!-- 引入 jQWidgets js 文件 -->
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/jqxcore.js"></script>  
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/jqxbuttons.js"></script>  
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/jqxscrollbar.js"></script>  
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/jqxmenu.js"></script>  
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/jqxgrid.js"></script>  
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/jqxgrid.pager.js"></script>  
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/jqxgrid.sort.js"></script>  
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/jqxgrid.filter.js"></script>  
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/jqxgrid.grouping.js"></script>  
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/jqxgrid.columnsresize.js"></script>  
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/jqxdata.js"></script>  
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/jqxdatetimeinput.js"></script>  
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/jqxcalendar.js"></script>  
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/jqxtooltip.js"></script>  
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets-resources/jqwidgets/globalization/globalize.culture.de-DE.js"></script>
</head>

第二步：正常创建 jqxGrid 表格，并设置相应的 closeablegroups 属性

在正常创建 jqxGrid 表格的过程中，设置 closeablegroups 为 true 即可开启该功能。

//创建 jqxGrid 表格
$('#jqxgrid').jqxGrid({
    source: dataAdapter, // 数据源
    pageable: true, // 可分页
    pagermode: 'simple', // 简单模式
    altrows: true, // 使用交替行样式
    sortable: true, // 可排序
    selectionmode: 'multiplecellsadvanced', // 多选
    columnsresize: true, // 列宽可调
    columns: [
        { text: '', datafield: 'index', width: 50, cellsrenderer: function(row, column, value) { return '<div style="text-align: center;">' + (value + 1) + '</div>'; } },
        // 更多列设置
    ],
    groups: ['group1', 'group2', 'group3'], // 分成 3 组
    closeablegroups: true // 开启 closeablegroups 功能
});

第三步：设置样式

当开启了 closeablegroups 功能后，需要为关闭图标设置相应的样式以便于用户操作。

.jqx-widget-header .jqx-grid-group-collapse-button {
    background-image: url('../styles/close.png');
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    margin-top: 2px;
    float: right;
    margin-left: 5px;
}
示例效果

最终的效果如下图所示：

closeablegroups效果图

总结

通过本篇文章，我们了解了 jQWidgets jqxGrid closeablegroups 属性的作用和用法，它可以方便的为网站中的表格数据分组展示提供更好的用户体验和便利。