jqGrid 表格封装和使用方法

用户头像
Seven_xw1213
关注
发布于: 2020 年 07 月 22 日

jqGrid表格

jqgrid官方文档:https://blog.mn886.net/jqGrid/

1.css文件引用

<link rel="stylesheet" href="../static/plugins/jqgrid/v5.2.1/css/ui.jqgrid-bootstrap.css">

引用位置:在bootstrap.min.css之后,galaxy-1.0.0.min.css之前。

<link rel="stylesheet" href="../static/plugins/bootstrap/v3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/plugins/jqgrid/v5.2.1/css/ui.jqgrid-bootstrap.css">
<link rel="stylesheet" href="../static/css/galaxy-1.0.0.min.css">

使用Thymeleaf模板引用css文件如下:

<link rel="stylesheet" th:href="@{/plugins/bootstrap/v3.3.7/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/plugins/jqgrid/v5.2.1/css/ui.jqgrid-bootstrap.css}">
<link rel="stylesheet" th:href="@{/css/galaxy-1.0.0.min.css}">



2.js文件引用



<!--语言包-->
<script src="../static/plugins/jqgrid/v5.2.1/js/i18n/grid.locale-zh_CN.js"></script>
<!--jqgrid 插件-->
<script src="../static/plugins/jqgrid/v5.2.1/js/jquery.jqGrid.min.js"></script>

引用位置:在jquery-3.3.1.min.js之后,common-1.0.0-min.js之前。

<script src="../static/js/jquery-3.3.1.min.js"></script>
<script src="../static/plugins/jqgrid/v5.2.1/js/i18n/grid.locale-zh_CN.js"></script>
<script src="../static/plugins/jqgrid/v5.2.1/js/jquery.jqGrid.min.js"></script>
<script src="../static/js/common-1.0.0-min.js"></script>

使用Thymeleaf模板引用js文件如下:

<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/plugins/jqgrid/v5.2.1/js/i18n/grid.locale-zh_CN.js}"></script>
<script th:src="@{/plugins/jqgrid/v5.2.1/js/jquery.jqGrid.min.js}"></script>
<script th:src="@{/js/common-1.0.0-min.js}"></script>



3.在共通common.js中的封装方法



jqGrid默认初始化参数说明:

  • styleUI:表格皮肤为Bootstrap风格;

  • width:宽度100%;

  • contentType:请求数据类型;

  • datatype:从服务器端返回的数据类型;

  • prmNames:jqGrid将要向Server传递的默认参数名称;

  • viewrecords:是否要显示总记录数;

  • autowidth:如果为ture时,则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变,为了使表格宽度能够自动调整则需要实现函数:setGridWidth;

  • shrinkToFit:此属性用来说明当初始化列宽度时候的计算类型,如果为ture,则按比例初始化列宽度。如果为false,则列宽度使用colModel指定的宽度;

  • forceFit:当为ture时,调整列宽度不会改变表格的宽度。当shrinkToFit 为false时,此属性会被忽略;

  • height:表格默认高度,可以是数字,像素值或者百分比;

  • rowNum:每页显示记录条数,这个参数会被传递到后台;

  • rowList:一个下拉选择框,用来改变显示记录数,当选择时会覆盖rowNum参数传递到后台,默认选择列表为pageList;

  • multiselect:是否显示复选框,定义是否可以多选;

  • multiselectWidth : 复选框列的宽度,当multiselect为true时生效。



jqGrid事件说明:

  • onPaging:翻页事件

  • resizeStart:当开始改变一个列宽度时触发此事件,待整理;

  • resizeStop:当列宽度改变之后触发此事件,待整理;

  • gridComplete:当表格所有数据都加载完成而且其他的处理也都完成时触发此事件,排序,翻页同样也会触发此事件;

  • loadComplete: 当从服务器返回响应时执行,表格加载完成后执行



