JQuery implements table row and column freezing

JQuery implements table row and column freezing

This article is to share with you the special requirements of a customer in the project that was created in the past few days. After a long time of query, du Niang found the solution. Here we will share it with you, if you have any need, refer.

The customer needs to freeze the first few rows or the first few columns of table data, that is, to keep these rows/columns unchanged during scrolling. By searching for code online, refer to the existing code ideas, this allows you to freeze rows and columns.

Implementation principle:

Create multiple divs and cascade them with css. Each div is placed in the clone of the current table. For example, to freeze rows, create a div that stores the frozen row table and set the z-index and position attributes to make the frozen row table at the upper layer of the data table. Similarly, when column freezing is required, create a div that stores the frozen column table and place it on the upper layer of the data table. If you want to freeze rows and columns, apart from creating freeze rows and freeze column table Divs, you also need to create a fixed row and column table div in the upper left corner and place it at the top of all Divs.

Process Table rolling events. When the table is horizontally or vertically rolled, the corresponding frozen rows and frozen columns are also synchronized.

Handles html resize events and synchronously modifies the scrolling area width and height of a table.

The Code is as follows:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195

/* * Lock the header and Column * * Parameter Definition * Table-table element or table ID to be locked * FreezeRowNum-number of rows to be locked. If the row is not locked, set it to 0. * FreezeColumnNum-number of the first few columns to be locked. If the column is not locked, set it to 0. * Width-the scroll area width of the table * Height-the height of the scrolling area of the table */ Function freezeTable (table, freezeRowNum, freezeColumnNum, width, height ){ If (typeof (freezeRowNum) = 'string ') FreezeRowNum = parseInt (freezeRowNum)   If (typeof (freezeColumnNum) = 'string ') FreezeColumnNum = parseInt (freezeColumnNum)   Var tableId; If (typeof (table) = 'string '){ TableId = table; Table = $ ('#' + tableId ); } Else TableId = table. attr ('id ');   Var divTableLayout =$ ("#" + tableId + "_ tableLayout ");   If (divTableLayout. length! = 0 ){ DivTableLayout. before (table ); DivTableLayout. empty (); } Else { Table. after ("<div id = '" + tableId + "_ tableLayout 'style = 'overflow: hidden; height:" + height + "px; width: "+ width +" px; '> </div> ");   DivTableLayout = $ ("#" + tableId + "_ tableLayout "); }   Var html = ''; If (freezeRowNum> 0 & freezeColumnNum> 0) Html + = '<div id = "' + tableId + '_ tableFix" style = "padding: 0px;"> </div> ';   If (freezeRowNum> 0) Html + = '<div id = "' + tableId + '_ tableHead" style = "padding: 0px;"> </div> ';   If (freezeColumnNum> 0) Html + = '<div id = "' + tableId + '_ tableColumn" style = "padding: 0px;"> </div> ';   Html + = '<div id = "' + tableId + '_ tableData" style = "padding: 0px;"> </div> ';     $ (Html). appendTo ("#" + tableId + "_ tableLayout ");   Var divTableFix = freezeRowNum> 0 & freezeColumnNum> 0? $ ("#" + TableId + "_ tableFix"): null; Var divTableHead = freezeRowNum> 0? $ ("#" + TableId + "_ tableHead"): null; Var divTableColumn = freezeColumnNum> 0? $ ("#" + TableId + "_ tableColumn"): null; Var divTableData =$ ("#" + tableId + "_ tableData ");   DivTableData. append (table );   If (divTableFix! = Null ){ Var tableFixClone = table. clone (true ); TableFixClone. attr ("id", tableId + "_ tableFixClone "); DivTableFix. append (tableFixClone ); }   If (divTableHead! = Null ){ Var tableHeadClone = table. clone (true ); TableHeadClone. attr ("id", tableId + "_ tableHeadClone "); DivTableHead. append (tableHeadClone ); }   If (divTableColumn! = Null ){ Var tableColumnClone = table. clone (true ); TableColumnClone. attr ("id", tableId + "_ tableColumnClone "); DivTableColumn. append (tableColumnClone ); }   $ ("#" + TableId + "_ tableLayout table" ..css ("margin", "0 ");   If (freezeRowNum> 0 ){ Var HeadHeight = 0; Var ignoreRowNum = 0; $ ("#" + TableId + "_ tableHead tr: lt (" + freezeRowNum + ")"). each (function (){ If (ignoreRowNum> 0) IgnoreRowNum --; Else { Var td = $ (this). find ('td: first, th: first '); HeadHeight + = td. outerHeight (true );   IgnoreRowNum = td. attr ('rowspan '); If (typeof (ignoreRowNum) = 'undefined ') IgnoreRowNum = 0; Else IgnoreRowNum = parseInt (ignoreRowNum)-1; } }); HeadHeight + = 2;   DivTableHead.css ("height", HeadHeight ); DivTableFix! = Null & divTableFix.css ("height", HeadHeight ); }   If (freezeColumnNum> 0 ){ Var ColumnsWidth = 0; Var ColumnsNumber = 0; $ ("#" + TableId + "_ tableColumn tr: eq (" + freezeRowNum + ")"). find ("td: lt (" + freezeColumnNum + "), th: lt (" + freezeColumnNum + ")"). each (function (){ If (ColumnsNumber> = freezeColumnNum) Return;   ColumnsWidth + = $ (this). outerWidth (true );   ColumnsNumber + = $ (this). attr ('colspan ')? ParseInt ($ (this). attr ('colspan '): 1; }); ColumnsWidth + = 2;   DivTableColumn.css ("width", ColumnsWidth ); DivTableFix! = Null & divTableFix.css ("width", ColumnsWidth ); }   DivTableData. scroll (function (){ DivTableHead! = Null & divTableHead. scrollLeft (divTableData. scrollLeft ());   DivTableColumn! = Null & divTableColumn. scrollTop (divTableData. scrollTop ()); });   DivTableFix! = Null & divTableFix.css ({"overflow": "hidden", "position": "absolute", "z-index": "50 "}); DivTableHead! = Null & divTableHead.css ({"overflow": "hidden", "width": width-17, "position": "absolute", "z-index ": "45 "}); DivTableColumn! = Null & divTableColumn.css ({"overflow": "hidden", "height": height-17, "position": "absolute", "z-index ": "40 "}); DivTableData.css ({"overflow": "scroll", "width": width, "height": height, "position": "absolute "});   DivTableFix! = Null & divTableFix. offset (divTableLayout. offset ()); DivTableHead! = Null & divTableHead. offset (divTableLayout. offset ()); DivTableColumn! = Null & divTableColumn. offset (divTableLayout. offset ()); DivTableData. offset (divTableLayout. offset ()); }   /* * Adjust the width and height of the locked table. This function is called in the resize event. * * Parameter Definition * Table-table element or table ID to be locked * Width-the scroll area width of the table * Height-the height of the scrolling area of the table */ Function adjustTableSize (table, width, height ){ Var tableId; If (typeof (table) = 'string ') TableId = table; Else TableId = table. attr ('id ');   $ ("#" + TableId + "_ tableLayout"). width (width). height (height ); $ ("#" + TableId + "_ tableHead"). width (width-17 ); $ ("#" + TableId + "_ tableColumn"). height (height-17 ); $ ("#" + TableId + "_ tableData"). width (width). height (height ); }   Function pageHeight (){ If ($. browser. msie ){ Return document. compatMode = "CSS1Compat "? Document.doc umentElement. clientHeight: document. body. clientHeight; } Else { Return self. innerHeight; } };   // Return the current page width Function pageWidth (){ If ($. browser. msie ){ Return document. compatMode = "CSS1Compat "? Document.doc umentElement. clientWidth: document. body. clientWidth; } Else { Return self. innerWidth; } };   $ (Document). ready (function (){ Var table = $ ("table "); Var tableId = table. attr ('id '); Var freezeRowNum = table. attr ('freezerownum '); Var freezeColumnNum = table. attr ('freezecolumnnum ');   If (typeof (freezeRowNum )! = 'Undefined' | typeof (freezeColumnNum )! = 'Undefined '){ FreezeTable (table, freezeRowNum | 0, freezeColumnNum | 0, pageWidth (), pageHeight ());   Var flag = false; $ (Window). resize (function (){ If (flag) Return;   SetTimeout (function (){ AdjustTableSize (tableId, pageWidth (), pageHeight ()); Flag = false; },100 );   Flag = true; }); } });

When using freezeRowNum, you only need to set the values of freezeRowNum and freezeColumnNum In the table element to freeze the data.

The Code is as follows:

<Table id = "reportTable" width = "1900" freezeRowNum = "2" freezeColumnNum = "2" class = "report" align = "center">
...
</Table>

 

　　

 

The above is all the content of this article. I hope you will like it.