bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

Wijmo更優(yōu)美的jQueryUI部件集：C1WijmoGrids更多驚喜

本文中，我將給大家介紹一系列非常棒的 Wijmo Grids功能。我們先以一個新的Wijmo Grids 來開始我們這次的 Wijmo Grids 之旅吧。

創(chuàng)新互聯(lián)建站服務項目包括鶴山網(wǎng)站建設、鶴山網(wǎng)站制作、鶴山網(wǎng)頁制作以及鶴山網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，鶴山網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到鶴山省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

 

Wijmo 更優(yōu)美的jQuery UI部件集：C1 Wijmo Grids 更多驚喜

 

 

  1. <BR> 
  2.  
  3. <table id="tableDepartmentInformation"><BR> 
  4.  
  5.     <thead><BR> 
  6.  
  7.         <tr><BR> 
  8.  
  9.             <th>First Name<BR> 
  10.  
  11.             </th><BR> 
  12.  
  13.             <th>Last Name</th><BR> 
  14.  
  15.             <th>Department</th><BR> 
  16.  
  17.         </tr><BR> 
  18.  
  19.     </thead><BR> 
  20.  
  21.     <tbody><BR> 
  22.  
  23.         <tr><BR> 
  24.  
  25.             <td>Kevin</td><BR> 
  26.  
  27.             <td>Griffin</td><BR> 
  28.  
  29.             <td>Marketing</td><BR> 
  30.  
  31.         </tr><BR> 
  32.  
  33.         <tr><BR> 
  34.  
  35.             <td>Rich</td><BR> 
  36.  
  37.             <td>Dudley</td><BR> 
  38.  
  39.             <td>Marketing</td><BR> 
  40.  
  41.         </tr><BR> 
  42.  
  43.         <tr><BR> 
  44.  
  45.             <td>Chris</td><BR> 
  46.  
  47.             <td>Bannon</td><BR> 
  48.  
  49.             <td>Development</td><BR> 
  50.  
  51.         </tr><BR> 
  52.  
  53.         <tr><BR> 
  54.  
  55.             <td>Johnny</td><BR> 
  56.  
  57.             <td>Doe</td><BR> 
  58.  
  59.             <td>Management</td><BR> 
  60.  
  61.         </tr><BR> 
  62.  
  63.         <tr><BR> 
  64.  
  65.             <td>Tommy</td><BR> 
  66.  
  67.             <td>Tutone</td><BR> 
  68.  
  69.             <td>IT</td><BR> 
  70.  
  71.         </tr><BR> 
  72.  
  73.         <tr><BR> 
  74.  
  75.             <td>Joe</td><BR> 
  76.  
  77.             <td>Montana</td><BR> 
  78.  
  79.             <td>IT</td><BR> 
  80.  
  81.         </tr><BR> 
  82.  
  83.         <tr><BR> 
  84.  
  85.             <td>Ingio</td><BR> 
  86.  
  87.             <td>Montoya</td><BR> 
  88.  
  89.             <td>Freelance</td><BR> 
  90.  
  91.         </tr><BR> 
  92.  
  93.         <tr><BR> 
  94.  
  95.             <td>Luke</td><BR> 
  96.  
  97.             <td>Skywalker</td><BR> 
  98.  
  99.             <td>Jedi</td><BR> 
  100.  
  101.         </tr><BR> 
  102.  
  103.     </tbody><BR> 
  104.  
  105. </table><P></P> 
  106.  
  107. <P><script type="text/javascript"><BR> 
  108.  
  109.     $(document).ready(function () {<BR> 
  110.  
  111. $("#tableDepartmentInformation").wijgrid();<BR> 
  112.  
  113. });<BR> 
  114.  
  115. </script><BR> 
  116.  
  117. </P> 

 

 

1. 排序

我們展示的第一個功能是基本的排序功能。我們只需設置allowSorting屬性為true即可。

代碼：

  1. $("#tableDepartmentInformation").wijgrid( 
  2.  
  3. { 
  4.  
  5. allowSorting: true 
  6.  
  7. }); 

運行后，單擊列頭即可實現(xiàn)排序。

效果圖：

Wijmo 更優(yōu)美的jQuery UI部件集：C1 Wijmo Grids 更多驚喜

2. 分頁

現(xiàn)在我們將介紹C1 Wijmo Grids 的分頁功能。當數(shù)據(jù)量很大時，分頁功能可以使請求速度。分頁設置同樣很簡單，我們只需要設置allowPaging 屬性為 True 即可。Wijmo Grids 默認分頁行數(shù)為 10，你可以通過設置pageSize 屬性去自定義每頁行數(shù)。

代碼：

  1. $("#tableDepartmentInformation").wijgrid( 
  2.  
  3. { 
  4.  
  5. allowPaging: true, 
  6.  
  7. pageSize: 2 
  8.  
  9. }); 

Wijmo 更優(yōu)美的jQuery UI部件集：C1 Wijmo Grids 更多驚喜

3. 過濾

過濾功能允許我們使用列中單元格值去過濾該列。例如，如果你想返回產(chǎn)品為ComponentOne 項。我們可以通過過濾功能實現(xiàn)。添加過濾功能，我們可以設置 showFilter 屬性來實現(xiàn)。

代碼：

  1. $("#tableDepartmentInformation").wijgrid( 
  2.  
  3. { 
  4.  
  5. showFilter: true 
  6.  
  7. }); 

Wijmo 更優(yōu)美的jQuery UI部件集：C1 Wijmo Grids 更多驚喜

4. 分組

分組功能以分組所依據(jù)的列進行排序。例如，我們想以“區(qū)域列”進行分組。因為我們需要顯示所有區(qū)域項，所以“區(qū)域列”過濾功能將實效。排序功能將以“組”為單位進行排序。使用C1 Wijmo Grids 分組功能我們需要設置 allowColMoving 和 showGroupArea 屬性。之后，我們就可以拖拽列頭到分組區(qū)域進行分組了。

代碼：

  1. $("#tableDepartmentInformation").wijgrid( 
  2.  
  3. { 
  4.  
  5. showGroupArea: true 
  6.  
  7. }); 
  8.  
  9. $("#tableDepartmentInformation").wijgrid( 
  10.  
  11. { 
  12.  
  13. allowColMoving: true 
  14.  
  15. }); 

Wijmo 更優(yōu)美的jQuery UI部件集：C1 Wijmo Grids 更多驚喜

 

5. 結(jié)束語

我們僅使用幾行代碼，我們實現(xiàn)了 排序、分頁、過濾和分組功能。我希望這篇文章能夠喚起大家對 Wijmo 的興趣。在下一篇文章中，我將繼續(xù)介紹怎樣使用后臺代碼來實現(xiàn)上述功能，感興趣的朋友敬請關(guān)注哦～

 

示例下載

 

Wijmo下載，請進入Studio for ASP.NET Wijmo 2012 v1正式發(fā)布（2012.03.22更新）!

網(wǎng)頁題目：Wijmo更優(yōu)美的jQueryUI部件集：C1WijmoGrids更多驚喜
路徑分享：http://vcdvsql.cn/article26/pdicjg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設、網(wǎng)站排名、搜索引擎優(yōu)化、網(wǎng)站導航、面包屑導航、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網(wǎng)站建設