var pageList = [10, 20, 50, 100];
var noDataString = "<div class='no-data'>记录不存在</div>";
if ($.jgrid) {
$.jgrid.defaults.styleUI = 'Bootstrap';
$.jgrid.defaults.width = "100%";
$.jgrid.defaults.contentType = "application/json; charset=UTF-8";
$.jgrid.defaults.datatype = "json";
$.jgrid.defaults.prmNames = {
search: "search",
rows: "limit"
};
$.jgrid.defaults.viewrecords = true;
$.jgrid.defaults.autowidth = true;
$.jgrid.defaults.shrinkToFit = true;
$.jgrid.defaults.forceFit = true;
$.jgrid.defaults.height = "auto";
$.jgrid.defaults.rowNum = 10;
$.jgrid.defaults.rowList = pageList;
$.jgrid.defaults.multiselect = false;
$.jgrid.defaults.onPaging = function (pageBtn) {
var gridId = $(this).attr("id");
var inputNumer = $("#input_"+gridId).find("ui-pg-input").value;
var re_page = $("#"+gridId).getGridParam('page');// 获取当前页数
var re_rowNum = $("#"+gridId).getGridParam('rowNum');// 获取每页显示条数
var re_total = $("#"+gridId).getGridParam('lastpage'); // 获取总页数
// is Number
if (isNaN(inputNumer)) {
$("#input_"+gridId).find("ui-pg-input").value = re_page;
} else {
inputNumer = inputNumer * 1;
// Determine whether the input exceeds the maximum number of pages
if (inputNumer > re_total) {
$("#input_"+gridId).find("ui-pg-input").value = re_total;
}
if (inputNumer < 1) {
$("#input_"+gridId).find("ui-pg-input").value = 1;
}
}
}
$.jgrid.defaults.resizeStart = function (event, index) {
$("#gbox_"+$(this).attr("id")).find(".ui-jqgrid-bdiv").css('overflow-x', 'scroll');
}
$.jgrid.defaults.resizeStop = function (newwidth, index) {
var gridId = $(this).attr("id");
if (parseInt($("#gbox_"+gridId).find(".ui-jqgrid-htable").css('width').split('px')[0]) < parseInt($("#gbox_"+gridId).find(".ui-jqgrid-hdiv").css('width').split('px')[0])) {
$("#gbox_"+gridId).find(".ui-jqgrid-bdiv").css('overflow-x', 'scroll');
}
}
$.jgrid.defaults.gridComplete = function () {
loadJqgrid($(this));
}
}
// jqgrid 加载完执行方法,传入参数e:表格对象
function loadJqgrid(e){
// 获取表格对象
var grid = $(e);
var gridId = $(e).attr("id");
// 获取表格数据条数记录
var records = grid.getGridParam("records");
// 数据条数为0时,添加无数据时提示文字;数据条数不为0时,移除无数据时文字提示
if (records <= 0) {
if ($("#gbox_"+gridId).find(".ui-jqgrid-bdiv .no-data").length === 0) {
$("#gbox_"+gridId).find(".ui-jqgrid-bdiv").append(noDataString);
$("#"+gridId).setGridWidth($("#gbox_"+gridId).parent().width());
}
} else {
$("#gbox_"+gridId).find(".no-data").remove();
}
// 设定表格数据宽度
$("#"+gridId).width($("#gbox_"+gridId).width() -1);
$("#"+gridId).setGridWidth($("#gbox_"+gridId).parent().width());
$("#gbox_"+gridId).find('.ui-jqgrid-bdiv').width($("#gbox_"+gridId).width() + 2);
$("#"+gridId).width($("#gbox_"+gridId).width() - 1);
//配置有滚动条时显示滚动条
if(grid.getGridParam().shrinkToFit){
$("#gbox_"+gridId).find(".ui-jqgrid-bdiv").css('overflow', 'hidden !important');
}else{
$("#gbox_"+gridId).find(".ui-jqgrid-bdiv").css({'overflow-x':'scroll !important','overflow-y':'hidden !important'});
}
// IE浏览器下 设定表头宽度
if("-1" != IEVersion()){
$("#gbox_"+gridId).find('.ui-jqgrid-hbox').width($("#gbox_"+gridId).find('.ui-jqgrid-hdiv').width()+1);
}
// 控制是否显示横滚动条
if($("#gbox_"+gridId).width() <= $("#"+gridId).width()){
$("#gbox_"+gridId).find(".ui-jqgrid-bdiv").css("overflow-x","scroll");
}else{
$("#gbox_"+gridId).find(".ui-jqgrid-bdiv").css("overflow-x","hidden");
}
}



4.使用方法

4.1.定义列显示名称数组



定义列显示名称数组colNames,注意:数组中列显示名称个数与colModel的数据个数必须一致。

