建立幾個常用table展示方式外掛

這次和大家分享的是自己寫的一個table常用幾種展示格式的js外掛取名為(table-shenniu)，樣式使用的是bootstrap.min.css，還需要引用jquery.min.js包，這個外掛由來的目的是專案中需要一個table格式的提交資料的頁面，功能有合併單元格，只能提交選中行資料，全選功能，和一個下拉選功能；這幾種功能感覺朋友們肯定都會遇到，所以乾脆封裝一個外掛，釋出出來說不定能幫到有些朋友快速完成任務哈哈，當然最主要的還是希望朋友們能相互交流裡面的程式碼，邏輯，謝謝；中秋節就要到了，這裡提前預祝大家節日快樂，吃月餅的時候不要忘記了點個贊。

 

以上是個人的看法，下面來正式分享今天的文章吧：

. 功能介紹與效果圖(認可的點個贊)

. 需求分析

. 外掛主要程式碼塊的說明

. 獲取table外掛資料，並提交給後臺

. 外掛原始碼及幫助文件

 

下面一步一個腳印的來分享：

. 功能介紹與效果圖(認可的點個贊)

1.普通效果

2.合併表格

3.彙總

4.合併+彙總

5.展示選中行明細

 

. 需求分析

首先，咋們來看張圖：

如圖所示，這裡的乘客可能會選擇不同的產品，同時選擇的購買份數也可能改變，然後只能提交最後一列勾選上的資料這是上面的圖展示出來的功能資訊；為了更好的使用者體驗顯然“乘客姓名”這一列需要吧相同名稱的資料合併；價格一列通常在使用者填寫表單中不會有彙總的操作，但是資料統計報表中一般就需要；還有這個產品列只有名稱，沒有更詳細描述資訊，通常我們需要展示出來方便使用者瞭解更多的資訊，一般我們直接在產品名稱對應的html元素使用title展示，這樣不友好，所以又有了點選產品名稱，檢視明細的需求；下面我們來整合下需求：

1. table中每行需要checkbox選擇框和對應的份數下拉框select及全選按鈕

2. 重複資料合併單元格

3. 彙總金額數字列

4. 明細描述

5. 還需要一個能隱藏產品Id或者乘客Id的元素（外掛這裡定位一個隱藏列）

這個就是table列表需要滿足的需求，也是大眾化的需求吧

 

. 外掛主要程式碼塊的說明

首先，咋們來說下外掛需要的固定格式的資料：列表頭json資料，列表行json集合資料格式；

列表頭json資料：

//測試用例-列表頭
    var header = [

                    {
                        "title": "產品名稱",
                        "name": "product",
                        "type": "label"
                    },
                    {
                        "title": "銷售價",
                        "name": "sale",
                        "type": "label",
                    },
                    {
                        "title": "份數",
                        "name": "num",
                        "type": "select",  //如果是下拉框，這裡需要初始值val
                        "val": [
                                    {
                                        "text": 1,
                                        "val": 1
                                    },
                                    {
                                        "text": 2,
                                        "val": 2
                                    },
                                    {
                                        "text": 3,
                                        "val": 3
                                    }
                        ]
                    },
                    {
                        "title": "總額",
                        "name": "amount",
                        "type": "label"
                    },
                    {
                        "title": "<input type='checkbox'  name='cbAll' style='border: 0px; width: 20px; height: 20px;'/>",   //如果是全選選擇框，這裡直接寫html元素
                        "name": "cb",
                        "type": "checkbox"
                    },
                    {
                        "title": "保險Id",
                        "name": "productid",
                        "type": "hidden"
                    }
    ];

列表頭資料注意點在於：

1. 如果"type": "select"型別，需要初始值val屬性的值，這樣每一行中才會出現一個下拉框

2. "type": "checkbox"，如果列是核取方塊，那麼頭部單元格一般是全選的核取方塊，我們直接在頭部json定義

<input type='checkbox'  name='cbAll' style='border: 0px; width: 20px; height: 20px;'/>

就行了，如果不需要全選框，直接定義成文字就行

3. 外掛列支援的type型別有type：有label(文字)，select（下拉框，如果是下拉框需要初始化下拉資料“val”），checkbox（選擇框，如果需要全選框直接寫html元素，預設自帶），hidden（隱藏域，儲存每行唯一的值）

列表行json集合資料格式：

