JQuery implements table row and column freezing, and jquery implements table freezing.

JQuery implements table row and column freezing, and jquery implements table freezing.

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:

/** 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 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 (freez ERowNum> 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 --; els E {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, 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 (wid Th ). 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 ;}}; // 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.

Copy codeThe 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.