web前端数据表格有合并项的一种简单实现方法

今天一个同学在QQ里问，如何实现前端数据表中有合并项的效果，

在QQ里打字说不清楚，于是写了一个简单的例子说明问题，

现在记录下来，以备后用：

先写一个基本的html页面：

<!DOCTYPE html />
<html>
<head>
    <title>test table</title>
    <script src="./js/jquery-3.1.1.min.js"></script>
</head>
<body>
    <table id="testTable" border="1" cellspacing="1" cellpadding="1">
        <thead>
            <tr>
                <th>车站名称</th>
                <th>列车类型</th>
                <th>列车名称</th>
                <th>到站时间</th>
                <th>出站时间</th>
                <th>停靠时长</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>
<script type="text/javascript">
</script>

接着造数据：

<script type="text/javascript">
    var dt = [
        { siteName: '武昌站', type: '快速', trainCode: 'K82', enterTime: '6:02', leaveTime: '6:08', duration: 6 },
        { siteName: '武汉站', type: '动车', trainCode: 'D289', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '汉口站', type: '动车', trainCode: 'D158', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '武汉站', type: '高铁', trainCode: 'G129', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '武汉站', type: '高铁', trainCode: 'G68', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '武昌站', type: '动车', trainCode: 'D5242', enterTime: '9:02', leaveTime: '9:10', duration: 8 },
        { siteName: '武昌站', type: '直达', trainCode: 'Z168', enterTime: '10:52', leaveTime: '10:57', duration: 5 },
        { siteName: '汉口站', type: '动车', trainCode: 'D86', enterTime: '8:00', leaveTime: '8:05', duration: 5 },
        { siteName: '汉口站', type: '直达', trainCode: 'Z35', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '武昌站', type: '特快', trainCode: 'T254', enterTime: '6:55', leaveTime: '7:02', duration: 7 },
        { siteName: '汉口站', type: '快速', trainCode: 'K91', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '武汉站', type: '动车', trainCode: 'D5146', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '武汉站', type: '高铁', trainCode: 'G362', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '汉口站', type: '直达', trainCode: 'Z38', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '汉口站', type: '特快', trainCode: 'T232', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '武汉站', type: '高铁', trainCode: 'G69', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '武昌站', type: '直达', trainCode: 'Z25', enterTime: '21:56', leaveTime: '22:08', duration: 12 },
        { siteName: '武汉站', type: '动车', trainCode: 'D91', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
    ];
</script>

然后排序数据, 这里省略排序过程，麻烦，直接贴排序结果，能表明做法就行：

<script type="text/javascript">
    var list = [
        { siteName: '武昌站', type: '快速', trainCode: 'K82', enterTime: '6:02', leaveTime: '6:08', duration: 6 },
        { siteName: '武昌站', type: '特快', trainCode: 'T254', enterTime: '6:55', leaveTime: '7:02', duration: 7 },
        { siteName: '武昌站', type: '直达', trainCode: 'Z168', enterTime: '10:52', leaveTime: '10:57', duration: 5 },
        { siteName: '武昌站', type: '直达', trainCode: 'Z25', enterTime: '21:56', leaveTime: '22:08', duration: 12 },
        { siteName: '武昌站', type: '动车', trainCode: 'D5242', enterTime: '9:02', leaveTime: '9:10', duration: 8 },
        { siteName: '汉口站', type: '快速', trainCode: 'K91', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '汉口站', type: '特快', trainCode: 'T232', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '汉口站', type: '动车', trainCode: 'D158', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '汉口站', type: '动车', trainCode: 'D86', enterTime: '8:00', leaveTime: '8:05', duration: 5 },
        { siteName: '汉口站', type: '直达', trainCode: 'Z35', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '汉口站', type: '直达', trainCode: 'Z38', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '武汉站', type: '动车', trainCode: 'D91', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '武汉站', type: '动车', trainCode: 'D289', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '武汉站', type: '动车', trainCode: 'D5146', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '武汉站', type: '高铁', trainCode: 'G362', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '武汉站', type: '高铁', trainCode: 'G69', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '武汉站', type: '高铁', trainCode: 'G129', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
        { siteName: '武汉站', type: '高铁', trainCode: 'G68', enterTime: '8:24', leaveTime: '8:32', duration: 8 },
    ];//排序后的数据
</script>

然后就是加载数据的算法：

<script type="text/javascript">
    /* 
     * 倒序循环，一次取当前条和下一条，进行比较，
     * 根据比较结果累加合并的行数或重置合并的行数，生成的标签依次往前累加
     */
    var sn = 1, tp = 1, ht = '';
    for (var i = list.length - 1; i > 0; i--) {
        var d = list[i], p = list[i - 1];
        ht = '<tr>' + (d.siteName == p.siteName ? '' : ('<td rowspan="' + sn + '">' + d.siteName + '</td>'))
           +     (d.siteName == p.siteName && d.type == p.type ? '' : ('<td rowspan="' + tp + '"' + '>' + d.type + '</td>'))
           +     '<td>' + d.trainCode + '</td><td>' + d.enterTime + '</td><td>' + d.leaveTime + '</td><td>' + d.duration  + '</td></tr>' + ht;
        if (d.siteName == p.siteName) {
            sn += 1;
            tp = d.type == p.type ? (tp + 1) : 1;
        } else {
            sn = 1;
            tp = 1;
        }
    }
    // 由于循环没有到第一条，所以必须单独补上第一条
    var d = list[0];
    ht = '<tr><td rowspan="' + sn + '">' + d.siteName + '</td>'
       + '<td rowspan="' + tp + '"' + '>' + d.type + '</td>'
       + '<td>' + d.trainCode + '</td><td>' + d.enterTime + '</td><td>' + d.leaveTime + '</td><td>' + d.duration + '</td></tr>' + ht;
    $('#testTable').html(ht);
</script>

最后运行效果：

web前端数据表格有合并项的一种简单实现方法

猜你喜欢