星期一, 3月 03, 2008

[Note]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...
    });


此外它還有排序、調整欄寬...等等的功能,整體來說,是個相當不錯的插件。

沒有留言: