Thinking more...:jquery.ingrid

March 3,2008

最近使用了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...
}); 
```

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

Posted by elleryq at 樂多Roodo! │17:39 │回應(2) │引用(0) │資訊相關Idea與筆記

樂多分類：網路/3C 共同主題：JavaScript範例工具：編輯本文