創建幾個常用table展示方式插件

来源:http://www.cnblogs.com/wangrudong003/archive/2016/09/14/5873074.html
-Advertisement-
Play Games

這次和大家分享的是自己寫的一個table常用幾種展示格式的js插件取名為(table-shenniu)，樣式使用的是bootstrap.min.css，還需要引用jquery.min.js包，這個插件由來的目的是項目中需要一個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數據：

 1 //測試用例-列表頭
 2     var header = [
 3 
 4                     {
 5                         "title": "產品名稱",
 6                         "name": "product",
 7                         "type": "label"
 8                     },
 9                     {
10                         "title": "銷售價",
11                         "name": "sale",
12                         "type": "label",
13                     },
14                     {
15                         "title": "份數",
16                         "name": "num",
17                         "type": "select",  //如果是下拉框，這裡需要初始值val
18                         "val": [
19                                     {
20                                         "text": 1,
21                                         "val": 1
22                                     },
23                                     {
24                                         "text": 2,
25                                         "val": 2
26                                     },
27                                     {
28                                         "text": 3,
29                                         "val": 3
30                                     }
31                         ]
32                     },
33                     {
34                         "title": "總額",
35                         "name": "amount",
36                         "type": "label"
37                     },
38                     {
39                         "title": "<input type='checkbox'  name='cbAll' style='border: 0px; width: 20px; height: 20px;'/>",   //如果是全選選擇框，這裡直接寫html元素
40                         "name": "cb",
41                         "type": "checkbox"
42                     },
43                     {
44                         "title": "保險Id",
45                         "name": "productid",
46                         "type": "hidden"
47                     }
48     ];

列表頭數據註意點在於：

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集合數據格式：

 1 //測試用例-沒行數據
 2     var data = [
 3           { "product": "神雕俠侶電影票", "sale": 30.00, "num": 1, "amount": 30.00, "cb": false, "productid": 2 },
 4           { "product": "搖搖樂門票", "sale": 30.00, "num": 2, "amount": 60.00, "cb": false, "productid": 1 },
 5           { "product": "神雕俠侶電影票", "sale": 30.00, "num": 1, "amount": 30.00, "cb": true, "productid": 2 },
 6           { "product": "搖搖樂門票", "sale": 30.00, "num": 3, "amount": 90.00, "cb": false, "productid": 1 }
 7     ];
 8 
 9     data = [
10        { "product": { "產品名稱": "神雕俠侶電影票", "描述": "神雕俠侶電影票，中秋節大放送，情侶們快來啊，只需一塊錢", "銷售價    ": 30.00 }, "sale": 30.00, "num": 1, "amount": 30.00, "cb": false, "productid": 1 },
11        { "product": { "產品名稱": "搖搖樂門票", "描述": "搖搖樂門票，中秋節大放送，情侶們快來啊，只需一塊錢", "銷售價    ": 30.00 }, "sale": 30.00, "num": 2, "amount": 60.00, "cb": false, "productid": 2 },
12        { "product": { "產品名稱": "楊過和小龍女電影票", "描述": "楊過和小龍女電影票，中秋節大放送，情侶們快來啊，只需一塊錢", "銷售價    ": 30.00 }, "sale": 30.00, "num": 1, "amount": 30.00, "cb": true, "productid": 3 },
13        { "product": { "產品名稱": "四川一日行旅游券", "描述": "小編忙，沒時間維護" }, "sale": 30.00, "num": 3, "amount": 90.00, "cb": false, "productid": 4 },
14        { "product": { "產品名稱": "四川一日行旅游券", "描述": "小編忙，沒時間維護" }, "sale": 30.00, "num": 1, "amount": 30.00, "cb": false, "productid": 5 }
15     ];

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

其次，來看下可配置的參數說明，如下代碼：

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中寫提交表單的代碼如：

 1 var tbChoice = new tb_choice({
 2                 id: "divShow",
 3                 data: data,
 4                 header: header,
 5                 outCols: "0,4,6",
 6                 isTotal: false,
 7                 back: function () {
 8 
 9                     $("#btnSave").click(function () {
10 
11                         var cbs = $("input[name='cb'][type='checkbox']:checked");
12                         if (cbs.length <= 0) { alert("請選擇保險"); return; }
13 
14                         var param = [];
15                         $.each(cbs, function (index, item) {
16                             var tr = $(this).parent().parent();
17                             var id = $(tr).find("[name='id']").val();
18                             var num = $(tr).find("[name='num'] option:selected").val();
19                             var productId = $(tr).find("[name='productid']").val();
20 
21                             param.push({ id: id, num: num, productId: productId });
22                         });
23 
24                         //請求後臺
25                         $.post("Add.aspx", { op: orderId, t: "save", param: JSON.stringify(param) }, function (result01) {
26 
27                             var resultJson = JSON.parse(result01);
28                             console.log(resultJson);
29                             alert(resultJson.msg);
30                             if (resultJson.status) {
31 
32                                 location.reload(true);
33                             }
34                         });
35                     });
36                 }
37             });

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

 

