【Jquery】Flexigrid 控件的使用心得【一】

2011-05-18

6627
0

摘要:【Jquery】Flexigrid 控件的使用心得【一】

在一開始學習ASP.NET的時候，Gridview和SqlDataSource的簡單搭配，即可做出令人驚豔的表格功能，天真的我真覺得一切都是這麼容易，但當網頁寫得越多時，就會越來越有種覺得Gridview怎麼那麼地難控制，因為客戶的要求總是特別的，怎麼可能幾個動作就能完成客戶的需求，有時候會說我想加個checkbox，我想可以多選，我想可以編輯，我想有光棒的效果，很多很多的需求造成Gridview越改越可怕，越改越覺得失控....

但自從與Jquery接觸的越來越多以後，再加上對於client和server端的互動越來越了解，還有Request和Response的觀念領悟，覺得有些東西能自己手寫的最好，因為Gridview那些東西雖然都包得好好的，但卻又不是那麼好施展手腳，多多少少還是有種難以掌控的感覺，所幸，前陣子我發現了一個不錯的東西，Flexigrid

官方網站那邊都有範例還蠻好懂得，另外我還找到了兩篇寫得蠻不錯的文章，AJAX後台網站的最後一塊拼圖 Flexigrid (1)和AJAX後台網站的最後一塊拼圖 Flexigrid (2) 寫的很詳細，從這裡面也學到很多觀念，而這裡紀錄的是，我使用的過程和心得

首先要先下載Flexigrid的js和css還有images，當然這最強大的就在於，你可以盡情的客製化他，這讓我會恨不得趕快的想了解整個架構，但礙於學習能力實在太差，所以只能一步一步的慢慢搞懂，載完後跟Jquery一樣直接加入到.NET專案裡面並且加載到網頁裡面，css檔也是，有用過Jquery UI的用法就跟他一樣，接著呢？很簡單，只要在HTML先加上<table id="dt"></table>，然後js部分

 $("#Dt").flexigrid()

接著執行網頁，妳就會發現，已經有個框框出現了！當然，這只是表示你已經跟Flexigrid初步的搭上線了，但如果沒有呢？最有可能的就是css或是images的路徑問題，我基本上是把js檔都放在js的資料夾裡，css檔就放在css的資料夾裡，圖片就放在images資料夾裡，這樣不用特別設定甚麼就可以直接用了，當然，也有可能是你忘了載Jquery進去...

再來是一些基本的option設定，因為還蠻多的，所以我只介紹幾個基本設定值，其他的可以去網路上找或是參考這篇，雖然是簡體的但還蠻詳細的，記得之前有找過一份繁體中文寫的翻譯解釋，可是忘記第一時間記錄下來了...，接著以下是有添加option的js

$("#Dt").flexigrid({
        //POST的對象網址
        url: "Notice_Manage.ashx",
        //接收的資料格式
        dataType: 'json',
        //顯示的欄位設定
        colModel: [
    { display: "編號", name: "fId", width: 40, align: "center" },
    { display: "標題", name: "fTitle", width: 180, align: "left" }
    ],
        //預設的排序欄位
        sortname: "fId",
        //是否分頁
        usepager: true,
        //排序是desc或asc
        sortorder: "desc",
        //是否替奇偶數行上色
        striped: true,
        //是否可以動態設定每頁的顯示數量
        useRp: false,
        //寬度
        width: 500,
        //每頁顯示數量
        rp: 20,
        //高度
        height: 200
    });

這基本上跟$.ajax有點像，其實Flexigrid裡面也是用$.ajax的技術來跟server端要資料，當然這些部分和server的處理就留在下一篇在分享了，最後，如果路過的前輩有意見或錯誤也歡迎盡量提出，感謝

回首頁