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");