jqGrid基本使用及相关方法

1.初始化

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

$("#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 '';
};(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');

你可能感兴趣的:(JavaScript)