JQuery Easyui The complete underlying DOM structure of the DataGrid component

• The journal was published by the Light of the century 2 years ago under the DataGrid classification
• Reprint: JQuery Easyui The complete underlying DOM structure of the DataGrid component | WebUI Frame Use reference +
• Http://www.easyui.info/archives/1157.html
• Key words: DataGrid source code Analysis, DataGrid structure, Easyui source analysis

The title may be a bit long, what is called "the complete underlying DOM structure", where "basic" means that the structure does not depend on the specific data, does not rely on the DataGrid's View property, as long as there is a DataGrid instance there will be such an underlying DOM structure, and "complete" means in the frozen column, Freeze lines, headings, footer, paging these function blocks all exist at the time of the DOM structure.

To figure out how the DataGrid works, this DOM structure must be well-known to the chest, and we'll look directly at what this "basic complete DOM structure" looks like:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 6667686970717273747576777879808182

<!--the outermost container of the DataGrid, you can use the $ (target). DataGrid (' Getpanel ') or $.data (target, ' DataGrid '). Panel gets this DOM object, This DOM actually hosts the panel component--<div class= "Panel DataGrid" > <!--the header area container of the DataGrid, corresponding to the header portion of the Panel component, which can be used with the (target). DataGrid (' Getpanel '). Panel (' header ') gets this DOM object--<div class= "Panel-header" > <div class= "Panel-title" ></div> <div class= "Panel-tool" ></div> </div> &L t;! --The main area container of the DataGrid, corresponding to the body portion of the panel component, can use the $ (target). DataGrid (' Getpanel '). Panel (' body ') to get this DOM object--<div Clas s= "Datagrid-wrap panel-body" > <!--Toolbars-<div class= "Datagrid-toolbar" ></div> <!--the container in the DataGrid View section, which is the core of the DataGrid component DOM structure, and its underlying view structure has no relation to the DataGrid's View property. -<!--corresponds to Dc.view--<div class= "Datagrid-view" > <!--div.data Grid-view1 is responsible for showing the frozen columns section (containing line numbers or frozencolumns) data--<!--corresponding Dc.view1--<div class= "Datagrid-view1" > <!--column heading section--<di V class= "Datagrid-header" > <!--corresponds to Dc.header1 and <div class= "D Atagrid-header-inner "> <!--style has htable keyword, h stands for header meaning-- <table class= "datagrid-htable" > <tbody> &L T;tr class= "Datagrid-header-row" ></tr> </tbody> </table> </div> </div> <!--column data section--&G T <div class= "Datagrid-body" > <!--corresponds to Dc.body1--<div class= "Datagrid-body-inner" > <!--frozenrows section (with data to have this table, so it is not part of the underlying DOM structure), fixed line is 1.3.2 after the addition of features, note DAtagrid-btable-frozen key style, btable code Body table meaning--<table class= "Datagrid-btable Datagri D-btable-frozen "></table> <!--normal rows section (with data to have this table, so it's not part of the underlying DOM structure)-- <table class= "datagird-btable" ></table> </div> </div> <!--footer Part--<div class= "Datagrid-footer" > <!--corresponds to Dc.footer1--<div class= "Datagrid-footer-inner" > <!--ftable stands for footer table meaning-<table class= "datagrid-ftable" &GT;&L t;/table> </div> </div> </div> <!--DIV.DATAGRID-VIEW2 is responsible for displaying the data in the non-frozen columns, and it is noted that frozen and normal column views are separate, which means that frozen and normal columns are displayed in different tables, which creates the problem of synchronization between the two table row heights. -<!--onShould Dc.view2--<div class= "Datagrid-view2" > <!--column header section-- <div class= "Datagrid-header" > <!--corresponds to Dc.header2--<d IV class= "Datagrid-header-inner" > <table class= "datagrid-htable" > <tbody> <tr class= "Datagrid-header-row" ></tr> </tbody> </table> </div> </div> <!--column data section, note that there is no datagrid-body-inner this child element, and the frozen column corresponds to the body is there, this is a subtle difference-- <!--corresponds to Dc.body2--<div class= "Datagrid-body" > <!--frozenrows part of the data will have this table, it is not part of the underlying DOM structure, fixed line is 1.3. Features added after 2 version,--> <table class= "Datagri D-btable datagrid-btable-frozen "></table> <table class=" datagrid-btable "></table> </div> <!--footer Part--<div class= "Datagrid-footer" > <!--corresponds to Dc.footer2--<div class= "Datagrid-footer-inner" > <table class= "datagrid-ftable" ></table> </div> </div> </div> </div> <!--pagination section--<div Clas s= "Datagrid-pager pagination" ></div> </div> </div>

For this DOM structure, I have already made a simple explanation in the HTML code, which is a reference to the DC property of the object that is bound to the DataGrid host table, which stores the references to the different parts of the DOM structure, and the method for obtaining the DC properties:

1	$.data (Target, ' DataGrid '). DC;

and the DC property and Dom correspondence, I also made in the HTML detailed comments, please see for yourselves, these are our deep understanding of the DataGrid Component Foundation

JQuery Easyui The complete underlying DOM structure of the DataGrid component