jquery插入複雜表格，合併行列

時間 2019-11-17

標籤 jquery 插入複雜表格合併行列欄目 JQuery 简体版

原文原文鏈接

此方法爲我的測試所寫，針對各類兼容性問題還未測試，初寫的目的是easyui複雜表頭有些缺陷，好比某個表頭合併兩列，javascript

在easyui中這樣操做沒法綁定兩個值或者說我沒找到再或者能夠作個隱藏數據列，不過閒來無事本身寫了寫jquery，下面進入正題css

先展現下效果html

指標性選擇爲表頭的隱藏用（客戶要求可自定義表頭，在extjs中表單自帶這個功能,不過複雜表頭好像也不支持，單行表頭判斷條件少的多，比較好實現）java

從圖片中能夠看到複雜表頭，數據自動合併列，某列比值變紅，自定義變紅等功能實現，下面逐步展現代碼jquery

  1 <div id="Zj" style="width: auto;">
  2         <asp:CheckBoxList ID="ZjCheck" runat="server" Font-Size="Small">
  3             <asp:ListItem Value="30MW" Text="30MW"></asp:ListItem>
  4             <asp:ListItem Value="60MW" Text="60MW"></asp:ListItem>
  5             <asp:ListItem Value="20MW" Text="20MW"></asp:ListItem>
  6             <asp:ListItem Value="其餘" Text="其餘"></asp:ListItem>
  7         </asp:CheckBoxList>
  8     </div>
  9     <div id="Tx" style="width: auto;">
 10         <asp:CheckBoxList ID="TxCheck" runat="server" Font-Size="Small">
 11             <asp:ListItem Value="溼法脫硫" Text="溼法脫硫"></asp:ListItem>
 12             <asp:ListItem Value="60MW" Text="幹法脫硫"></asp:ListItem>
 13             <asp:ListItem Value="20MW" Text="循環流化牀"></asp:ListItem>
 14         </asp:CheckBoxList>
 15     </div>
 16     <div id="TL" style="width: auto;">
 17         <asp:CheckBoxList ID="TLCheck" runat="server" Font-Size="Small">
 18             <asp:ListItem Value="溼法脫硫" Text="SCR"></asp:ListItem>
 19             <asp:ListItem Value="60MW" Text="LNB+SCR"></asp:ListItem>
 20         </asp:CheckBoxList>
 21     </div>
 22     <div id="TreeHeaddiv" style="width: 240px; left: 830px;">
 23         <ul id="TreeHead" class="ztree">
 24         </ul>
 25     </div>
 26    
 27      
 28         <div id="panel" class="easyui-panel" title="查詢條件" style="width: 1100px; padding: 10px; margin-bottom:20px;">
 29             <div style="float: left">
 30                 <label id="Label1" runat="server" for="dateD">
 31                     起始時間：</label>
 32                 <input type="text" id="dateSatar" style="text-align: center;" runat="server" onfocus="WdatePicker({skin:'whyGreen',maxDate:'#F{$dp.$D(\'dateEdd\')}',dateFmt:'yyyy-MM-dd'})"
 33                     class="Wdate" /> 至
 34                     <input type="text" id="dateEdd" style="text-align: center;" runat="server" onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d', minDate:'#F{$dp.$D(\'dateSatar\')}',dateFmt:'yyyy-MM-dd'})"
 35                     class="Wdate" />
 36                 <a href="javascript:void(0)" id="btnJZ" class="easyui-linkbutton" onclick="showMenu('btnJZ','Zj')">
 37                     機組容量</a> <a href="javascript:void(0)" id="btnTL" class="easyui-linkbutton" onclick="showMenu('btnTL','TL')">
 38                         脫硫方式</a> <a href="javascript:void(0)" id="btnTX" class="easyui-linkbutton" onclick="showMenu('btnTX','Tx')">
 39                             脫銷方式</a> <a href="javascript:void(0)" id="btnItem" class="easyui-linkbutton" onclick="showMenu('btnItem','TreeHeaddiv')">
 40                                 指標項選擇</a>
 41             </div>
 42             <div style="float: right;">
 43                 <a href="javascript:void(0)" id="Serach" class="easyui-linkbutton">查詢</a>
 44             </div>
 45         </div>
 46         <div style="width:1100px">
 47         <table id="table">
 48             <thead id="thead">
 49                 <tr>
 50                     <td rowspan="3" style=" width:40px;">
 51                         序號
 52                     </td>
 53                     <td rowspan="3" style=" width:132px;">
 54                         二級公司/機組名稱
 55                     </td>
 56                     <td rowspan="2">
 57                         所屬火電機組臺數
 58                     </td>
 59                     <td rowspan="2">
 60                         所屬火電機組容量
 61                     </td>
 62                     <td colspan="6" style=" width:390px;">
 63                         脫硫系統運行狀況
 64                     </td>
 65                      <td colspan="6" style=" width:390px;">
 66                         脫硝系統運行狀況
 67                     </td>
 68                 </tr>
 69                 <tr>
 70                     <td  >
 71                         投運率
 72                     </td>
 73                     <td>
 74                         綜合效率
 75                     </td>
 76                     <td>
 77                         停運次數
 78                     </td>
 79                     <td>
 80                         停運臺均次
 81                     </td>
 82                     <td>
 83                         停運時間
 84                     </td>
 85                     <td>
 86                         停運臺均時間
 87                     </td>
 88                      <td >
 89                         投運率
 90                     </td>
 91                     <td>
 92                         綜合效率
 93                     </td>
 94                     <td>
 95                         停運次數
 96                     </td>
 97                     <td>
 98                         停運臺均次
 99                     </td>
