JQuery's gradual parsing of the ScrollableGridPlugin. js (Fixed Header) plugin, jquery fixed the header

JQuery's gradual parsing of the ScrollableGridPlugin. js (Fixed Header) plugin, jquery fixed the header

In the past, when I was writing to the front-end, what effects I needed was always used when there was something ready-made. Because I was really a little lazy and had no exploration spirit, I only paid attention to the results and did not pursue the process.

ScrollableGridPlugin. js is a plug-in with a Fixed Header effect found on the Internet. It is easy to use and looks good. However, after all, it is not customized, so some places in their own projects still need to make a little change, because it is really too fond of this plug-in, so the first time to go inside, let's take a look at the original author's ideas and writing, and then we can know how to change it to a suitable project.

I am a very amateur player in js. I have analyzed this plug-in based on my current situation. I have figured out what is going on, but I have not analyzed the plug-in correctly, please advise.

/*! * This plug-in is developed for ASP. net GridView control to make the GridView scrollable with Fixed headers. */(function ($) {$. fn. scrollable = function (options) {// 1. Define a jQuery instance method. It is also the portal for calling this plug-in. var defaults = {ScrollHeight: 300, Width: 0 }; var options = $. extend (defaults, options); // 2. extend the set. If the ScrollHeight value is not input externally, the value 300 is used by default, return this with the passed ScrollHeight value. each (function () {var grid = $ (t His ). get (0); // 3. Obtain the current gridview control object var gridWidth = grid. offsetWidth; // 4. Obtain the gridview width var headerCellWidths = new Array (); for (var I = 0; I <grid. getElementsByTagName ("TH "). length; I ++) {headerCellWidths [I] = grid. getElementsByTagName ("TH") [I]. offsetWidth;} // 5. Create an array grid that stores the width of each header column. parentNode. appendChild (document. createElement ("div"); // 6. Add a div element var parentDiv = grid at the same level of the gridview in the document. pare NtNode; // 7. The parent node of the gridview, which is a div var table = document. createElement ("table"); // 8. Create a table element in the dom for (I = 0; I <grid. attributes. length; I ++) {if (grid. attributes [I]. specified & grid. attributes [I]. name! = "Id") {table. setAttribute (grid. attributes [I]. name, grid. attributes [I]. value) ;}} // 9. Add all properties of the gridview to the newly created table element table.style.css Text = grid.style.css Text; // 10. Add the style to the table element. style. width = gridWidth + "px"; // 11. Set the same width for the table element as that for the gridview. appendChild (document. createElement ("tbody"); // 12. Add a tbody element table to the table element. getElementsByTagName ("tbody") [0]. appendChild (grid. getElementsByTagName ("TR ") [0]); // 13. Add the first row of data in the gridview to the tbody element, that is, the table contains the title element of the row of the gridview, at the same time, the element var cells = table in the row of the title is deleted in the gridview. getElementsByTagName ("TH"); // 14. Obtain the var gridRow = grid set of the table title column. getElementsByTagName ("TR") [0]; // 15. Set of the first row of data in the gridview for (var I = 0; I <cells. length; I ++) {var width; if (headerCellWidths [I]> gridRow. getElementsByTagName ("TD") [I]. offsetWidth) {// 16. If the width of the title lattice is greater than the width of the data column, width = headerCellWidths [I ];} Else {// 17. If the width of the title lattice is smaller than the width of the data column, width = gridRow. getElementsByTagName ("TD") [I]. offsetWidth;} cells [I]. style. width = parseInt (width-3) + "px"; gridRow. getElementsByTagName ("TD") [I]. style. width = parseInt (width-3) + "px"; // 18. Adjust the width of each title column and data column to a wider one, -3 is to fine-tune the table style, not required} parentDiv. removeChild (grid); // 19. Delete the gridview control (note that only the control is deleted from the document stream. In actual memory, note 27 items ), the current situation is that there is only one table header var dummyHeader = document. CreateElement ("div"); // 20. Create another div element dummyHeader in the document. appendChild (table); // 21. Add the table header to parentDiv. appendChild (dummyHeader); // 22. Insert the div into the original position of the gridview if (options. width> 0) {// 23. If we first input a expected table Width value, we will assign the value gridWidth to options. width;} var scrollableDiv = document. createElement ("div"); // 24. Create a div gridWidth = parseInt (gridWidth) + 17; // 25. The original base is + 17 because it is a table with sliding bars, when a slide is displayed, one more slide is displayed in width. To make the data column consistent with the title column, calculate the width. The value 17 is not required. This can be tested. ScrollableDiv.style.css Text = "overflow: auto; height:" + options. scrollHeight + "px; width:" + gridWidth + "px"; // 26. Add a style to the div with a scroll bar, height is the size of the scroll bar scrollableDiv. appendChild (grid); // 27. Add the gridview (currently only data columns exist) to the div with a scroll bar. Here, parentDiv is retrieved from the grid in the memory. appendChild (scrollableDiv); // 28. Add the div with a scroll bar to the table.}) ;}) (jQuery );

Only by figuring out what is going on inside the plug-in can you know how to modify it.

In fact, I still don't quite understand a place here. baidu won't be able to understand it any more. If you want to understand it, you can tell me that grid is used in both places, 13 and 15. getElementsByTagName ("TR") [0]); on the surface, should this statement be the same tr? However, when I trace through the browser, I found that the first tr of the grid is called in Step 13, which contains the title tr of the th Column, 15 is also the first tr in the grid, but contains the first tr of the td column.

It is strange that after 13 is executed, the number of tr in the grid is 1 less, that is, the tr containing the th Column is missing. I thought the appendChild method is to transfer the element to insert, instead of copying the element to insert. However, by checking this method, it is not clearly stated that it is what I think. I have some crashes.

The calling method of this plug-in is as follows. If you are interested, you can try it. It feels really good.

    <script type="text/javascript" src="../Scripts/PlugIn/ScrollableGridPlugin.js"></script>    <script type="text/javascript">        jQuery(document).ready(function () {            jQuery("#<%=gv_bugList.ClientID %>").Scrollable({                ScrollHeight: 400,                width: 500            });        })    </script>

Is there any code for jquery to fix the header, and you need to flip the page at the same time?

What does a Fixed Header mean? When the table is scrolling, the table header does not move? This is simple. You can use two tables. One table is the header, and the following table can have a scroll bar.
If you want to perform page flip, you can find a special page flip effect and modify it.

How does Jquery easy UI fix the header?

Freeze? Or fixed width?
<Table class = "easyui-datagrid" title = "Frozen Columns in DataGrid" style = "width: 700px; height: 250px"
Data-options = "rownumbers: true, singleSelect: true, url: 'datagrid _ data1.json', method: 'get'">
<Thead data-options = "frozen: true">
<Tr>
<Th data-options = "field: 'itemid', width: 100"> Item ID </th>
<Th data-options = "field: 'produd d', width: 120"> Product </th>
</Tr>
</Thead>
<Thead>
<Tr>
<Th data-options = "field: 'listprice', width: 90, align: 'right'"> List Price </th>
<Th data-options = "field: 'unitcost', width: 90, align: 'right'"> Unit Cost </th>
<Th data-options = "field: 'attr1', width: 250"> Attribute </th>
<Th data-options = "field: 'status', width: 60, align: 'center'"> status </th>
</Tr>
</Thead>
</Table>