var colNames = [ 'id','申请书ID', '申请书', '保存者', '保存日期', '关键字1', '关键字2', '关键字3', '关键字4', '关键字5', '关键字6', '关键字7' ];

4.2.定义表格列的属性

定义表格列的属性数组colModel,注意:数组中表格列的属性个数与colModel的数据个数必须一致。

colModel参数大全请参照jqgrid官方文档



var colModel = [{
name: 'id',
key: true,
hidden: true
},{
index: 'applyID',
name: 'applyID',
align: 'left',
width: 160,
sortable: true,
fixed:true
}, {
index: 'applyName',
name: 'applyName',
align: "left",
width: 160,
sortable: true,
fixed:true
}, {
name: 'createUser',
align: "left",
width: 120,
sortable: true,
fixed:true
}, {
index: 'createDate',
name: 'createDate',
align: 'center',
width: 160,
sortable: true,
fixed:true
}, {
index: 'keyWord01',
name: 'keyWord01',
align: "left",
width: 100,
sortable: true,
fixed:true
}, {
index: 'keyWord02',
name: 'keyWord02',
align: "left",
width: 100,
sortable: true,
fixed:true
}, {
index: 'keyWord03',
name: 'keyWord03',
align: "left",
width: 100,
sortable: true,
fixed:true
}, {
index: 'keyWord04',
name: 'keyWord04',
align: "left",
width: 100,
sortable: true,
fixed:true
}, {
index: 'keyWord05',
name: 'keyWord05',
align: "left",
width: 100,
sortable: true,
fixed:true
}, {
index: 'keyWord06',
name: 'keyWord06',
align: "left",
width: 100,
sortable: true,
fixed:true
}, {
index: 'keyWord07',
name: 'keyWord07',
align: "left",
width: 100,
sortable: true,
fixed:true
}];



4.3.初始化jqgrid

$("#jqGridTable").jqGrid({
url: "https://www.easy-mock.com/mock/5ae968776e5d390eb9a0732d/example/getFuchsDemo",
colNames: colNames,
colModel: colModel,
multiselect: true,//复选框
pager: "#jqGridPager",
loadComplete: function () {
},
onSelectAll: function (rowids, statue) {
},
onSelectRow: function (rowid, status) {
}
});

4.4.jqgrid时间字段格式化

封装在common.js中用于jqgrid的表格时间格式化的方法如下:

// jqgrid列表时间格式化
function jqgridDateFmatter(cellvalue, options, rowObject){
var dateFormatStr = "yyyy-MM-dd hh:mm:ss";
if(options.colModel.formatoptions && options.colModel.formatoptions.dateFormat){
dateFormatStr = options.colModel.formatoptions.dateFormat;
}
return $.Utils.dateFormatter(cellvalue,dateFormatStr);
}

使用方法:

1.在定义表格列的属性数组colModel中定义formatter:jqgridDateFmatter;

2.默认时间格式为"yyyy-MM-dd hh:mm:ss",有其他格式需求时,在定义表格列的属性数组colModel,传入自定义dateFormat。使用方法如下:



var colModel = [{
index : 'createTime',
name : 'createTime',
align : "center",
width : 120,
sortable : true,
formatter:jqgridDateFmatter,
formatoptions:{dateFormat:"yyyy-MM-dd"}
}];

例:

使用默认时间格式:

var colModel = [{
index : 'modifyDatetime',
name : 'modifyDatetime',
align : "center",
width : 120,
sortable : true,
formatter:jqgridDateFmatter
}];

效果:



使用自定义时间格式:

var colModel = [{
index : 'modifyDatetime',
name : 'modifyDatetime',
align : "center",
width : 120,
sortable : true,
formatter:jqgridDateFmatter,
formatoptions:{dateFormat:"yyyy-MM-dd"},
}];

效果:



4.5.表格字段对齐规则



1.文本型、可变长度字符串左对齐,例如名称、普通文本型字段;

2.数值型右对齐,例如:金额、数字;

3.固定长度字符串居中,如性别、日期、状态、布尔类型。



例:

todo

4.6.表格横滚动条控制



与jqGrid表格是否有横滚动条的两个属性:



  • 没有横滚动条的jqGrid初始化设置

使用默认shrinkToFit为true的配置,此时表格内字段会自动分配列宽,不出现横滚动条。



代码:



````javascritpt

