jqGrid基本使用及相关方法

1.初始化

定义一个标签容器，再在js代码中初始化：

<table id="jqGrid"></table>
$("#jqGrid").jqGrid({ url: 'data.json',  editurl: 'clientArray',  customEdit: true,  data: [],  autowidth: true,  responsive: true,  height: 'auto',  datatype: "local",  onSelectRow: editRow,  colModel: [ { label: "id",  name: "id",  hidden: true  },  { label: '备注',  name: 'remarks',  editable: true,  sortable: false  },  { label: '操作',  name: 'operations',  formatter: gridOperat,  sortable: false  } ],   });

2.相关方法

gridComplete: function () { //加载完调用 }var editRow = function (id) { //编辑一行
    var grid = $("#jqGrid");
    grid.jqGrid('editRow', id, {
        keys: true, //支持enter回车保存
        oneditfunc: function (rowId) {
            
        }
    });
   
};
var addRow = function () { //增加一行
    $("#jqGrid").jqGrid("addRow", {//增加一行并编辑，取消enter键保存
        addRowParams: {
            keys: false,
            oneditfunc: function (rowId) {
               
            }
        }
    });
（1）获取当前行rowIdvar rowId = $("#goodsPackageGrid").jqGrid('getGridParam', 'selrow');
 };（2）删除图标var gridOperat = function (cellvalue, options, rowObject) {
    return '<a><i onclick="delRow(\'' + options.rowId + '\')" class="fa fa-lg fa-trash-o page-font-color2" title="删除"></i></a>';
};（3）保存一行
var saveRow = function (rowId) {
    
};（4）删除一行delRow: function (rowid) {	
$('#jqGrid').jqGrid('delRowData', rowid);}（5）清除默认滚动条及宽度自适应$("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"}).trigger('resize');（6）保存之前获取和修改数据var data = $('#jqGrid').jqGrid('getGridParam', 'data');
var data = $('#jqGrid').jqGrid('getGridParam', 'data');