JQuery freeze table rows and columns

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 p, and cascade p through css. Each p is placed in the clone of the current table. For example, if you want to freeze rows, create p for 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 p for the frozen column table and place it on the upper layer of the data table. If you want to freeze rows and columns, in addition to creating a frozen row and a frozen column table p, you also need to create a fixed column table p in the upper left corner and place it in the top layer of all p.
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:

/** Lock the header and column ** Parameter definition * table-the table element or table ID * freezeRowNum to be locked-the number of rows to be locked. If the row is not locked, set it to 0 * freezeColumnNum-number of first columns to be locked. If the column is not locked, set it to 0 * width-the scroll area width of the table * height-the scroll area height of the table */function freezeTable (table, freezeRowNum, freezeColumnNum, width, height) {if (typeof (freezeRowNum) = 'string') freezeRowNum = parseInt (freezeRowNum) if (typeof (freezeColumnNum) = 'string') freezeColumnNum = parseInt (freezeCol UmnNum) var tableId; if (typeof (table) = 'string') {tableId = table; table = $ ('#' + tableId);} else tableId = table. attr ('id'); var pTableLayout = $ ("#" + tableId + "_ tableLayout"); if (pTableLayout. length! = 0) {pTableLayout. before (table); pTableLayout. empty ();} else {table. after ("
"); PTableLayout = $ (" # "+ tableId +" _ tableLayout ");} var html =''; if (freezeRowNum> 0 & freezeColumnNum> 0) html + ='
'; If (freezeRowNum> 0) html + ='
'; If (freezeColumnNum> 0) html + ='
'; Html + ='
'; $ (Html). appendTo ("#" + tableId + "_ tableLayout"); var pTableFix = freezeRowNum> 0 & freezeColumnNum> 0? $ ("#" + TableId + "_ tableFix"): null; var pTableHead = freezeRowNum> 0? $ ("#" + TableId + "_ tableHead"): null; var pTableColumn = freezeColumnNum> 0? $ ("#" + TableId + "_ tableColumn"): null; var pTableData = $ ("#" + tableId + "_ tableData"); pTableData. append (table); if (pTableFix! = Null) {var tableFixClone = table. clone (true); tableFixClone. attr ("id", tableId + "_ tableFixClone"); pTableFix. append (tableFixClone);} if (pTableHead! = Null) {var tableHeadClone = table. clone (true); tableHeadClone. attr ("id", tableId + "_ tableHeadClone"); pTableHead. append (tableHeadClone);} if (pTableColumn! = Null) {var tableColumnClone = table. clone (true); tableColumnClone. attr ("id", tableId + "_ tableColumnClone"); pTableColumn. 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; pTableHead.css ("height", HeadHeight); pTableFix! = Null & pTableFix.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; pTableColumn.css ("width", ColumnsWidth); pTableFix! = Null & pTableFix.css ("width", ColumnsWidth);} pTableData. scroll (function () {pTableHead! = Null & pTableHead. scrollLeft (pTableData. scrollLeft (); pTableColumn! = Null & pTableColumn. scrollTop (pTableData. scrollTop () ;}; pTableFix! = Null & pTableFix.css ({"overflow": "hidden", "position": "absolute", "z-index": "50"}); pTableHead! = Null & pTableHead.css ({"overflow": "hidden", "width": width-17, "position": "absolute", "z-index ": "45"}); pTableColumn! = Null & pTableColumn.css ({"overflow": "hidden", "height": height-17, "position": "absolute", "z-index ": "40"}); pTableData.css ({"overflow": "scroll", "width": width, "height": height, "position": "absolute "}); pTableFix! = Null & pTableFix. offset (pTableLayout. offset (); pTableHead! = Null & pTableHead. offset (pTableLayout. offset (); pTableColumn! = Null & pTableColumn. offset (pTableLayout. offset (); pTableData. offset (pTableLayout. offset ();}/** adjust the width and height of the locked table, in the resize event, this function calls the ** Parameter definition * table-the element of the table to be locked or the table ID * width-the scroll area width of the table * height-the scroll area height 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 ). heig Ht (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 ;}}; // returns 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:

...

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