Dojo EnhancedGrid Pagination

昨天淩晨時間，Dojo的Grid分頁插件低調上線，對于使用dojo作為項目前端來說，是個利好消息。悲催的是這個分頁插件并不在dojo 1.5 realase中。而在dojo的孵化器系列中http://archive.dojotoolkit.org/nightly。直接上例子。

   js code：   

<code>01</code>

<code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

<code>02</code>

<code>dojo.require(</code><code>"dojox.grid.EnhancedGrid"</code><code>);</code>

<code>03</code>

<code>dojo.require(</code><code>"dojox.grid.enhanced.plugins.Pagination"</code><code>);</code>

<code>04</code>

<code>dojo.require(</code><code>"dojox.data.CsvStore"</code><code>);</code>

<code>05</code>

<code> </code> 

<code>06</code>

<code>dojo.addOnLoad(</code><code>function</code><code>(){</code>

<code>07</code>

<code>  </code><code>// our test data store for this example:</code>

<code>08</code>

<code>  </code><code>var</code> <code>store =</code><code>new</code> <code>dojox.data.CsvStore({ url:</code><code>'{{ dataUrl }}dojox/grid/tests/support/movies.csv'</code> <code>});</code>

<code>09</code>

<code>10</code>

<code>  </code><code>// set the layout structure:</code>

<code>11</code>

<code>  </code><code>var</code> <code>layout = [</code>

<code>12</code>

<code>    </code><code>{ field:</code><code>'Title'</code><code>, name:</code><code>'Title of Movie'</code><code>, width:</code><code>'200px'</code> <code>},</code>

<code>13</code>

<code>    </code><code>{ field:</code><code>'Year'</code><code>, name:</code><code>'Year'</code><code>, width:</code><code>'50px'</code> <code>},</code>

<code>14</code>

<code>    </code><code>{ field:</code><code>'Producer'</code><code>, name:</code><code>'Producer'</code><code>, width:</code><code>'auto'</code> <code>}</code>

<code>15</code>

<code>  </code><code>];</code>

<code>16</code>

<code>17</code>

<code>  </code><code>// create a new grid:</code>

<code>18</code>

<code>  </code><code>var</code> <code>grid =</code><code>new</code> <code>dojox.grid.EnhancedGrid({</code>

<code>19</code>

<code>    </code><code>store: store,</code>

<code>20</code>

<code>    </code><code>structure: layout,</code>

<code>21</code>

<code>    </code><code>plugins : {</code>

<code>22</code>

<code>    </code><code>}</code>

<code>23</code>

<code>  </code><code>}, document.createElement(</code><code>'div'</code><code>));</code>

<code>24</code>

<code>25</code>

<code>  </code><code>// append the new grid to the div "gridContainer4":</code>

<code>26</code>

<code>  </code><code>dojo.byId(</code><code>"gridDiv"</code><code>).appendChild(grid.domNode);</code>

<code>27</code>

<code>28</code>

<code>  </code><code>// Call startup, in order to render the grid:</code>

<code>29</code>

<code>  </code><code>grid.startup();</code>

<code>30</code>

<code>});</code>

<code>31</code>

<code>&lt;/script&gt;</code>

html code：

<code>1</code>

<code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"gridDiv"</code> <code>style</code><code>=</code><code>"width: 100%; height: 100%;"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

css code：

<code>&lt;style type=</code><code>"text/css"</code><code>&gt;</code>

<code>2</code>

<code>@import</code><code>"{{ baseUrl }}dojo/resources/dojo.css"</code><code>;</code>

<code>3</code>

<code>@import</code><code>"{{ baseUrl }}dijit/themes/{{ theme }}/{{ theme }}.css"</code><code>;</code>

<code>4</code>

<code>@import</code><code>"{{ baseUrl }}dojox/grid/enhanced/resources/{{ theme }}EnhancedGrid.css"</code><code>;</code>

<code>5</code>

<code>@import</code><code>"{{ baseUrl }}dojox/grid/enhanced/resources/EnhancedGrid_rtl.css"</code><code>;</code>

<code>6</code>

<code>&lt;/style&gt;</code>

dojo這個分頁插件的配置參數如下：

效果：

整個分頁配置非常簡單，現學現賣^_^。

本文轉自左正部落格園部落格，原文連結：http://www.cnblogs.com/soundcode/archive/2011/07/26/2117528.html，如需轉載請自行聯系原作者