. 插件源碼及幫助文檔

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

  1 /// <reference path="../jquery-1.10.2.min.js" />
  2 
  3 
  4 var tb_total = function () {
  5 
  6     return {
  7 
  8         //彙總
  9         //tableId:table元素的Id
 10         //outCols:排除不合併的列，多個使用‘，’隔開
 11         sumTab: function (tableId, outCols) {
 12 
 13             if (!outCols) { outCols = ""; }
 14 
 15             var rows = $("#" + tableId + " tr");
 16 
 17             var colLen = $(rows).eq(1).find("td[class!='hide']").length;
 18             var totalVal = [];
 19             for (var i = 0; i < colLen; i++) {
 20                 totalVal.push("0");
 21             }
 22             $.each(rows, function (i, item) {
 23 
 24                 var tds = $(item).find("td[class!='hide']");
 25                 var crossVal = "";
 26                 $(tds).each(function (i_td, item_td) {
 27 
 28                     var hVal = $(item_td).html();
 29 
 30                     if (isNaN(hVal)) {
 31                         //非數字
 32                         totalVal[i_td] = "";
 33                     } else {
 34                         if (totalVal[i_td].length > 0) {
 35 
 36                             //數字
 37                             totalVal[i_td] = (parseFloat(totalVal[i_td]) + parseFloat(hVal)).toFixed(2);
 38                         } else { crossVal = hVal; }
 39                     }
 40                 });
 41             });
 42 
 43             var totalHtml = [];
 44             totalHtml.push("<tr style='background-color:#EBF0EE'>");
 45             for (var i in totalVal) {
 46 
 47                 totalHtml.push("<td align=\"center\">");
 48 
 49                 if (i == 0) {
 50                     totalHtml.push("<font style='color:red'>合計</font>");
 51                     totalHtml.push("</td>");
 52                     continue;
 53                 } else if (outCols.length > 0) {
 54 
 55                     //表示存在排除列
 56                     if (("," + outCols + ",").indexOf("," + i + ",") > -1) {
 57                         totalHtml.push("");
 58                         totalHtml.push("</td>");
 59                         continue;
 60                     }
 61                 }
 62                 totalHtml.push(totalVal[i]);
 63                 totalHtml.push("</td>");
 64             }
 65             totalHtml.push("</tr>");
 66 
 67             $("#" + tableId).append(totalHtml.join(''));
 68         },
 69 
 70         //合併列
 71         //tableId:table元素的Id
 72         //outCols:排除不合併的列，多個使用‘，’隔開
 73         uniteTab: function (tableId, col, outCols) {
 74 
 75             if (!outCols) { outCols = ""; }
 76             //col-- 需要合併單元格的列 1開始
 77             var colLength = col;
 78             var tb = document.getElementById(tableId);
 79             if (!tb) { return; }
 80             tb.style.display = '';
 81             var i = 0;
 82             var j = 0;
 83             var rowCount = tb.rows.length; //   行數 
 84             var colCount = tb.rows[0].cells.length; //   列數  
 85             var obj1 = null;
 86             var obj2 = null;
 87             //為每個單元格命名  
 88             for (i = 0; i < rowCount; i++) {
 89                 for (j = 0; j < colCount; j++) {
 90                     if (!tb.rows[i].cells[j]) { continue; }
 91                     tb.rows[i].cells[j].id = tableId + "tb__" + i.toString() + "_" + j.toString();
 92                 }
 93             }
 94             //合併行  
 95             for (i = 0; i < colCount; i++) {
 96                 if (i == colLength) break;
 97                 //排除不合併列
 98                 if (("," + outCols + ",").indexOf("," + i + ",") > -1) { continue; }
 99 
100                 obj1 = document.getElementById(tableId + "tb__0_" + i.toString())
101                 for (j = 1; j < rowCount; j++) {
102                     obj2 = document.getElementById(tableId + "tb__" + j.toString() + "_" + i.toString());
103                     if (obj1.innerText == obj2.innerText) {
104                         obj1.rowSpan++;
105                         obj2.parentNode.removeChild(obj2);
106                     } else {
107                         obj1 = document.getElementById(tableId + "tb__" + j.toString() + "_" + i.toString());
108                     }
109                 }
110             }
111 
112             //合併列
113             for (i = 0; i < rowCount; i++) {
114                 if (tb.rows[i] != null) {
115                     colCount = tb.rows[i].cells.length;
116                     obj1 = document.getElementById(tb.rows[i].cells[0].id);
117                     if (obj1 != null) {
118                         for (j = 1; j < colCount; j++) {
119                             if (j >= colLength) break;
120                             if (obj1.colSpan >= colLength) break;
121 
122                             if (tb.rows[i].cells[j]) {
123                                 obj2 = document.getElementById(tb.rows[i].cells[j].id);
124 
125                                 if (obj1.innerText == obj2.innerText) {
126                                     obj1.colSpan++;
127                                     obj2.parentNode.removeChild(obj2);
128                                     j = j - 1;
129                                 }
130                                 else {
131                                     obj1 = obj2;
132                                     j = j + obj1.rowSpan;
133                                 }
134                             }
135                         }
136                     }
137                 }
138             }
139 
140         }
141     }
142 }
143 
144 //table 表插件，要求bootstrap.min.css樣式
145 var tb_choice = function (option) {
146 
147     //測試用例-列表頭
148     var header = [
149 
150                     {
151                         "title": "
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • javascript_core_01
    1、數據類型轉換： ①隱式轉換：程式根據需要，自動轉化數據類型； ②強制轉換：主動調用函數執行轉換； 2、字元串強制轉換： ①x.toString（）：不能轉換null和undefined； ②String（x）：萬能； 3、數字類型強制轉換： ①Number（x）：轉換為數字類型；、 ②parse ...
  • 深入理解表單腳本系列第一篇——表單對象
    × 目錄 [1]表單屬性 [2]表單事件 [3]表單方法 前面的話 javascript最初的一個應用就是分擔伺服器處理表單的責任，打破處處依賴伺服器的局面。儘管目前的web和javascript已經有了長足的發展，但web表單的變化並不明顯。由於web表單沒有為許多常見任務提供現成的解決方法，很多 ...
  • CSS3選擇器的研究
    屬性選擇器 [title]:選擇帶有title屬性的元素 [title='hello']:選擇屬性是title並且值是hello的元素 [title~='hello']:選擇屬性是title並且部分值是hello的元素，hello需要是單獨的值，以空格分開 [title*='hello']:選擇屬性 ...
  • javascript常見錯誤
    初學Javascript，每天總是被很小的問題折磨半天，今晚就有好幾個小問題。 第一：全部使用雙引號造成匹配錯誤 改行一直報錯誤：unexpected toke “}” 檢查半天也沒有發現錯誤，對照發現視頻上是使用單引號 改成單引號後錯誤總算消除，困擾我一夜晚。。附上鏈接http://www.cnb ...
  • javascript_basic_04
    1、DOM：文檔對象模型，Document Object Model； 2、BOM：瀏覽器對象模型，Browser Object Model； 3、DOM組成：核心DOM，XML DOM，HTML DOM； 4、節點樹： ①document node：文檔節點，document為根節點；②eleme ...
  • html有序列表，無序列表與定義列表
    有序列表 無序列表 定義列表 定義列表由 定義條件(definition term) 和 定義描述(definition description) 構成 ``標記後面添加要解釋的名詞 ``標記後面添加名詞的具體解釋 慄子： 輸出效果： ...
  • html標題，段落，換行，水平線，特殊字元
    標題 `` 對齊方式有left,center,right三種，預設表示left 段落 段落標記的結束標記''可以省略，一個新的段落開始標記就意味著上一個段落的結束 換行 不換行 當一段很長的時候，瀏覽器一般會自動進行換行處理，如果不希望瀏覽器這麼做，可以使用``標記 水平線 使用``可以在網頁中插入 ...
  • 深入理解DOM事件類型系列第三篇——變動事件
    [1]刪除節點 [2]插入節點 [3]特性節點 [4]文本節點 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類