如何将SQL查询数据在HTML页面以多组列表形式展示？

要实现按Column_A（MAN/WOMAN）和Column_B（FRUIT/BREAKFAST等）分层分组的表格展示，需要分两步修改代码：数据分组处理、HTML模板调整。

一、修改JavaScript代码，处理分组数据 #

将扁平数组转换为层级化的分组结构，方便HTML嵌套遍历：

function TESTTT($scope, $http) {
    // 计算分组总条目数，用于表格单元格合并
    $scope.getTotalRows = function(groupsB) {
        return groupsB.reduce((total, subGroup) => total + subGroup.items.length, 0);
    };

    // 数据分组函数：先按Column_A分组，再按Column_B分组
    function groupData(rawData) {
        const groupedObj = {};
        rawData.forEach(item => {
            // 初始化外层分组（Column_A）
            if (!groupedObj[item.Column_A]) {
                groupedObj[item.Column_A] = {};
            }
            // 初始化内层分组（Column_B）
            if (!groupedObj[item.Column_A][item.Column_B]) {
                groupedObj[item.Column_A][item.Column_B] = [];
            }
            // 将条目加入对应分组
            groupedObj[item.Column_A][item.Column_B].push(item);
        });
        // 转换为数组格式，适配ng-repeat遍历
        return Object.entries(groupedObj).map(([groupA, subGroupsObj]) => ({
            groupA: groupA,
            groupsB: Object.entries(subGroupsObj).map(([groupB, items]) => ({
                groupB: groupB,
                items: items
            }))
        }));
    }

    $scope.getData = function() {
        var serializedData = $.param({user:postUserName,password:postPassword,datasetName:'TEST_dATA',parameters:'X:\''+kullaniciNet+'\''});
        $http({
            method: 'POST',
            url: postUrl,
            data: serializedData,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }}).then(function(result) {
            // 模拟数据替换为实际接口返回的result.data
            const rawData = [
                { Column_A:"MAN", Column_B: "FRUIT", Column_C:  "BANANA ",Column_D:10}, 
                { Column_A:"MAN", Column_B: "FRUIT", Column_C:  "STRAWBERRY ", Column_D:15},
                { Column_A:"MAN", Column_B:  "BREAKFAST", Column_C:  "BUTTER",Column_D:20}, 
                { Column_A:"MAN", Column_B:  "VEGETABLE", Column_C:  "CARROT", Column_D:10},
                { Column_A:"WOMAN", Column_B:  "FRUIT", Column_C:  "BANANA", Column_D:5}, 
                { Column_A:"WOMAN", Column_B:  "BREAKFAST", Column_C:  "BUTTER", Column_D:20},
                { Column_A:"WOMAN", Column_B:  "BREAKFAST", Column_C:  "CHEESE", Column_D:5}
            ];
            // 生成分组后的数据
            $scope.groupedData = groupData(rawData);
        }, function(error) {
            console.log(error);
        });
    };
    $scope.getData();
}

二、修改HTML模板，实现分组展示 #

通过嵌套ng-repeat和单元格合并（rowspan），实现分层分组的视觉效果：

<div class="col-md-12">
    <div class="portlet-body" ng-controller="TESTTT">
        <div id="sample_1_wrapper" class="dataTables_wrapper no-footer">
            <div class="scroller table-responsive" style="overflow: hidden; width: auto; height: 750px;">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th style="text-align:center;font-weight:600;font-size:1em;">
                                1
                            </th>
                            <th style="text-align:center;font-weight:600;font-size:1em;">
                                2
                            </th>
                            <th style="text-align:center;font-weight:600;font-size:1em;">
                                3
                            </th>
                            <th style="text-align:center;font-weight:600;font-size:1em;">
                                4
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 外层循环：遍历Column_A分组（MAN/WOMAN） -->
                        <tr ng-repeat-start="group in groupedData">
                            <!-- Column_A单元格，合并该分组下所有行 -->
                            <td rowspan="{{getTotalRows(group.groupsB)}}" style="text-align:left;">{{group.groupA}}</td>
                            <!-- 第一个Column_B分组的标题单元格，合并该子分组下所有行 -->
                            <td rowspan="{{group.groupsB[0].items.length}}">{{group.groupsB[0].groupB}}</td>
                            <!-- 子分组下第一个条目的内容 -->
                            <td>{{group.groupsB[0].items[0].Column_C}}</td>
                            <td>{{group.groupsB[0].items[0].Column_D}}</td>
                        </tr>
                        <!-- 遍历第一个Column_B分组下的剩余条目 -->
                        <tr ng-repeat="item in group.groupsB[0].items track by $index" ng-if="$index > 0">
                            <td>{{item.Column_C}}</td>
                            <td>{{item.Column_D}}</td>
                        </tr>
                        <!-- 遍历当前Column_A下的其他Column_B分组 -->
                        <tr ng-repeat-start="subGroup in group.groupsB track by $index" ng-if="$index > 0">
                            <td rowspan="{{subGroup.items.length}}">{{subGroup.groupB}}</td>
                            <td>{{subGroup.items[0].Column_C}}</td>
                            <td>{{subGroup.items[0].Column_D}}</td>
                        </tr>
                        <!-- 遍历当前Column_B分组下的剩余条目 -->
                        <tr ng-repeat-end ng-repeat="item in subGroup.items track by $index" ng-if="$index > 0">
                            <td>{{item.Column_C}}</td>
                            <td>{{item.Column_D}}</td>
                        </tr>
                        <tr ng-repeat-end></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

效果说明 #

最终表格会按Column_A（MAN/WOMAN）作为第一级分组，Column_B（FRUIT/BREAKFAST等）作为第二级分组，相同分组的单元格会自动合并，视觉上形成层级分明的分组列表，符合你需要的展示效果。

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