FirstName

LastName
Department


亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

Wijmo 更優美的jQuery UI部件集:C1 Wijmo Grid

系統 2246 0

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

image

      
        <
      
      
        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]

2. 分頁

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

代碼:

      $("#tableDepartmentInformation"
      
        ).wijgrid(

{

allowPaging: 
      
      
        true
      
      
        ,

pageSize: 
      
      2
      
        

});
      
    

clip_image004

3. 過濾

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

代碼:

      $("#tableDepartmentInformation"
      
        ).wijgrid(

{

showFilter: 
      
      
        true
      
      
        

});
      
    

clip_image006

4. 分組

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

代碼:

      $("#tableDepartmentInformation"
      
        ).wijgrid(

{

showGroupArea: 
      
      
        true
      
      
        

});

$(
      
      "#tableDepartmentInformation"
      
        ).wijgrid(

{

allowColMoving: 
      
      
        true
      
      
        

});
      
    

clip_image008

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元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 青娱乐91视频 | 自拍在线视频 | 国产精品www | 久久精品青草社区 | 日韩一级片 | 9191精品国产免费不久久 | 国产亚洲男人的天堂在线观看 | 欧美一级成人一区二区三区 | 一级片视频免费看 | 国产系列欧美系列日韩系列在线 | 不卡一区二区在线 | 亚洲成a人片在线观看精品 亚洲成a人一区二区三区 | 美女一级毛片视频 | 久久思re热9一区二区三区 | 综合久久久久久中文字幕 | 性xxxxxx| 国产69精品久久久久妇女 | 一级大黄视频 | 黄色片网站大全 | 欧美一级一毛片 | 久久最新精品 | 黄色毛片视频免费 | 久草在线精品视频 | 久久不射网站 | 激情综合在线 | 久久99精品国产一区二区三区 | 国产精品视频专区 | 久久精品观看影院2828 | 国产aaa级一级毛片 国产aaa毛片 | 免费在线观看黄色的网站 | 中文字幕日本不卡 | 欧美日韩国产综合一区二区三区 | 日本大臿亚洲香蕉大片 | 久久婷婷五夜综合色频 | 国产一区二区三区四区 | 91视频播放 | 日本不卡免费新一区二区三区 | 日本在线中文 | 久久动漫精品 | 久精品视频 | 亚洲小视频在线 |