Full implementation of fixed table headers and first columns

A few days ago, the project manager told me that there was such a requirement: a large table, with the header fixed during vertical sliding and the first and second columns fixed in horizontal sliding. I think this is too difficult to implement. I directly replied that it may not be possible, but I did not have a manager to send an existing IMPLEMENTATION OF THE 12306 website, Khan! I can only talk about the cost first. There is no reason not to do it.

1. Preliminary Research

First open the table on the website 12306, open the browser debugging tool, and find that they are using a plug-in (dhtmlxgrid), and then look at the layout, I found that they put fixed headers and columns in a div. I thought this requirement would be very common. Maybe the corresponding plug-ins may have been available on the Internet, as a result, Google searches for "Table header fixed" (I prefer to search for information using English keywords). The first piece of information is a jquery-based plug-in named Fixed Header table, which does not require money, so download it, study its source code, and find that its layout is similar to that above 12306. It also places fixed headers and columns in a DIV, and then places the table in this Div, shows the overall layout:

By controlling the cell width and height, align the entire cell, and finally listen to the sliding event of maindiv. When it slides, slide headerdiv and columndiv through Js. In fact, the most troublesome problem is cell alignment, because the cell width and height will change with the content (if you want to adapt ).

After knowing the implementation principle, I can compare my actual project. The tables in my project are similar to those in table 12306. Instead of a common data table, the cells in the project are merged, in addition, the tables in my project also have groups (grounp). The screenshot is as follows:

There is an editing function in it. You have to add a total in the row and column respectively. The table is complex enough. The Fixed Header table plug-in does not support my tables (cell merging). The dhtmlxgrid plug-in is very powerful, but for money, jquery is already in the project and you don't want to reference other frameworks anymore, do it yourself!

2. Specific implementation

2.1 simplify requirements

In the past, the layout was a table. To make it easy, I fixed the cell width and height in my table, and used the text that exceeds the limit... Said, Haha, I still want to know how to do it, and the customer will accept it as well. After the cells are fixed,CodeThe amount is much less. Use CSS to control the layout as much as possible. js only controls the sliding and initialization area size (because my page is adaptive ).

2.2 HTML + CSS

First, draw a table with two rows and two columns, and set the overall layout. I will make the overall layout first and then make the local layout. Let's take a look at the overall layout of HTML:

<Table> <thead> <tr> <TH> </Th> <TH> <Div id = "headerdiv" style = "overflow: hidden "> </div> </Th> </tr> </thead> <tbody> <tr> <TD> <Div id =" columndiv "style =" overflow: hidden "> </div> </TD> <Div id =" maindiv "style =" overflow: scroll "onscroll =" fnscroll () "> </div> </TD> </tr> </tbody> </table>
 

The main attributes and events of the DIV have been declared, and thenTwo rowsFixed column, the first thSource code:

<TH id = "firsttd" class = "tdborder"> <Table cellspacing = "0" cellpadding = "0"> <tr> <TD class = "tablefirstcol txtcenter td_right td_bottom"> project </TD> <TD class = "tablesecondcol td_bottom"> <Table cellspacing = "0" cellpadding = "0" class = "tamount"> <tr> <TD colspan =" 3 "class =" txtcenter td_bottom "> total </TD> </tr> <TD class =" Current td_right "> current </TD> <TD class =" scenario td_right "> scenario </TD> <TD class =" different "> different </TD> </tr> </table> </TD> </tr> <tr> <TD class = "tablefirstcol td_right"> total </TD> <TD class = "tablesecondcol"> <Table cellpadding = "0" cellspacing = "0"> <tr> <TD class = "Current td_right"> <input type = "text"/> </TD> <TD class = "scenario td_right"> <input type = "text"/</ TD> <TD class = "different"> <input type = "text"/</TD> </tr> </table> </TD> </tr> </ table> </Th>

Then the source code of headerdiv In the second TH is as follows:

 

<Div id = "headerdiv"> <Table cellspacing = "0" cellpadding = "0" width = "1560" id = "headertable" class = "td_right"> <tr> <TD class = "td_left"> <Table cellspacing = "0" cellpadding = "0" class = "tamount"> <tr> <TD colspan = "3" class = "txtcenter td_bottom "> 1999 </TD> </tr> <TD class =" Current td_right "> current </TD> <TD class =" scenario td_right "> scenario </ TD> <TD class = "different"> different </TD> </tr> </table> </TD> repeats td... </tr> <TD class = "td_left td_top"> <Table cellpadding = "0" cellspacing = "0"> <tr> <TD class = "Current td_right"> <input type = "text"/> </TD> <TD class = "scenario td_right"> <input type = "text"/</TD> <TD class =" different "> <input type =" text "/</TD> </tr> </table> </TD> duplicate td... </tr> </table> </div>

You may have noticed that you have any objection to setting up so many tables. This is the best way to align the station cells. Cell border alignment is the most annoying during the whole page creation process.

The following shows the HTML source code of fixed columns:

<Div id = "columndiv" class = "fixedcol"> <Table cellspacing = "0" cellpadding = "0"> <tr> <TD colspan = "2" class = "tdgroup ""> group name group Nam name group name </TD> </tr> <TD class =" tablefirstcol "> project name 1 </TD> <TD class = "tablesecondcol"> <Table cellpadding = "0" cellspacing = "0"> <tr> <TD class = "Current td_right"> <input type = "Text "/> </TD> <TD class =" scenario td_right "> <input type =" text "/</TD> <TD class =" different "> <input type = "text"/</TD> </tr> </table> </TD> </tr>

Class tdgrounp indicates the group name of the table. If the group name is too long, it will wrap the line. In JS, I will control the height of the corresponding cell in maindiv, it is also the only code that controls cells in JS Code.

The HTML in maindiv will not be glued out, and a table will be placed in it.

3.3 Javascript

Next, let's talk about Js. JS is very simple (based on jquery ):

$ (Document ). ready (function () {fnadjusttable (); // first obtain the height of the page VaR _ H = $ ("# tablediv "). height (); VaR _ w = $ ("# tablediv "). width (); // then set the height of the DIV VaR _ head_h = $ ("# thead "). height (); $ ("# maindiv "). height (_ H-_ head_h); $ ("# columndiv "). height (_ H-_ head_h-18); // 18 indicates the distance from the corresponding scroll bar to VaR _ clo_w = $ ("# columndiv "). width (); $ ("# headerdiv "). width (_ w-_ clo_w-18); $ ("# maindiv "). width (_ w-_ clo_w);}); function fnadjusttable () {// adjust the height of the group name cell $ ('# columndiv. tdgroup '). each (function (I) {// different browsers may have different heights, related to one or two pixels if ($. browser. MSIE) {$ ("# maindiv. tdgroup: eq ("+ I + ")"). height ($ (this ). height ();} else {$ ("# maindiv. tdgroup: eq ("+ I + ")"). height ($ (this ). height () + 1) ;}}) ;}// sliding event function fnscroll () {$ ('# headerdiv '). scrollleft ($ ('# maindiv '). scrollleft (); $ ('# columndiv '). scrolltop ($ ('# maindiv '). scrolltop ());}

the most relevant CSS does not need to be pasted. You can directly view the page source code. The following shows the page effect:

use a browser later than Internet Explorer 8. foreign customers are good speakers.

-->