March 3,2008 17:39

jquery.ingrid

最近使用了jquery.ingrid這個jQuery的插件,這裡分享幾點心得:
  • 官方文件提供的資訊極有限,所以原始碼沒事最好要看一下。
  • Client 端的 html 只要在 <table> 裡面放 <thead>, <thead>, <th> 即可,不需要放別的。另外最好用一個 <div> 包起來,這樣可以比較方便於作 requery,因為在呼叫 ingrid() 之後,DOM 會作必要的改變,因此原來你使用 selector 指定到的 element,可能就再也找不到了。使用 <div> 包起來的好處是,可以藉由 html() 重新指定 <div> 的內容。這樣就能再次使用 selector 找到要改變的 table。
  • Server 端需要處理 page, sort, dir 三個參數,這是由 Client 端的 ingrid() javascript 送出的,此外,如果 dataType 是 HTML (預設也是) 的話,只要輸出 <table>、<tbody>與<td>即可。如果你還需要指定其他的參數,可以藉由複寫 extraParams 來達到你的目的:
    var options={
      url: 'remote.html',
      extraParams: {param1: 'param1', param2: 'param2' }
    };
    $("#grid").ingrid( options ); 
    
  • 記得要指定 colWidths,有幾個 column,就要指定幾個,這是官方文件沒提及的部份。如果不指定,會很殘忍的給你錯誤。
    $("#grid").ingrid( {
      // other stuff...
      colWidths: [ 225,225,225,225 ],
      // other stuff...
    }); 
    
此外它還有排序、調整欄寬...等等的功能,整體來說,是個相當不錯的插件。


  • elleryq 發表於樂多回應(3)引用(0)資訊相關Idea與筆記編輯本文
    樂多分類:網路/3C │昨日人次:3 │累計人次:508
    Ads by Roodo! 

    引用URL

    http://cgi.blog.roodo.com/trackback/5628631

    回應文章

    請問一下 ingrid的serverside要回傳是用get回傳還是post..,我看不太董他的sample code...能否請大哥做個簡易指導呢?
    | 檢舉 | Posted by a655088 at September 21,2008 17:50
    get/post 都可以...
    | 檢舉 | Posted by elleryq at September 21,2008 23:14

    請問一下,ingrid包住的部份,是不是一定會在左邊,不能置中??
    ---------------------------------------------
    版主回覆:
    這我倒是沒注意。我記得裡面的內容不是從 server 回來的嗎?也許可以從那兒下手。
    | 檢舉 | Posted by 阿憲 at January 29,2010 14:07