Grid.js导入HTML表格含HTML列无法排序的解决方法

当使用Grid.js的from选项直接导入现有HTML表格时，包含HTML标签（如链接、徽章）的列无法正常排序，原因是Grid.js默认将单元格的原始HTML内容作为排序依据，而非实际的文本内容。以下是无需后端服务的客户端解决方案：

核心思路 #

手动提取原表格数据，将每个单元格的纯文本内容用于排序逻辑，同时保留原始HTML内容用于渲染，通过Grid.js的columns配置实现两者分离。

修改后的完整代码 #

<table class="dc-dt" style="display: none;"> <!-- 隐藏原表格避免重复显示 -->
    <thead>
        <tr>
            <th>Member Type</th>
            <th>Congress Member</th>
            <th>Party</th>
            <th>State</th>
            <th>Document Filer</th>
            <th>Destination</th>
            <th>Departure Date</th>
            <th>Return Date</th>
            <th>Sponsor</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-row-striped">
            <td class="px-4 py-2">
                <span class="badge bg-gray-500">Representative</span>
            </td>
            <td>
                <a href="/congress-member/J000304">Ronny Jackson</a>
            </td>
            <td>R</td>
            <td>TX</td>
            <td>
                Bryan Brody
            </td>
            <td>
                <a href="/travel-by-destination/New York, NY">New York, NY</a>
            </td>
            <td>Jul 25, 2024</td>
            <td>Jul 26, 2024</td>
            <td>United Nations Foundation</td>
        </tr>
        <tr class="table-row-striped">
            <td class="px-4 py-2">
                <span class="badge bg-gray-500">Representative</span>
            </td>
            <td>
                <a href="/congress-member/B001298">Don Bacon</a>
            </td>
            <td>R</td>
            <td>NE</td>
            <td>
                Matthew Duglin
            </td>
            <td>
                <a href="/travel-by-destination/Israel">Israel</a>
            </td>
            <td>Jul 13, 2024</td>
            <td>Jul 21, 2024</td>
            <td>American Israel Education Foundation</td>
        </tr>
    </tbody>
</table>

<div id="grid"></div>

<script type="module">
    import { Grid, html } from "https://unpkg.com/gridjs?module";

    (function() {
        const originalTable = document.querySelector('.dc-dt');
        // 提取表头文本
        const headers = Array.from(originalTable.querySelectorAll('thead th'))
            .map(th => th.textContent.trim());
        
        // 提取每行数据，同时保存单元格的HTML和纯文本内容
        const rows = Array.from(originalTable.querySelectorAll('tbody tr')).map(tr => {
            return Array.from(tr.querySelectorAll('td')).map(td => ({
                html: td.innerHTML,
                text: td.textContent.trim()
            }));
        });

        // 配置列：区分文本排序和HTML渲染，优化日期列排序逻辑
        const columns = headers.map((header, index) => {
            const isDateColumn = ['Departure Date', 'Return Date'].includes(header);
            return {
                name: header,
                // 保留原HTML样式（链接、徽章等）
                formatter: (cell) => html(cell.html),
                // 排序逻辑：日期列按时间排序，其他列按文本排序
                sort: (a, b) => {
                    if (isDateColumn) {
                        return new Date(a.text) - new Date(b.text);
                    }
                    return a.text.localeCompare(b.text, undefined, { sensitivity: 'base' });
                }
            };
        });

        const tbl = new Grid({
            columns: columns,
            data: rows,
            sort: true,
            search: true
        });

        tbl.render(document.getElementById('grid'));
    })();
</script>

关键说明 #

1. 隐藏原表格：给原表格添加display: none，避免Grid.js渲染后重复显示内容
2. 数据分离存储：每个单元格同时保存html（用于渲染）和text（用于排序），彻底规避HTML标签对排序的干扰
3. 日期列优化：针对日期列单独处理排序逻辑，转换成Date对象比较，确保时间顺序准确
4. 兼容性：纯客户端处理，无需后端接口，完全符合渐进式增强的需求

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