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

本文中，我將給大家介紹一系列非常棒的 Wijmo Grids功能。我們先以一個(gè)新的Wijmo Grids 來(lái)開(kāi)始我們這次的 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. 排序

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

代碼：

$("#tableDepartmentInformation").wijgrid( 
 
{ 
 
allowSorting: true 
 
}); 

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

效果圖：

2. 分頁(yè)

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

代碼：

$("#tableDepartmentInformation").wijgrid( 
 
{ 
 
allowPaging: true, 
 
pageSize: 2 
 
}); 

3. 過(guò)濾

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

代碼：

$("#tableDepartmentInformation").wijgrid( 
 
{ 
 
showFilter: true 
 
}); 

4. 分組

分組功能以分組所依據(jù)的列進(jìn)行排序。例如，我們想以“區(qū)域列”進(jìn)行分組。因?yàn)槲覀冃枰@示所有區(qū)域項(xiàng)，所以“區(qū)域列”過(guò)濾功能將實(shí)效。排序功能將以“組”為單位進(jìn)行排序。使用C1 Wijmo Grids 分組功能我們需要設(shè)置 allowColMoving 和 showGroupArea 屬性。之后，我們就可以拖拽列頭到分組區(qū)域進(jìn)行分組了。

代碼：

$("#tableDepartmentInformation").wijgrid( 
 
{ 
 
showGroupArea: true 
 
}); 
 
$("#tableDepartmentInformation").wijgrid( 
 
{ 
 
allowColMoving: true 
 
}); 

5. 結(jié)束語(yǔ)

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

示例下載

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