//測試用例-沒行資料
    var data = [
          { "product": "神鵰俠侶電影票", "sale": 30.00, "num": 1, "amount": 30.00, "cb": false, "productid": 2 },
          { "product": "搖搖樂門票", "sale": 30.00, "num": 2, "amount": 60.00, "cb": false, "productid": 1 },
          { "product": "神鵰俠侶電影票", "sale": 30.00, "num": 1, "amount": 30.00, "cb": true, "productid": 2 },
          { "product": "搖搖樂門票", "sale": 30.00, "num": 3, "amount": 90.00, "cb": false, "productid": 1 }
    ];

    data = [
       { "product": { "產品名稱": "神鵰俠侶電影票", "描述": "神鵰俠侶電影票，中秋節大放送，情侶們快來啊，只需一塊錢", "銷售價    ": 30.00 }, "sale": 30.00, "num": 1, "amount": 30.00, "cb": false, "productid": 1 },
       { "product": { "產品名稱": "搖搖樂門票", "描述": "搖搖樂門票，中秋節大放送，情侶們快來啊，只需一塊錢", "銷售價    ": 30.00 }, "sale": 30.00, "num": 2, "amount": 60.00, "cb": false, "productid": 2 },
       { "product": { "產品名稱": "楊過和小龍女電影票", "描述": "楊過和小龍女電影票，中秋節大放送，情侶們快來啊，只需一塊錢", "銷售價    ": 30.00 }, "sale": 30.00, "num": 1, "amount": 30.00, "cb": true, "productid": 3 },
       { "product": { "產品名稱": "四川一日行旅遊券", "描述": "小編忙，沒時間維護" }, "sale": 30.00, "num": 3, "amount": 90.00, "cb": false, "productid": 4 },
       { "product": { "產品名稱": "四川一日行旅遊券", "描述": "小編忙，沒時間維護" }, "sale": 30.00, "num": 1, "amount": 30.00, "cb": false, "productid": 5 }
    ];

這裡需要注意的是這兩種資料結構，如果想要展示明細，那麼沒個單元格對應的值是一個{}物件，資料格式如：{"產品名稱":"四川一日行旅遊券","描述":"小編忙，沒時間維護"},這裡的“產品名稱“將作為明細列名稱；如果只需要展示名稱不要明細，直接賦值成值就行了

其次，來看下可配置的引數說明，如下程式碼：

var defOption = {
        id: "",             //要顯示外掛內容的div的Id            (必需)
        header: header,     //json格式列表頭                     (必需)
        data: data,         //json格式資料                       (必需)
        cbAllName: "cbAll",  //全選框Name
        cbName: "cb",        //每行選框Name
        tableId: "table" + new Date().getTime(),   //tableId    預設時間格式

        isTotal: false, //是否彙總                              （預設不彙總）
        outTotalCols: "",  //不彙總列                            多個格式如：1,2
        isCombine: false, //是否合併單元格                      （預設不合並）
        outCombineCols: "", //不合並單元格列                     多個格式如：1,2
        back: function () {

            console.log("這裡是回撥");
        }   //回撥函式
    };

然後，程式碼邏輯步奏為：初始化列表頭->初始化每行內容（每行載入的時候需要根據列表頭部的type來判斷應該載入什麼html元素控制元件並且可以繫結初始化狀態值）->全選繫結事件->繫結某個需要展示明細的單元格，動態載入明細內容資料->執行彙總->執行合併單元格（此處需要注意的是，不需要先彙總在合併單元格，如果順序發生變化，彙總的格式將異常）->執行回撥響應函式；這個就是主要的程式碼邏輯；

 

. 獲取table外掛資料，並提交給後臺

首先，table元素展示出來後，如果作為使用者提交的介面，還需要能獲取出使用者選擇的資料，並提交給後臺，我這裡列舉一個簡單的獲取列子，咋們可以直接在回撥函式back中寫提交表單的程式碼如：

var tbChoice = new tb_choice({
                id: "divShow",
                data: data,
                header: header,
                outCols: "0,4,6",
                isTotal: false,
                back: function () {

                    $("#btnSave").click(function () {

                        var cbs = $("input[name='cb'][type='checkbox']:checked");
                        if (cbs.length <= 0) { alert("請選擇保險"); return; }

                        var param = [];
                        $.each(cbs, function (index, item) {
                            var tr = $(this).parent().parent();
                            var id = $(tr).find("[name='id']").val();
                            var num = $(tr).find("[name='num'] option:selected").val();
                            var productId = $(tr).find("[name='productid']").val();

                            param.push({ id: id, num: num, productId: productId });
                        });

                        //請求後臺
                        $.post("Add.aspx", { op: orderId, t: "save", param: JSON.stringify(param) }, function (result01) {

                            var resultJson = JSON.parse(result01);
                            console.log(resultJson);
                            alert(resultJson.msg);
                            if (resultJson.status) {

                                location.reload(true);
                            }
                        });
                    });
                }
            });

