jqGrid 使用筆記

jqGrid 使用筆記

工作中用到的jqgrid筆記

• 默認參數設置
• 實例化jqGrid
• 獲取所有行
• 獲取選中行
• 添加行數據
• 清空表數據
• 刷新表格數據

---

默認參數設置

var navGridParams = {
        edit:false,add:false,del:false,search:false
    };
var jqGridParams = {
        mtype:'post',
        datatype:'json',
        autowidth:true,
        height:'auto',
        viewrecords: true,
        multiselect:true,
        multiboxonly:true,
        sortorder:'desc',
        rowNum:10,
        rowList:[5,10,15,20],
        toolbar:[true,"bottom"],
        hidegrid:false,
        gridComplete:function(){
            $('.ui-pg-input').focus(function(){
                tcode_foucs=false;
            });
        }
};

實例化jqGrid

var Grid=null;
var GridParam = $.extend({},jqGridParams,{
    url:url,
    pager: '#Page',
    caption: '列表標題',
    multiselect:false,
    sortname: 'id',
    colNames:['表頭1','表頭2','表頭3','','表頭4','操作項'],
    colModel:[
     {name:'字段1',width:30,align:"center"},
     {name:'字段2',width:100,align:"center"},
     {name:'字段3', width:60,align:"center"},
     {name:'不顯示字段', hidden:true},
     {name:'需要格式化值的字段', width:80,align:"center",formatter:function(cellvalue, options, rowObject){
       return statusFormatter(rowObject);
     }},
     {name:'act',width:140,align:"center",formatter:function(cell,event,data){
        return $('#GridFormatterDIV').html().replace(/{要替換的變量1}/g,data['字段1'])
          .replace(/{要替換的變量2}/g,data['字段2']);
        }}
    ],
    ondblClickRow:function(rowid,iRow,iCol,e){
    //綁定雙擊事件
  });
  Grid = $("#Table").jqGrid(GridParam);
  //列表操作項
  $("#t_Table").css(jqGridTopStyles);
  $("#t_Table").html($('#Toolbar').html());
  $("#Table").navGrid('#Page',navGridParams);

獲取所有行

var obj = Grid.jqGrid("getRowData");
$(obj).each(function(){
    alert(this.字段);
});

獲取選擇行

Grid.jqGrid(‘getGridParam’,'selrow’);

添加行數據

Grid.addRowData(i+1,{"id":id,"name":“aaa”,"retailPrice":123,"retailPricestr":"xx","act":"x"},"last");

清空表數據

Grid.clearGridData();

刷新表格數據

Grid.trigger("reloadGrid");