$("#jqGridTable").jqGrid({

url : "/security/user/userList",

colNames : colNames,

colModel : colModel,

multiselect : true,//复选框

pager : "#jqGridPager"

});

````



效果:



  • 有横滚动条的jqGrid初始化设置

表格需要展示字段过多时,设置shrinkToFit为false,此时列宽会使用colModel指定的宽度,表格出现横滚动条。

代码:



````javascritpt

$("#jqGridTable").jqGrid({

url : "/security/user/userList",

colNames : colNames,

colModel : colModel,

shrinkToFit:false,

multiselect : true,//复选框

pager : "#jqGridPager"

});

````



效果:



4.7.jqGrid加载完后自定义执行事件



jqGrid加载完后会执行gridComplete中的loadJqgrid方法,主要进行一些表格宽度的设置及横滚动条的设置以及在IE下相关的兼容性设置,如业务页面有一些自定义的操作需要设置,则在jqGrid的loadComplete事件中写自定义代码,

例:

```javascritpt

$("#jqGridTable01").jqGrid({

url : "/security/user/userList",

colNames : colNames,

colModel : colModel,

shrinkToFit:false,

multiselect : true,//复选框

loadComplete : function () {

//自定义事件

}

});

如果自定义事件一定要写在gridComplete方法中,则在业务页面先调用loadJqgrid方法,loadJqgrid方法传入参数为jqGrid实例对象,再定义后续自定义操作,
例:
```javascritpt
$("#jqGridTable01").jqGrid({
url : "/security/user/userList",
colNames : colNames,
colModel : colModel,
shrinkToFit:false,
multiselect : true,//复选框
gridComplete : function () {
loadJqgrid($(this));
//自定义事件
//...
}
});

4.8.表格多选



设置初始化参数multiselect为true,表格出现多选框,multiselectWidth属性设置多选框宽度。



代码:



$("#jqGridTable").jqGrid({
url : "/security/user/userList",
colNames : colNames,
colModel : colModel,
multiselect : true,//复选框
multiselectWidth: 80,
pager : "#jqGridPager"
});



效果:



获取多选数据的方法:

var ids = $("#jqGridTable").getGridParam("selarrrow");
//获得的ids为一个数组 例如:["300001", "732764194398801920"]

4.9.点击全选按钮事件



multiselect为ture,且点击头部的checkbox时才会触发此事件。





$("#jqGridTable").jqGrid({
url : "/security/user/userList",
colNames : colNames,
colModel : colModel,
multiselect : true,//复选框
multiselectWidth: 80,
pager : "#jqGridPager",
onSelectAll: function(aRowids,status){
var ids = $("#jqGridTable").getGridParam("selarrrow");
//获得的选中数据ids为一个数组 例如:["300001", "732764194398801920"]
}
});



4.10.表格单选



1.jqgrid表格设置成单选使用beforeSelectRow事件和resetSelection方法;

2.在loadComplete事件中将checkbox样式改成radio的样式,并且隐藏全选按钮。

代码:

```javascritpt

$("#jqGridTable").jqGrid({

url : "/security/user/userList",

colNames : colNames,

colModel : colModel,

shrinkToFit:false,

pager : "#jqGridPager",

multiselect : true,//复选框

multiselectWidth: 80,

beforeSelectRow: function(rowid, e){

jQuery("#jqGridTable").jqGrid('resetSelection');

return(true);

},

loadComplete:function(){

//替换checkbox样式成radioButton

$("input[type='checkbox']").each(function(){

$(this).attr("type","radio");

});



//隐藏全选checkbox

$("#cb_jqGridTable").attr("style","display:none");

}

});


效果:

![](/uploads/dev_sp/images/m_be3518a9d9e01bae5ff0391343e0b7fe_r.png)

**获取已选数据的方法:**
```javascript
var id=$("#jqGridTable").jqGrid('getGridParam','selrow');
//获得的id为一个字符串 例如:"300001"。

4.11.点击行事件



当选择行时触发此事件。





代码:



$("#jqGridTable").jqGrid({
url : "/security/user/userList",
colNames : colNames,
colModel : colModel,
multiselect : true,//复选框
multiselectWidth: 80,
pager : "#jqGridPager",
onSelectRow: function(rowid, status){
// 获得点击的行对象
var rowData = $("#jqGridTable").getGridParam("getRowData","rowid");
}
});



4.12.获取除当前单元格以外同一行数据的其他字段