我這裡直接在回撥back函式裡面寫ajax提交給後臺資料，這裡使用遍歷table的每行需要的資料組合成json格式傳送給後臺，用起來還是挺簡單的呢，因為獲取的使用通過name屬性來獲取元素的值，而name對應的都是最開始列表頭json資料的name，大家可以對比下

 

. 外掛原始碼及幫助文件

首先，外掛的原始碼待會在結尾全部發布，裡面分別有彙總方法，合併列方法，和一個String的擴充套件方法大家可以分開使用，朋友們有興趣的也可以看幫助文件，根據文件上面的頁面列子下載程式碼也行；更多的展示效果可以來這裡看文件table-shenniu；原始碼如下：

/// <reference path="../jquery-1.10.2.min.js" />


var tb_total = function () {

    return {

        //彙總
        //tableId:table元素的Id
        //outCols:排除不合並的列，多個使用‘，’隔開
        sumTab: function (tableId, outCols) {

            if (!outCols) { outCols = ""; }

            var rows = $("#" + tableId + " tr");

            var colLen = $(rows).eq(1).find("td[class!='hide']").length;
            var totalVal = [];
            for (var i = 0; i < colLen; i++) {
                totalVal.push("0");
            }
            $.each(rows, function (i, item) {

                var tds = $(item).find("td[class!='hide']");
                var crossVal = "";
                $(tds).each(function (i_td, item_td) {

                    var hVal = $(item_td).html();

                    if (isNaN(hVal)) {
                        //非數字
                        totalVal[i_td] = "";
                    } else {
                        if (totalVal[i_td].length > 0) {

                            //數字
                            totalVal[i_td] = (parseFloat(totalVal[i_td]) + parseFloat(hVal)).toFixed(2);
                        } else { crossVal = hVal; }
                    }
                });
            });

            var totalHtml = [];
            totalHtml.push("<tr style='background-color:#EBF0EE'>");
            for (var i in totalVal) {

                totalHtml.push("<td align=\"center\">");

                if (i == 0) {
                    totalHtml.push("<font style='color:red'>合計</font>");
                    totalHtml.push("</td>");
                    continue;
                } else if (outCols.length > 0) {

                    //表示存在排除列
                    if (("," + outCols + ",").indexOf("," + i + ",") > -1) {
                        totalHtml.push("");
                        totalHtml.push("</td>");
                        continue;
                    }
                }
                totalHtml.push(totalVal[i]);
                totalHtml.push("</td>");
            }
            totalHtml.push("</tr>");

            $("#" + tableId).append(totalHtml.join(''));
        },

        //合併列
        //tableId:table元素的Id
        //outCols:排除不合並的列，多個使用‘，’隔開
        uniteTab: function (tableId, col, outCols) {

            if (!outCols) { outCols = ""; }
            //col-- 需要合併單元格的列 1開始
            var colLength = col;
            var tb = document.getElementById(tableId);
            if (!tb) { return; }
            tb.style.display = '';
            var i = 0;
            var j = 0;
            var rowCount = tb.rows.length; //   行數 
            var colCount = tb.rows[0].cells.length; //   列數  
            var obj1 = null;
            var obj2 = null;
            //為每個單元格命名  
            for (i = 0; i < rowCount; i++) {
                for (j = 0; j < colCount; j++) {
                    if (!tb.rows[i].cells[j]) { continue; }
                    tb.rows[i].cells[j].id = tableId + "tb__" + i.toString() + "_" + j.toString();
                }
            }
            //合併行  
            for (i = 0; i < colCount; i++) {
                if (i == colLength) break;
                //排除不合並列
                if (("," + outCols + ",").indexOf("," + i + ",") > -1) { continue; }

                obj1 = document.getElementById(tableId + "tb__0_" + i.toString())
                for (j = 1; j < rowCount; j++) {
                    obj2 = document.getElementById(tableId + "tb__" + j.toString() + "_" + i.toString());
                    if (obj1.innerText == obj2.innerText) {
                        obj1.rowSpan++;
                        obj2.parentNode.removeChild(obj2);
                    } else {
                        obj1 = document.getElementById(tableId + "tb__" + j.toString() + "_" + i.toString());
                    }
                }
            }

            //合併列
            for (i = 0; i < rowCount; i++) {
                if (tb.rows[i] != null) {
                    colCount = tb.rows[i].cells.length;
                    obj1 = document.getElementById(tb.rows[i].cells[0].id);
                    if (obj1 != null) {
                        for (j = 1; j < colCount; j++) {
                            if (j >= colLength) break;
                            if (obj1.colSpan >= colLength) break;

                            if (tb.rows[i].cells[j]) {
                                obj2 = document.getElementById(tb.rows[i].cells[j].id);

                                if (obj1.innerText == obj2.innerText) {
                                    obj1.colSpan++;
                                    obj2.parentNode.removeChild(obj2);
                                    j = j - 1;
                                }
                                else {
                                    obj1 = obj2;
                                    j = j + obj1.rowSpan;
                                }
                            }
                        }
                    }
                }
            }

        }
    }
}

