<!-- 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>

?

轉載于:https://www.cnblogs.com/lesleysbw/p/7541607.html

總結

以上是生活随笔為你收集整理的datagrid 完整dom结构的全部內容，希望文章能夠幫你解決所遇到的問題。

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