Wijmo 更優美的jQuery UI部件集:C1 Wijmo Grid
系統
2246 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
});
運行后,單擊列頭即可實現排序。
效果圖:
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元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元