Wijmo 更優美的jQuery UI部件集：C1 Wijmo Grid
系統
2340 0
本文中，我將給大家介紹一系列非常棒的 Wijmo Grids功能。我們先以一個新的Wijmo Grids 來開始我們這次的 Wijmo Grids 之旅吧。
<
BR
>
<
table
id
="tableDepartmentInformation"
><
BR
>
<
thead
><
BR
>
<
tr
><
BR
>
<
th
>
First Name
<
BR
>
</
th
><
BR
>
<
th
>
Last Name
</
th
><
BR
>
<
th
>
Department
</
th
><
BR
>
</
tr
><
BR
>
</
thead
><
BR
>
<
tbody
><
BR
>
<
tr
><
BR
>
<
td
>
Kevin
</
td
><
BR
>
<
td
>
Griffin
</
td
><
BR
>
<
td
>
Marketing
</
td
><
BR
>
</
tr
><
BR
>
<
tr
><
BR
>
<
td
>
Rich
</
td
><
BR
>
<
td
>
Dudley
</
td
><
BR
>
<
td
>
Marketing
</
td
><
BR
>
</
tr
><
BR
>
<
tr
><
BR
>
<
td
>
Chris
</
td
><
BR
>
<
td
>
Bannon
</
td
><
BR
>
<
td
>
Development
</
td
><
BR
>
</
tr
><
BR
>
<
tr
><
BR
>
<
td
>
Johnny
</
td
><
BR
>
<
td
>
Doe
</
td
><
BR
>
<
td
>
Management
</
td
><
BR
>
</
tr
><
BR
>
<
tr
><
BR
>
<
td
>
Tommy
</
td
><
BR
>
<
td
>
Tutone
</
td
><
BR
>
<
td
>
IT
</
td
><
BR
>
</
tr
><
BR
>
<
tr
><
BR
>
<
td
>
Joe
</
td
><
BR
>
<
td
>
Montana
</
td
><
BR
>
<
td
>
IT
</
td
><
BR
>
</
tr
><
BR
>
<
tr
><
BR
>
<
td
>
Ingio
</
td
><
BR
>
<
td
>
Montoya
</
td
><
BR
>
<
td
>
Freelance
</
td
><
BR
>
</
tr
><
BR
>
<
tr
><
BR
>
<
td
>
Luke
</
td
><
BR
>
<
td
>
Skywalker
</
td
><
BR
>
<
td
>
Jedi
</
td
><
BR
>
</
tr
><
BR
>
</
tbody
><
BR
>
</
table
><
P
></
P
>
<
P
><
script
type
="text/javascript"
>
<
BR
>
$(document).ready(
function
() {
<
BR
>
$(
"
#tableDepartmentInformation
"
).wijgrid();
<
BR
>
});
<
BR
>
</
script
><
BR
>
</
P
>
1. 排序
我們展示的第一個功能是基本的排序功能。我們只需設置allowSorting屬性為true即可
。
代碼：
$("#tableDepartmentInformation"
).wijgrid(
{
allowSorting:
true
});
運行后，單擊列頭即可實現排序。
效果圖：
![clip_image002[5]](http://img.it610.com/image/product/7c824973419f43c8b6c65603ee402926.jpg "clip_image002[5]")
2. 分頁
現在我們將介紹C1 Wijmo Grids 的分頁功能。當數據量很大時，分頁功能可以使請求速度。分頁設置同樣很簡單，我們只需要設置
allowPaging屬性為 True 即可。
Wijmo Grids 默認分頁行數為 10，你可以通過設置
pageSize
屬性去自定義每頁行數。
代碼：
$("#tableDepartmentInformation"
).wijgrid(
{
allowPaging:
true
,
pageSize:
2
});
3. 過濾
過濾
功能允許我們使用列中單元格值去過濾該列。例如，如果你想返回產品為ComponentOne 項。我們可以通過過濾功能實現。添加過濾功能，我們可以設置 showFilter 屬性來實現。
代碼：
$("#tableDepartmentInformation"
).wijgrid(
{
showFilter:
true
});
4. 分組
分組功能以分組所依據的列進行排序。例如，我們想以“
區域列”
進行分組。因為我們需要顯示所有區域項，所以“
區域列”
過濾功能將實效。排序功能將以
“組”
為單位進行排序。使用C1 Wijmo Grids 分組功能我們需要設置
allowColMoving和showGroupArea
屬性。之后，我們就可以拖拽列頭到分組區域進行分組了。
代碼：
$("#tableDepartmentInformation"
).wijgrid(
{
showGroupArea:
true
});
$(
"#tableDepartmentInformation"
).wijgrid(
{
allowColMoving:
true
});
5. 結束語
我們僅使用幾行代碼，我們實現了 排序、分頁、過濾和分組功能。我希望這篇文章能夠喚起大家對 Wijmo 的興趣。在下一篇文章中，我將繼續介紹怎樣使用后臺代碼來實現上述功能，感興趣的朋友敬請關注哦～
示例下載
Wijmo下載，請進入
Studio for ASP.NET Wijmo 2012 v1正式發布（2012.03.22更新）!
Wijmo 更優美的jQuery UI部件集：C1 Wijmo Grids 更多驚喜
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元