100                     <td>
101                         停運時間
102                     </td>
103                     <td>
104                         停運臺均時間
105                     </td>
106                 </tr>
107                 <tr class="lasttr">
108                     <td>
109                         臺
110                     </td>
111                     <td>
112                         MW
113                     </td>
114                     <td>
115                         %
116                     </td>
117                     <td>
118                         %
119                     </td>
120                     <td>
121                         次
122                     </td>
123                     <td>
124                         次/臺
125                     </td>
126                     <td>
127                         小時
128                     </td>
129                     <td>
130                         小時/臺
131                     </td>
132                      <td>
133                         %
134                     </td>
135                     <td>
136                         %
137                     </td>
138                     <td>
139                         次
140                     </td>
141                     <td>
142                         次/臺
143                     </td>
144                     <td>
145                         小時
146                     </td>
147                     <td>
148                         小時/臺
149                     </td>
150                 </tr>
151             </thead>
152 
153         </table>
154         </div>
155     </div>

web頁面佈局

指標性按鈕針對的tree的綁定web

var Theadsetting = {
    check: {
        enable: true
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {

        onCheck: onCheck
    }

};

TreeSetting

 1   var zNodes = [
 2            { id: 1, pId: 0, name: "全選", open: true },
 3         ///脫硫狀況
 4             {id: "SO", pId: 1, name: "脫硫系統運行狀況", open: true },
 5             { id: "4", pId: "SO", name: "投運率" },
 6             { id: "5", pId: "SO", name: "綜合效率" },
 7             { id: "6", pId: "SO", name: "停運次數" },
 8             { id: "7", pId: "SO", name: "停運臺均次" },
 9             { id: "8", pId: "SO", name: "停運時間" },
10             { id: "9", pId: "SO", name: "停運臺均時間" },
11 
12 
13         ///脫硝系統運行狀況
14            {id: "No", pId: 1, name: "脫硝系統運行狀況", open: true },
15             { id: "10", pId: "No", name: "投運率" },
16             { id: "11", pId: "No", name: "綜合效率" },
17             { id: "12", pId: "No", name: "停運次數" },
18             { id: "13", pId: "No", name: "停運臺均次" },
19             { id: "14", pId: "No", name: "停運時間" },
20             { id: "15", pId: "No", name: "停運臺均時間" }
21             ];

treeNode

//表頭節點點擊事件       
function onCheck(e, treeId, treeNode) {


    ItemHide(GetMultItemValues("TreeHead"));
}

treeNode點擊事件

 //隱藏表格
        function ItemHide(NodeIs) {

            $("#thead tr").eq(0).find("td").eq(4).attr("colspan", 6);
            $("#thead tr").eq(0).find("td").eq(4).css("width", 390);
            $("#thead tr").eq(0).find("td").eq(5).attr("colspan", 6);
            $("#thead tr").eq(0).find("td").eq(5).css("width", 390);
            $("#table tr  td").show();
            //            Merge();

            for (var i = 0; i < NodeIs.length; i++) {

                for (var j = 0; j < $("#thead tr").length; j++) {
                    if (j == 0) {

                        if (NodeIs[i] > 3 && NodeIs[i] <= 9) {
                            $("#thead tr").eq(0).find("td").eq(4).attr("colspan", $("#thead tr").eq(0).find("td").eq(4).attr("colspan") - 1);
                            $("#thead tr").eq(0).find("td").eq(4).css("width", parseInt($("#thead tr").eq(0).find("td").eq(4).css("width")) - 65);
                        } else {
                            $("#thead tr").eq(0).find("td").eq(5).attr("colspan", $("#thead tr").eq(0).find("td").eq(5).attr("colspan") - 1);
                            $("#thead tr").eq(0).find("td").eq(5).css("width", parseInt($("#thead tr").eq(0).find("td").eq(5).css("width")) - 65);
                        }

                        if ($("#thead tr").eq(0).find("td").eq(4).attr("colspan") == 0) {
                            $("#thead tr").eq(0).find("td").eq(4).hide();
                        }
                        if ($("#thead tr").eq(0).find("td").eq(5).attr("colspan") == 0) {
                            $("#thead tr").eq(0).find("td").eq(5).hide();
                        }

                    } else if (j == 1) {
                        $("#thead tr").eq(j).find("td").eq(NodeIs[i] - 4).hide();
                    } else {
                        $("#thead tr").eq(j).find("td").eq(NodeIs[i] - 2).hide();
                    }

                }
                for (var j = 0; j < $("#tbody tr").length; j++) {
                    $("#tbody tr").eq(j).find("td").eq(NodeIs[i]).hide();
                }
            }
        }

隱藏表格的方法

tree綁定json

 $(function () {
            $.fn.zTree.init($("#TreeHead"), Theadsetting, zNodes);
        });

表格數據綁定app

 var json = [];

            //異地數據
            $.post("GetData.aspx", { name: "CHJ" }, function (data) {

                json = $.parseJSON(data);

                ///填充數據
                var str = "";

                for (var i = 0; i < json.length; i++) {
                    var tr = "<tr><td style='width:40px'>" + i + "</td>";
                    for (var j = 0; j < json[i].length; j++) {
                        tr += "<td>" + json[i][j] + "</td>";
                    }
                    tr += "</tr>";
                    str += tr;
                }
                $("#tbody").append(str);

                Merge();
                Bgcolcor();

                //tr點擊變色
                for (var i = 0; i <= $("#tbody tr").length; i++) {

                    var tr = $("#tbody tr").eq(i);
                    tr.click(function () {
                        $("#tbody tr").removeClass("click");
                        Bgcolcor();
                        $(this).removeClass("trtwobgcolor");
                        $(this).addClass("click");
                    })
                }

                //比對變紅
                for (var i = 0; i < $("#tbody tr").length; i++) {

                    var textone = $("#tbody tr").eq(i).find("td").eq(5).text();
                    var texttwo = $("#tbody tr").eq(i).find("td").eq(6).text();
                    if (parseFloat(textone) < parseFloat(texttwo)) {
                        var textone = $("#tbody tr").eq(i).find("td").eq(5).html("<b style='color:red;'>" + textone + "</b>");
                    }
                }

            });

post方法讀取數據

自動合併某列，能夠自定義參數，範例以下ide

function Merge() {
    var Initialvalue = 1;
    var InitBool = false;
    for (var i = 1; i <= $("#tbody tr").length; i++) {

        var one = $.trim($("#tbody tr").eq(i - 1).find("td").eq(1).text());
        var two = $.trim($("#tbody tr").eq(i).find("td").eq(1).text());
        if (one == two) {
            Initialvalue++;
            InitBool = false;

            $("#tbody tr").eq(i).find("td").eq(1).hide();

        } else {
            InitBool = true;

        }
        if (i == $("#tbody tr").length) {
            InitBool = true;

        }
        if (InitBool) {
            $("#tbody tr").eq(i - Initialvalue).find("td").eq(1).attr("rowspan", Initialvalue);
            Initialvalue = 1;
        }

    }
}

合併表格某列

單擊某行變色佈局

function Bgcolcor() {
    //單雙行變色
    var SingleTr = 0;
    for (var i = 0; i < $("#tbody tr").length; i++) {

        var tr = $("#tbody tr").eq(i);
        var rowspan = 0;
        for (var j = 0; j < tr.find("td").length; j++) {
            if (tr.find("td").eq(j).attr("rowspan") != undefined) {
                if (parseInt(tr.find("td").eq(j).attr("rowspan")) > rowspan) {
                    rowspan = parseInt(tr.find("td").eq(j).attr("rowspan"));
                }
            }
        }

        for (var m = 0; m <= rowspan; m++) {
            if (SingleTr % 2 != 0) {

                $("#tbody tr").eq(i + m).addClass("trtwobgcolor");
            }
        }

        for (var tempi = 1; tempi < rowspan; tempi++) {
            i++;
        }

        SingleTr++;
    }
}