jQuery EasyUI Datagrid組件的完整的基礎DOM結構

　　標題可能有點長，什麼叫「完整的基礎DOM結構」，這裏「基礎」的意思是指這個結構不依賴具體數據，不依賴Datagrid的view屬性，只要存在Datagrid實例就會存在這樣的基礎DOM結構；而「完整」的意思是指在凍結列，凍結行，標題，footer，分頁這些功能塊都存在時候的DOM結構。

要搞清楚Datagrid的工做原理，這個DOM結構必需要爛熟於胸的，咱們直接來看這個「基礎完整DOM結構」是什麼樣子的：

<!-- datagrid的最外層容器，能夠使用$(target).datagrid('getPanel')或者$.data(target,'datagrid').panel獲得這個DOM對象，這個DOM上其實承載了panel組件--> <div class="panel datagrid"> <!-- datagrid的標題區域容器，對應於panel組件的header部分，能夠使用$(target).datagrid('getPanel').panel('header')獲得這個DOM對象--> <div class="panel-header"> <div class="panel-title"></div> <div class="panel-tool"></div> </div> <!-- datagrid的主體區域容器，對應於panel組件的body部分，能夠使用$(target).datagrid('getPanel').panel('body')獲得這個DOM對象--> <div class="datagrid-wrap panel-body"> <!--工具欄--> <div class="datagrid-toolbar"></div> <!-- datagrid視圖部分的容器，這是datagrid組件DOM結構的核心，其基礎視圖結構跟datagrid的view屬性無任何關係。--> <!-- 對應dc.view --> <div class="datagrid-view"> <!-- div.datagrid-view1負責展現凍結列部分(包含行號或者frozenColumns)的數據--> <!-- 對應dc.view1 --> <div class="datagrid-view1"> <!--列標題部分--> <div class="datagrid-header"> <!-- 對應dc.header1 --> <div class="datagrid-header-inner"> <!--樣式裏有htable關鍵字，h表明header的意思--> <table class="datagrid-htable"> <tbody> <tr class="datagrid-header-row"></tr> </tbody> </table> </div> </div> <!--列數據部分--> <div class="datagrid-body"> <!-- 對應dc.body1 --> <div class="datagrid-body-inner"> <!--frozenRows部分(有數據纔會有這個table，故不屬於基礎DOM結構)，固定行是1.3.2版本以後才加的功能，注意datagrid-btable-frozen關鍵樣式，btable代碼body table的意思--> <table class="datagrid-btable datagrid-btable-frozen"></table> <!--普通rows部分(有數據纔會有這個table，故不屬於基礎DOM結構)--> <table class="datagird-btable"></table> </div> </div> <!--footer部分--> <div class="datagrid-footer"> <!-- 對應dc.footer1 --> <div class="datagrid-footer-inner"> <!--ftable表明footer table的意思--> <table class="datagrid-ftable"></table> </div> </div> </div> <!-- div.datagrid-view2負責展現非凍結列部分的數據，你們注意到凍結列和普通列視圖是分開的，也就是說凍結列和普通列是在不一樣表格中展現的，這樣會產生一個問題，那就是兩個表格行高之間的同步問題。--> <!-- 對應dc.view2 --> <div class="datagrid-view2"> <!--列標題部分--> <div class="datagrid-header"> <!-- 對應dc.header2 --> <div class="datagrid-header-inner"> <table class="datagrid-htable"> <tbody> <tr class="datagrid-header-row"></tr> </tbody> </table> </div> </div> <!--列數據部分，注意這裏並沒有datagrid-body-inner這個子元素，而凍結列對應的body倒是有的，這個是細微區別--> <!-- 對應dc.body2 --> <div class="datagrid-body"> <!--frozenRows部分有數據纔會有這個table，故不屬於基礎DOM結構，固定行是1.3.2版本以後才加的功能，--> <table class="datagrid-btable datagrid-btable-frozen"></table> <table class="datagrid-btable"></table> </div> <!--footer部分--> <div class="datagrid-footer"> <!-- 對應dc.footer2 --> <div class="datagrid-footer-inner"> <table class="datagrid-ftable"></table> </div> </div> </div> </div> <!--分頁部分--> <div class="datagrid-pager pagination"></div> </div> </div>

對於這個DOM結構，我在html代碼裏面已經作了簡單說明，這裏提一下綁定於Datagrid宿主table上的對象的dc屬性，這個dc屬性存儲了對DOM結構裏不一樣部分的引用，獲取dc屬性的方法：

1	$.data(target,'datagrid').dc;

而dc屬性跟DOM的對應關係，我也在html中作了詳細註釋，請你們自行查看，這些都是咱們深刻認識Datagrid組件的基礎。

 

******轉載：http://www.easyui.info/archives/1157.html