jqgrid初始化时formatter或点击行时获取的整行数据为配置在colModel中的字段,如需要获取除显示以外的字段,在定义colModel时将该字段设置为 hidden : true,之后获取整行数据rowData则可以得到该字段。



colModel初始化:



var colModel = [ {
name : 'id',
key : true,
hidden : true
}, {
index : 'modifyTimestamp',
name : 'modifyTimestamp',
hidden : true
}];
// 获取到的行数据rowData.id可以得到隐藏字段。

4.13.点击名称打开详情页公共方法



在common.js中的公共方法:

function nameLinkFormatter(cellvalue, options, rowObject){
var showEditDialogSetting = {};
showEditDialogSetting.type = 2;
showEditDialogSetting.readOnly = options.colModel.formatoptions.openObj.readOnly?options.colModel.formatoptions.openObj.readOnly:true;
showEditDialogSetting.content = renderUrlPlaceholder(options.colModel.formatoptions.openObj.content,rowObject)?renderTip(options.colModel.formatoptions.openObj.content,rowObject):options.colModel.formatoptions.openObj.content+"?id="+rowObject.id;
if(options.colModel.formatoptions.openObj.addParames){
showEditDialogSetting.content+=options.colModel.formatoptions.openObj.addParames;
}
var title = cellvalue?cellvalue:'';
return "<a href='javascript:void(0);' class='galaxy-option-link' onclick='showEditDialog(" + JSON.stringify(showEditDialogSetting) + ")'>" + title + "</a>";
}

openObj中对象属性:



1.title为打开页面的标题显示,必填;

2.content为打开页面的url,必填,

url中传参使用占位符,在url后加上?{id}{name}可传多个字段,但多个字段必须包含在此行数据中,例如:/demo/user-add.html?{id}{name},如果不传则按照id查询详请页数据,此时content属性为/demo/user-add.html;

3.传参数据不在行数据中的情况:在openObj的属性addParames中拼接好参数传入,例如:formatoptions:{openObj:{title:"测试",content:"/security/user/user-add.html",addParames:"&test=123"}},



使用方法如下:

在colModel定义时定义

var colModel = [
...
{
index : 'userName',
name : 'userName',
align : "left",
width : 160,
formatter:nameLinkFormatter,
formatoptions:{openObj:{title:"测试",content:"/demo/user-add.html?{id}"}},
sortable : true
}
...
];

页面显示效果如下:





点击名称效果如下:

注:页面中不能编辑在具体页面中自行控制





4.14.jqgrid 表格操作按钮渲染公共方法(打开页面修改)



// TODO

4.15.tab页签中的jqgrid



在标签页中使用jqgrid:



html代码:

<div class="layui-tab" lay-filter="process">
<ul class="layui-tab-title">
<li class="layui-this">tab01</li>
<li>tab02</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<table id="jqGridTable" class="list-data-table"></table>
<div id="jqGridPager"></div>
</div>
<div class="layui-tab-item">
<table id="jqGridTable01" class="list-data-table"></table>
</div>
</div>
</div>

JS中jqGrid初始化方法(jqGrid配置项省略):

$(function () {
$("#jqGridTable").jqGrid({
url : "/security/user/userList",
colNames : colNames,
colModel : colModel,
shrinkToFit:false,
multiselect : true,//复选框
multiselectWidth: 80,
pager : "#jqGridPager"
});
$("#jqGridTable01").jqGrid({
url : "/security/user/userList",
colNames : colNames,
colModel : colModel,
shrinkToFit:false,
multiselect : true,//复选框
multiselectWidth: 80
});
});

*重要!!!!!!!!!!!!!!

在切换标签的监听事件中调用公共方法resizeJqGrid(),该方法用于重置jqGrid的表格宽度,如果不调用此方法,在标签切换后jqGrid将不会设置父容器的宽度。

在common.js中resizeJqGrid(),在浏览器窗口发生变化时也会触发此方法:

