如何使用jqGrid插件实现纵向对齐的网格布局？

完全可以用jqGrid实现这种布局，不需要依赖数据透视网格。核心思路是把首列配置为固定的行标题列，后续列绑定对应的数据字段即可，具体实现如下：

实现步骤与代码示例 #

1. 基础HTML结构 #

先准备jqGrid所需的表格和分页容器：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.5/css/ui.jqgrid.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.5/js/jquery.jqgrid.min.js"></script>

<table id="myGrid"></table>
<div id="myPager"></div>

2. 配置jqGrid核心参数 #

通过colModel定义列结构，首列作为行标题，后续列对应数据字段：

$(function() {
    $("#myGrid").jqGrid({
        datatype: "local",
        data: [
            { rowHeader: "产品A", q1: "120", q2: "150", q3: "130", q4: "180" },
            { rowHeader: "产品B", q1: "90", q2: "110", q3: "100", q4: "120" },
            { rowHeader: "产品C", q1: "200", q2: "220", q3: "210", q4: "250" }
        ],
        colModel: [
            { 
                name: "rowHeader", 
                label: "产品名称", 
                width: 120, 
                sortable: false, 
                editable: false,
                frozen: true // 可选：固定首列不随滚动移动
            },
            { name: "q1", label: "Q1销售额", width: 100 },
            { name: "q2", label: "Q2销售额", width: 100 },
            { name: "q3", label: "Q3销售额", width: 100 },
            { name: "q4", label: "Q4销售额", width: 100 }
        ],
        pager: "#myPager",
        rowNum: 10,
        rowList: [10, 20, 30],
        viewrecords: true,
        autowidth: true,
        height: "auto",
        caption: "年度产品销售数据"
    });
});

关键配置说明 #

• 首列rowHeader：设置为非可排序、非可编辑，若需要固定首列，添加frozen: true即可实现类似冻结窗格的效果
• 数据结构：每个数据对象包含首列的行标题字段，以及后续各数据列的对应字段，对应colModel中的name属性
• 若从后端获取数据，只需将datatype改为json或xml，并配置url指向后端接口，确保返回的数据结构与colModel匹配

内容的提问来源于stack exchange，提问作者Nh_geek