標題可能有點長，什么叫“完整的基礎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

轉載于:https://www.cnblogs.com/linybo/p/10054146.html

總結

以上是生活随笔為你收集整理的jQuery EasyUI Datagrid组件的完整的基础DOM结构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。