//table 表外掛，要求bootstrap.min.css樣式
var tb_choice = function (option) {

    //測試用例-列表頭
    var header = [

                    {
                        "title": "產品名稱",
                        "name": "product",
                        "type": "label"
                    },
                    {
                        "title": "銷售價",
                        "name": "sale",
                        "type": "label",
                    },
                    {
                        "title": "份數",
                        "name": "num",
                        "type": "select",  //如果是下拉框，這裡需要初始值val
                        "val": [
                                    {
                                        "text": 1,
                                        "val": 1
                                    },
                                    {
                                        "text": 2,
                                        "val": 2
                                    },
                                    {
                                        "text": 3,
                                        "val": 3
                                    }
                        ]
                    },
                    {
                        "title": "總額",
                        "name": "amount",
                        "type": "label"
                    },
                    {
                        "title": "<input type='checkbox'  name='cbAll' style='border: 0px; width: 20px; height: 20px;'/>",   //如果是全選選擇框，這裡直接寫html元素
                        "name": "cb",
                        "type": "checkbox"
                    },
                    {
                        "title": "保險Id",
                        "name": "productid",
                        "type": "hidden"
                    }
    ];

    //測試用例-沒行資料
    var data = [
          { "product": "神鵰俠侶電影票", "sale": 30.00, "num": 1, "amount": 30.00, "cb": false, "productid": 2 },
          { "product": "搖搖樂門票", "sale": 30.00, "num": 2, "amount": 60.00, "cb": false, "productid": 1 },
          { "product": "神鵰俠侶電影票", "sale": 30.00, "num": 1, "amount": 30.00, "cb": true, "productid": 2 },
          { "product": "搖搖樂門票", "sale": 30.00, "num": 3, "amount": 90.00, "cb": false, "productid": 1 }
    ];

    data = [
       { "product": { "產品名稱": "神鵰俠侶電影票", "描述": "神鵰俠侶電影票，中秋節大放送，情侶們快來啊，只需一塊錢", "銷售價    ": 30.00 }, "sale": 30.00, "num": 1, "amount": 30.00, "cb": false, "productid": 1 },
       { "product": { "產品名稱": "搖搖樂門票", "描述": "搖搖樂門票，中秋節大放送，情侶們快來啊，只需一塊錢", "銷售價    ": 30.00 }, "sale": 30.00, "num": 2, "amount": 60.00, "cb": false, "productid": 2 },
       { "product": { "產品名稱": "楊過和小龍女電影票", "描述": "楊過和小龍女電影票，中秋節大放送，情侶們快來啊，只需一塊錢", "銷售價    ": 30.00 }, "sale": 30.00, "num": 1, "amount": 30.00, "cb": true, "productid": 3 },
       { "product": { "產品名稱": "四川一日行旅遊券", "描述": "小編忙，沒時間維護" }, "sale": 30.00, "num": 3, "amount": 90.00, "cb": false, "productid": 4 },
       { "product": { "產品名稱": "四川一日行旅遊券", "描述": "小編忙，沒時間維護" }, "sale": 30.00, "num": 1, "amount": 30.00, "cb": false, "productid": 5 }
    ];

    var defOption = {
        id: "",             //要顯示外掛內容的div的Id            (必需)
        header: header,     //json格式列表頭                     (必需)
        data: data,         //json格式資料                       (必需)
        cbAllName: "cbAll",  //全選框Name
        cbName: "cb",        //每行選框Name
        tableId: "table" + new Date().getTime(),   //tableId    預設時間格式

        isTotal: false, //是否彙總                              （預設不彙總）
        outTotalCols: "",  //不彙總列                            多個格式如：1,2
        isCombine: false, //是否合併單元格                      （預設不合並）
        outCombineCols: "", //不合並單元格列                     多個格式如：1,2
        back: function () {

            console.log("這裡是回撥");
        }   //回撥函式
    };

    $.extend(defOption, option);

    var tbArr = [];
    tbArr.push('<table id="{0}" class="table table-hover table-bordered text-center ">'.format([defOption.tableId]));

    //頭部
    tbArr.push('<thead><tr>');
    $.each(defOption.header, function (i, item) {
        tbArr.push("<th {1}>{0}</th>".format([item.title, (item.type == "hidden" ? "class='text-center hide'" : "class='text-center'")]));
    });
    tbArr.push('</tr></thead>');

    //內容
    $.each(defOption.data, function (i, item) {

        tbArr.push("<tr >");
        $.each(item, function (key, val) {

            var htype = [];
            $.each(defOption.header, function (_, headItem) {

                if (headItem.name == key) {

                    switch (headItem.type) {
                        case "label":
                            if (typeof (val) == "object") {

                                //只迴圈一次
                                $.each(val, function (valKey, valItem) {
                                    htype.push("<label data-item='{1}' style=' cursor:pointer'>{0}</label>".format([valItem, JSON.stringify(val)]));
                                    return false;
                                });
                            } else {
                                htype.push(val);
                            }
                            break;
                        case "select":
                            htype.push("<select name='{0}'>".format([key]));
                            $.each(headItem.val, function (s_i, s_item) {
                                htype.push("<option value='{1}' {2}>{0}</option>".format([s_item.text, s_item.val, (s_item.val == val ? "selected='selected'" : "")]));
                            });
                            htype.push("</select>");
                            break;
                        case "text":
                            htype.push("<input name='{1}' type='text' class='form-control' value='{0}'/>".format([val, key]));
                            break;
                        case "checkbox":
                            htype.push("<input type='checkbox'  name='{1}' {2} value='{0}'  style='border: 0px; width: 20px; height: 20px;'/>".format([val, key, val ? "checked='checked'" : ""]));
                            break;
                        case "hidden":
                            htype.push("<input type='hidden' name='{1}' value='{0}'/>".format([val, key]));
                            break;
                    }
                    tbArr.push("<td style='font-weight: bold;' {1}>{0}</td>".format([htype.join(''), (headItem.type == "hidden" ? "class='hide'" : "class='text-center-vertical'")]));
                    return;
                }
            });
        });
        tbArr.push("</tr>");
    });
    tbArr.push('</table>');

    $("#" + option.id).html(tbArr.join(''));

    //全選繫結
    $("input[type='checkbox'][name='" + defOption.cbAllName + "']").click(function () {

        var status = $(this).prop("checked");
        if (status) {
            $("input[type='checkbox'][name='" + defOption.cbName + "']").prop({ "checked": true });
        } else {
            $("input[type='checkbox'][name='" + defOption.cbName + "']").prop({ "checked": false });
        }
    });
    //label明細展示繫結
    $("label[data-item]").click(function () {
        var dataItem = $(this).attr("data-item");
        if (dataItem) {
            var tr = $(this).parent().parent();
            var nextTr = tr.next();
            var nextName = nextTr.attr("data-item");
            if (!nextName) {

                var data = JSON.parse(dataItem);
                var childTab = [];
                childTab.push('<table class="table table-bordered">');
                var childHeader = "";
                var childContent = "";
                $.each(data, function (key, item) {
                    childHeader += "<td>{0}</td>".format([key]);
                    childContent += "<td>{0}</td>".format([item]);
                });
                childTab.push("<tr>{0}</tr>".format([childHeader]));
                childTab.push("<tr>{0}</tr>".format([childContent]));
                childTab.push("</table>");

                var colsLen = tr.find("td[class!='hide']").length;
                var appendDes = $("<tr data-item='{2}'><td colspan='{1}' class='text-left'>{0}</td></tr>".format([childTab.join(''), colsLen, dataItem]));
                tr.after(appendDes);
            } else {
                nextTr.remove();
            }
        }
    });

    //單元格操作
    var tbTotal = new tb_total();
    //彙總
    if (defOption.isTotal) { tbTotal.sumTab(defOption.tableId, defOption.outTotalCols); }
    //合併單元格
    if (defOption.isCombine) { tbTotal.uniteTab(defOption.tableId, 2, defOption.outCombineCols); }

    //執行回撥響應函式
    defOption.back();
}

String.prototype.format = function (arrVal) {

    if (!Array.isArray(arrVal)) { return this; }

    var str = this;
    for (var i = 0; i < arrVal.length; i++) {

        str = str.replace("{" + i + "}", arrVal[i]);
    }
    return str;
}