function resizeJqGrid(){
// 获取页面上的jqgrid
var jqgrids = $('.list-data-table');
if(jqgrids.length>0){
for(var i = 0;i<jqgrids.length;i++){
var gridId = $(jqgrids[i]).attr("id");
if ($('#'+gridId).length > 0 && $("#gbox_"+ gridId).find('.ui-jqgrid-htable').length > 0) {
// IE浏览器下 设定表头宽度
if("-1" != IEVersion()){
$("#gbox_"+ gridId).find('.ui-jqgrid-hbox').width($("#gbox_"+ gridId).find('.ui-jqgrid-hdiv').width()+1);
}
$('#'+gridId).setGridWidth($("#gbox_"+ gridId).parent().width());
$('#'+gridId).width($("#gbox_"+ gridId).width() - 1);
}
}
if($("#gbox_"+ gridId).width() < $('#'+gridId).width()){
$("#gbox_"+gridId).find(".ui-jqgrid-bdiv").css("overflow-x","scroll");
}else{
$("#gbox_"+gridId).find(".ui-jqgrid-bdiv").css("overflow-x","hidden");
}
}
}

标签切换监听事件:

layui.use('element', function () {
var element = layui.element;
//切换标签事件监听
element.on('tab(process)', function (data) {
resizeJqGrid();
//后续操作...
});
});

4.16.jqgrid的行编辑

4.16.1 实时保存的行编辑



适用场景:



1. 列表页,头表数据需要编辑时适用;

2. 列表页,明细表数据需要编辑时适用,此可以取到已保存到头表id。

不适用的场景:



表单页在新增时头表数据未保存到数据库,id为空,此时实时保存正在编辑的明细数据关联不到头表数据id,所以实时保存不适用,请使用16.2jqGrid本地数据表格编辑



参考文件:/demo/jqgrid-edit-demo.html





下面开始进行配置:

  1. 在colModel中将可以编辑的字段编辑属性editable设为true,保存所需的字段(包括隐藏字段)都需要配置该属性;

  2. 最后一列操作按钮formatter方法如下:



var colModel = [
...
{
index : 'act',
name : 'act',
align : "center",
width : 120,
formatter:immediatelyJqGridEdit
}];
  1. 在jqGrid实例中配置以下属性:

  • editurl:数据保存时的urlediturl :"/security/user/save",



  • ajaxRowOptions:数据保存时提交的数据格式,type默认为POST提交,contentType默认为formData提交,如果使用默认配置,可以不写该属性;



ajaxRowOptions:{
contentType:"application/json; charset=UTF-8"
},
  • serializeRowData:序列化保存的对象和数据处理,可在保存前处理保存对象,如增/删/改字段。

serializeRowData: function (postData){
// 序列化保存的对象和数据处理
return JSON.stringify(postData);
}

完整配置:

var colNames = [ 'id','modifyTimestamp', '用户账户', '用户中文名','用户英文名', '语言代码','email','操作'];
var colModel = [ {
name : 'id',
key : true,
editable : true,
hidden : true
}, {
index : 'modifyTimestamp',
name : 'modifyTimestamp',
editable : true,
hidden : true
},{
index : 'loginName',
name : 'loginName',
align : 'left',
width : 160,
editable : true,
sortable : true
}, {
index : 'userName',
name : 'userName',
align : "left",
width : 160,
editable : true,
sortable : true
},{
index : 'userNameEn',
name : 'userNameEn',
align : "left",
width : 160,
editable : true,
sortable : true
}, {
index : 'i18nCode',
name : 'i18nCode',
align : "left",
width : 120,
sortable : true
},{
index : 'email',
name : 'email',
align : "left",
width : 120,
editable : true,
sortable : true
},{
index : 'act',
name : 'act',
align : "center",
width : 120,
formatter:immediatelyJqGridEdit
}];
$(function () {
$("#jqGridTable").jqGrid({
url : "/security/user/userList",
colNames : colNames,
colModel : colModel,
multiselect : true,//复选框
pager : "#jqGridPager",
editurl :"/security/user/save",
ajaxRowOptions:{
contentType:"application/json; charset=UTF-8"
},
serializeRowData: function (postData){
// 序列化保存的对象和数据处理
return JSON.stringify(postData);
}
});
});

4.16.2jqGrid本地数据表格编辑



适用场景:有保存按钮触发后续保存事件时适用。



参考文件:/demo/jqgrid-edit-local-demo.html



文件入口:



下面开始进行配置:

  1. 在colModel中将可以编辑的字段编辑属性editable设为true,保存所需的字段(包括隐藏字段)都需要配置该属性;

  2. 最后一列操作按钮formatter方法如下:



var colModel = [
...
{
name : 'act',
index : 'act',
width : 50