jqGrid基本使用及相关方法

最新推荐文章于 2025-07-27 11:01:16 发布

原创最新推荐文章于 2025-07-27 11:01:16 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jqGrid #javascript

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用 jqGrid 插件初始化表格，并提供了编辑、添加、删除行的方法实现。同时还详细展示了如何自定义单元格操作，如设置删除按钮等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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