常用的10個jqgrid提示

網路上看的10 JQGrid Tips learned from my experience，再補點自己常遇到的

1. Changing JQGrid width and height

   "//自動調寬度
   jQuery("#list2").jqGrid({
   autowidth: true, 
   ...
   //手動設定
   $("#list2").setGridWidth(200,true); //忘了true是什麼

   
   
   

   ColModel的屬性

   jQuery("#list2").jqGrid({
   ...
   colModel: [
   {
    name: 'rowid',  //將欄位名稱
    index: 'rowid asc, createddate', //click此欄位的排序會依據的order
     width: 50,
    sorttype: "int",
     align: "center",
    key:true, //將欄位設為pk
    search:true, //是否提供search
    hidden:false, //讓此欄位隱藏
   ...

2. Grid without unnecessary scroll area
3. Error due to missing locale file
4. Callback function
   
   • loadComplete //ajax完成後的事件
     

     loadComplete: function(){
     var ids = jqgrid.jqGrid('getDataIDs'); //取得所有ids  
     alert(ids.length);

   • gridComplete //將所有資料讀進grid後的事件

   gridComplete及loadComplete差異
   $("#list").clearGridData();會觸發gridComplete
   利用ajax讀入資料時，jqgrida會先清掉grid內容，但不會觸發gridComplete，而讀完資料時，先後觸發gridComplete及loadComplete

   其他event
   
5. Using pagers only for buttons (or icons)
6. Hiding unwanted buttons in navigation bar
7. Hiding the inline search by default
8. Having your own icons for navigation bar buttons
9. Removing title bar close button
10. Adding toolbar    

常用指令

• Get data from selected row
  

  var id = jQuery("#list2").jqGrid('getGridParam','selrow'); 
  if (id) {
      var ret = jQuery("#list2").jqGrid('getRowData',id); //3.6的方法
      //var ret = jQuery("#list2").getRowData(id);  //3.5以前的方法
      alert("id="+ret.id+" invdate="+ret.invdate+"...");
  } else {
      alert("Please select row");
  } 

• 刪除
  //設定刪除事件
  

  $("#bDelete").click(function(){
  // Get the currently selected row
  toDelete = $("#mygrid").jqGrid('getGridParam','selrow');
  
  // You'll get a pop-up confirmation dialog, and if you say yes,
  // it will call "delete.php" on your server.
  $("#mygrid").jqGrid(
  'delGridRow',
  toDelete,
  { url: 'delete.php',
  reloadAfterSubmit:false}
  );
  });

  post資料有[oper] => del,[id] => 88

  Custom delete button in jqGrid
  
  //直接在navigator裡設刪除事件
  

  jQuery("#list2").jqGrid({
  ...
  }).navGrid('#pager2', {
  view: true,
  edit: true,
  add: false,
  del: true
  },{
     //依序view
  },{
      /edit
  },{
      //add
  },{
      //delete options 
      url: 'delete.php', //response的url
  
      //submit前驗證,其他看p.s.1
       beforeSubmit : function(id, formid) {
          if (id) {
             var ret = jQuery("#list2").jqGrid('getRowData',id);
             if (!(ret.xxx == "" )
              {
                  return [false,"xxx皆為空白才可以刪除"]; //false會顯示錯誤訊息
              }
          } else {
              return [false,"Please select row"];
          }
          return [true,""]; //true才會繼續
     
  }

  
  
  //刪除第12行row
  

  var su=jQuery("#list5").jqGrid('delRowData',12);
  if(su) 
      alert("Succes. Write custom code to delete row from server"); 
  else
      alert("Allready deleted or not in list"); 

  //清空grid內容
  

  $("#list1").clearGridData();

References

• 10 JQGrid Tips learned from my experience
• jqgrid wiki document
• jqgrid表單CRUD的事件