jQuery EasyUI Datagrid组件的基础完整DOM结构

标题可能有点长,什么叫“基础完整DOM结构”,这里“基础”的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在 Datagrid实例就会存在这样的基础DOM结构;而“完整”的意思是指在冻结列,冻结行,标题,footer,分页这些功能块都存在时候的DOM结 构。

要搞清楚Datagrid的工作原理,这个DOM结构必须要烂熟于胸的,我们直接来看这个“基础完整DOM结构”是什么样子的:

  1. <!-- datagrid的最外层容器,可以使用$(target).datagrid('getPanel')或者$.data(target,'datagrid').panel得到这个DOM对象,这个DOM上其实承载了panel组件-->  
  2. <div class="panel datagrid">  
  3.     <!-- datagrid的标题区域容器,对应于panel组件的header部分,可以使用$(target).datagrid('getPanel').panel('header')得到这个DOM对象-->  
  4.     <div class="panel-header">  
  5.         <div class="panel-title"></div>  
  6.         <div class="panel-tool"></div>  
  7.     </div>  
  8.     <!-- datagrid的主体区域容器,对应于panel组件的body部分,可以使用$(target).datagrid('getPanel').panel('body')得到这个DOM对象-->  
  9.     <div class="datagrid-wrap panel-body">  
  10.         <!-- datagrid视图部分的容器,这是datagrid组件DOM结构的核心,其基础视图结构跟datagrid的view属性无任何关系。-->  
  11.         <!-- 对应dc.view -->  
  12.         <div class="datagrid-view">  
  13.             <!-- div.datagrid-view1负责展示冻结列部分(包含行号或者frozenColumns)的数据-->  
  14.             <!-- 对应dc.view1 -->  
  15.             <div class="datagrid-view1">  
  16.                 <!--列标题部分-->  
  17.                 <div class="datagrid-header">  
  18.                     <!-- 对应dc.header1 -->  
  19.                     <div class="datagrid-header-inner">  
  20.                         <!--样式里有htable关键字,h代表header的意思-->  
  21.                         <table class="datagrid-htable">  
  22.                             <tbody>  
  23.                                 <tr class="datagrid-header-row"></tr>  
  24.                             </tbody>  
  25.                         </table>  
  26.                     </div>  
  27.                 </div>  
  28.                 <!--列数据部分-->  
  29.                 <div class="datagrid-body">  
  30.                     <!-- 对应dc.body1 -->  
  31.                     <div class="datagrid-body-inner">  
  32.                         <!--frozenRows部分,固定行是1.3.2版本之后才加的功能,注意datagrid-btable-frozen关键样式,btable代码body table的意思-->  
  33.                         <table class="datagrid-btable datagrid-btable-frozen"></table>  
  34.                         <!--普通rows部分-->  
  35.                         <table class="datagird-btable"></table>  
  36.                     </div>  
  37.                 </div>  
  38.                 <!--footer部分-->  
  39.                 <div class="datagrid-tooter">  
  40.                     <!-- 对应dc.footer1 -->  
  41.                     <div class="datagrid-footer-inner">  
  42.                         <!--ftable代表footer table的意思-->  
  43.                         <table class="datagrid-ftable"></table>  
  44.                     </div>  
  45.                 </div>  
  46.             </div>  
  47.             <!-- div.datagrid-view2负责展示非冻结列部分的数据,大家注意到冻结列和普通列视图是分开的,也就是说冻结列和普通列是在不同表格中展示的,这样会产生一个问题,那就是那个表格行高之间的同步问题。-->  
  48.             <!-- 对应dc.view2 -->  
  49.             <div class="datagrid-view2">  
  50.                 <!--列标题部分-->  
  51.                 <div class="datagrid-header">  
  52.                     <!-- 对应dc.header2 -->  
  53.                     <div class="datagrid-header-inner">  
  54.                         <table class="datagrid-htable">  
  55.                             <tbody>  
  56.                                 <tr class="datagrid-header-row"></tr>  
  57.                             </tbody>  
  58.                         </table>  
  59.                     </div>  
  60.                 </div>  
  61.                 <!--列数据部分,注意这里并无datagrid-body-inner这个子元素,而冻结列对应的body却是有的,这个是细微区别-->  
  62.                 <!-- 对应dc.body2 -->  
  63.                 <div class="datagrid-body">  
  64.                     <!--frozenRows部分,固定行是1.3.2版本之后才加的功能,-->  
  65.                     <table class="datagrid-btable datagrid-btable-frozen"></table>  
  66.                     <table class="datagrid-btable"></table>  
  67.                 </div>  
  68.                 <!--footer部分-->  
  69.                 <div class="datagrid-footer">  
  70.                     <!-- 对应dc.footer2 -->  
  71.                     <div class="datagrid-footer-inner">  
  72.                         <table class="datagrid-ftable"></table>  
  73.                     </div>  
  74.                 </div>  
  75.             </div>  
  76.         </div>  
  77.         <!--分页部分-->  
  78.         <div class="datagrid-pager pagination"></div>  
  79.     </div>  
  80. </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

相关推荐