<!-- datagrid的最外層容器，可以使用$(target).datagrid('getPanel')或者$.data(target,'datagrid').panel得到這個DOM對象，這個DOM上其實承載了panel組件--> <div class="panel datagrid"> <!-- datagrid的標(biāo)題區(qū)域容器，對應(yīng)于panel組件的header部分，可以使用$(target).datagrid('getPanel').panel('header')得到這個DOM對象--> <div class="panel-header"> <div class="panel-title"></div> <div class="panel-tool"></div> </div> <!-- datagrid的主體區(qū)域容器，對應(yīng)于panel組件的body部分，可以使用$(target).datagrid('getPanel').panel('body')得到這個DOM對象--> <div class="datagrid-wrap panel-body"> <!--工具欄--> <div class="datagrid-toolbar"></div> <!-- datagrid視圖部分的容器，這是datagrid組件DOM結(jié)構(gòu)的核心，其基礎(chǔ)視圖結(jié)構(gòu)跟datagrid的view屬性無任何關(guān)系。--> <!-- 對應(yīng)dc.view --> <div class="datagrid-view"> <!-- div.datagrid-view1負(fù)責(zé)展示凍結(jié)列部分(包含行號或者frozenColumns)的數(shù)據(jù)--> <!-- 對應(yīng)dc.view1 --> <div class="datagrid-view1"> <!--列標(biāo)題部分--> <div class="datagrid-header"> <!-- 對應(yīng)dc.header1 --> <div class="datagrid-header-inner"> <!--樣式里有htable關(guān)鍵字，h代表header的意思--> <table class="datagrid-htable"> <tbody> <tr class="datagrid-header-row"></tr> </tbody> </table> </div> </div> <!--列數(shù)據(jù)部分--> <div class="datagrid-body"> <!-- 對應(yīng)dc.body1 --> <div class="datagrid-body-inner"> <!--frozenRows部分(有數(shù)據(jù)才會有這個table，故不屬于基礎(chǔ)DOM結(jié)構(gòu))，固定行是1.3.2版本之后才加的功能，注意datagrid-btable-frozen關(guān)鍵樣式，btable代碼body table的意思--> <table class="datagrid-btable datagrid-btable-frozen"></table> <!--普通rows部分(有數(shù)據(jù)才會有這個table，故不屬于基礎(chǔ)DOM結(jié)構(gòu))--> <table class="datagird-btable"></table> </div> </div> <!--footer部分--> <div class="datagrid-footer"> <!-- 對應(yīng)dc.footer1 --> <div class="datagrid-footer-inner"> <!--ftable代表footer table的意思--> <table class="datagrid-ftable"></table> </div> </div> </div> <!-- div.datagrid-view2負(fù)責(zé)展示非凍結(jié)列部分的數(shù)據(jù)，大家注意到凍結(jié)列和普通列視圖是分開的，也就是說凍結(jié)列和普通列是在不同表格中展示的，這樣會產(chǎn)生一個問題，那就是兩個表格行高之間的同步問題。--> <!-- 對應(yīng)dc.view2 --> <div class="datagrid-view2"> <!--列標(biāo)題部分--> <div class="datagrid-header"> <!-- 對應(yīng)dc.header2 --> <div class="datagrid-header-inner"> <table class="datagrid-htable"> <tbody> <tr class="datagrid-header-row"></tr> </tbody> </table> </div> </div> <!--列數(shù)據(jù)部分，注意這里并無datagrid-body-inner這個子元素，而凍結(jié)列對應(yīng)的body卻是有的，這個是細(xì)微區(qū)別--> <!-- 對應(yīng)dc.body2 --> <div class="datagrid-body"> <!--frozenRows部分有數(shù)據(jù)才會有這個table，故不屬于基礎(chǔ)DOM結(jié)構(gòu)，固定行是1.3.2版本之后才加的功能，--> <table class="datagrid-btable datagrid-btable-frozen"></table> <table class="datagrid-btable"></table> </div> <!--footer部分--> <div class="datagrid-footer"> <!-- 對應(yīng)dc.footer2 --> <div class="datagrid-footer-inner"> <table class="datagrid-ftable"></table> </div> </div> </div> </div> <!--分頁部分--> <div class="datagrid-pager pagination"></div> </div> </div>

?

轉(zhuǎn)載于:https://www.cnblogs.com/lesleysbw/p/7541607.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。