jqGrid 表格封装和使用方法

关注
发布于: 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
﻿
﻿
下面开始进行配置：
在colModel中将可以编辑的字段编辑属性editable设为true，保存所需的字段(包括隐藏字段)都需要配置该属性；
最后一列操作按钮formatter方法如下:
﻿
var colModel = [ 
	...
	{
		index : 'act',
		name : 'act',
		align : "center",
		width : 120,
		formatter:immediatelyJqGridEdit
	}];
在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
﻿
文件入口：
﻿
下面开始进行配置：
在colModel中将可以编辑的字段编辑属性editable设为true，保存所需的字段(包括隐藏字段)都需要配置该属性；
最后一列操作按钮formatter方法如下:
﻿
var colModel = [ 
	...
	{
    name : 'act',
    index : 'act',
    width : 50,
    align : "center",
    formatter:function(celval, options, rowdata){
        var act = '';
        deleteBtn = "<button class=\"btn jqgrid-btn-delete\" onclick=\"deleteItem('"+ rowdata.id +"')\">删除</button>";
        act =  deleteBtn;
        return act;
    }
}];
deleteItem方法如下：
function deleteItem(rowId){
    
    $("#jqGridTable").jqGrid("delRowData",rowId);
}
3.设置jqGrid属性datatype:"local"，此属性必须得写；
4.设置jqGrid属性cellEdit : true，设置此属性后表格内单元格可以才可以编辑；
5.设置jqGrid属性cellsubmit : "clientArray"，设置此属性后编辑完单元格数据保存在本地，否则会向后台发送数据请求；
6.beforeEditCell：单元格编辑前事件，在单元格编辑前获取将要编辑的iRow和iCol，避免在编辑完表格后鼠标未离开编辑的单元格直接按保存时获取到的表格中数据是一个dom对象，lastRow和lastcell是js文件开头定义的用于保存当前编辑行和单元格标志位的全局变量，初始值var lastRow = 1;var lastcell =1。
beforeEditCell:function(rowid,cellname,value,iRow,iCol){
	lastRow = iRow;
	lastcell = iCol;
},
7.afterSaveCell：单元格编辑完的事件，此时可以获取到编辑完的数据，可以做一些数据检查；
afterSaveCell : function(rowid,cellname,value,iRow,iCol){
	var rowData = $("#jqGridTable").jqGrid("getRowData");
	if(cellname == "dataCode"){
		var count = 0;
		for(var i=0;i<rowData.length;i++){
			if(value == rowData[i].dataCode){
				count++
			}
		}
		if(count>1){
			$.showWarningMsg("数据代码重复")
			$(".addRow").attr("disabled","disabled");
			$(".btn-delete").attr("disabled","disabled");
			$("#save").attr("disabled","disabled");
		}else{
			$(".addRow").removeAttr("disabled","disabled");
			$(".btn-delete").removeAttr("disabled","disabled");
			$("#save").removeAttr("disabled","disabled");
		}
	}
}
8.loadComplete：表格加载完后事件，在表格数据加完成后做的操作，下面方法在表格加载完后判断如果当前表格数据为空时，就插入一条新的空数据，并且设置已保存至数据库的数据dataCode字段不能编辑；
﻿
**注：必须注意的是，在插入数据时colModel中设置key：true的可以区分数据唯一性的字段不能为空，否则在编辑多行新增数据时行之间的数据会错乱，但是将数据传至后台时需设置id=null用于告诉后台接口这条数据是新增数据，所以此时在插入数据时，将id的前缀设置为字符串“temp”，在调用保存接口前，将会循环表中数据将id含有temp字符串的数据id设置为空。**
loadComplete : function () {
	//获取表格对象
	var grid = $("#jqGridTable");
	//获取表格数据条数记录
	var records = grid.getGridParam("records");
	if(records == 0 ){
		var tempId = "temp1"
		$("#jqGridTable").jqGrid("addRowData",tempId,{ "id":tempId,"dataCode":"10","dataShortDescription":"","dataLongDescription":"","remark":""},"");
	}
	// 设置已保存至数据库的数值编码不能编辑
	var ids = $("#jqGridTable").jqGrid("getDataIDs");
	for(var i=0;i<records;i++){
		$("#jqGridTable").jqGrid('setCell', ids[i], 'dataCode', '', 'not-editable-cell');
	}
}
9.加载本地数据
﻿
在表格实例化后，将已经取得的表格数据dataTemp通过以下方法设置到表格中。
// jqGrid加载本地数据
$("#jqGridTable").setGridParam({data: datTemp}).trigger('reloadGrid');
﻿
$("#jqGridTable").trigger('reloadGrid')为重新加载表格数据。
﻿
10.新增按钮绑定的方法
﻿
先将 “temp”+ getTempId() 作为新插入数据的临时id，然后将新的空对象通过addRowData插入表格最后一行。
*注：getTempId() 是在common.js中取临时id的方法。
// 生成临时ID:时间戳+
function getTempId(){
	return Date.parse(new Date()) + rand(8);
}
// 生成的随机数截取m位，生成随机数最大不超过16位，能保证首位不为0
function rand(m) {
	m = m > 16 ? 16 : m;
	var num = Math.random().toString();
	if(num.substr(num.length - m, 1) === '0') {
		return rand(m);
	}
	return num.substring(num.length - m);
}
﻿
这里再强调一次！！！！！！！！非常重要！！！
﻿
**注：必须注意的是，在插入数据时colModel中设置key：true的可以区分数据唯一性的字段不能为空，否则在编辑多行新增数据时行之间的数据会错乱，但是将数据传至后台时需设置id=null用于告诉后台接口这条数据是新增数据，所以此时在插入数据时，将id的前缀设置为字符串“temp”，在调用保存接口前，将会循环表中数据将id含有temp字符串的数据id设置为空。**
function add(){
	// 设置新的临时id
	var newId = "temp" + getTempId();
	var dateObj = { "id":newId,"dataCode":"","dataShortDescription":"","dataLongDescription":"","remark":""};
	$("#jqGridTable").jqGrid("addRowData",newId,dateObj,"last");
}
﻿
10.保存方法
if(lastRow !== null && lastcell !== null ){
		$("#jqGridTable").jqGrid("saveCell",lastRow,lastcell);
	}
10.1以上代码在保存方法的开头一定要写！！！！避免在编辑完表格后鼠标未离开编辑的单元格直接按保存时获取到的表格中数据是一个dom对象，lastRow和lastcell是js文件开头定义的用于保存当前编辑行和单元格标志位的全局变量。
﻿
var rowData = $("#jqGridTable").jqGrid("getRowData");
	//检查数据
	console.log(JSON.stringify(rowData));
	var submitData = [];
	for(var i=0;i<rowData.length;i++){
		var line = i+1;
		if(rowData[i].dataCode == "" 
		   || rowData[i].dataLongDescription == ""
		   || rowData[i].dataShortDescription == ""){
			if(rowData[i].dataCode == ""){
				$.showErrorMsg("第"+line+"行数值编码不能为空");
			}else if(rowData[i].dataShortDescription == ""){
				$.showErrorMsg("第"+line+"行数值名称不能为空");
			}else if(rowData[i].dataLongDescription == ""){
				$.showErrorMsg("第"+line+"行数值说明不能为空");
			}
			return false;
		}else{
			//删除操作列
			delete rowData[i].act;
			//设置新增的含"temp"字符串的临时id为空
			if(rowData[i].id.indexOf("temp") != -1){
				rowData[i].id = null;
			}
			submitData.push(rowData[i]);
		}
	}
﻿
10.2在写完10.1代码后获取全部表格数据进行数据检查，删除多余的操作列，
并将id包含“temp”字符串的新增数据id设为null，让后台区分出这是新增数据，再将表格数据插入新的数组。
﻿
需要重新设置id=null的原因：
已经第三次提到了！！！！！！请注意
**注：必须注意的是，在插入数据时colModel中设置key：true的可以区分数据唯一性的字段不能为空，否则在编辑多行新增数据时行之间的数据会错乱，但是将数据传至后台时需设置id=null用于告诉后台接口这条数据是新增数据，所以此时在插入数据时，将id的前缀设置为字符串“temp”，在调用保存接口前，将会循环表中数据将id含有temp字符串的数据id设置为空。**
﻿
10.3在完成前面操作后将表格数据设置为头表的属性，调用接口进行保存；
var data = {
	i18nCode : $("#i18nCode").val(),
	dataTypeCode : $("input[name='dataTypeCode']").val(),
	dataShortDescription : $("input[name='dataShortDescription']").val(),
	dataLongDescription : $("input[name='dataLongDescription']").val(),
	dictionaryDetailList : submitData
}
jqGrid表格初始化：
$("#jqGridTable").jqGrid({
	datatype:"local",// 一定要写
	colNames : colNames,
	colModel : colModel,
	multiselect : true,
	postData : {
		i18nCode : parent.i18nCodeSelected,
		dataTypeCode : parent.dataTypeCodeSelected
	},
	cellEdit : true,// 单元格编辑
	cellsubmit : "clientArray",
	beforeEditCell:function(rowid,cellname,value,iRow,iCol){
		console.log(iRow);
		lastRow = iRow;
		lastcell = iCol;
	},
	afterSaveCell : function(rowid,cellname,value,iRow,iCol){
		var rowData = $("#jqGridTable").jqGrid("getRowData");
		if(cellname == "dataCode"){
			var count = 0;
			for(var i=0;i<rowData.length;i++){
				if(value == rowData[i].dataCode){
					count++
				}
			}
			if(count>1){
				$.showWarningMsg("数据代码重复")
				$(".addRow").attr("disabled","disabled");
				$(".btn-delete").attr("disabled","disabled");
				$("#save").attr("disabled","disabled");
			}else{
				$(".addRow").removeAttr("disabled","disabled");
				$(".btn-delete").removeAttr("disabled","disabled");
				$("#save").removeAttr("disabled","disabled");
			}
		}
	},
	loadComplete : function () {
		//获取表格对象
		var grid = $("#jqGridTable");
		//获取表格数据条数记录
		var records = grid.getGridParam("records");
		if(records == 0 ){
			var tempId = "temp1"
			$("#jqGridTable").jqGrid("addRowData",tempId,{ "id":tempId,"dataCode":"10","dataShortDescription":"","dataLongDescription":"","remark":""},"");
		}
		// 设置已保存至数据库的数值编码不能编辑
		var ids = $("#jqGridTable").jqGrid("getDataIDs");
		for(var i=0;i<records;i++){
			//$("#jqGridTable").jqGrid('setCell', ids[i], 'dataCode', '', 'not-editable-cell');
		}
	}
});
// jqGrid加载本地数据
$("#jqGridTable").setGridParam({data: datTemp}).trigger('reloadGrid');
全部代码太多，请查找工程中html文件参考
function save(){
	if(lastRow !== null && lastcell !== null ){
		$("#jqGridTable").jqGrid("saveCell",lastRow,lastcell);
	} 
	var rowData = $("#jqGridTable").jqGrid("getRowData");
	//检查数据
	console.log(JSON.stringify(rowData));
	var submitData = [];
	for(var i=0;i<rowData.length;i++){
		var line = i+1;
		if(rowData[i].dataCode == "" 
		   || rowData[i].dataLongDescription == ""
		   || rowData[i].dataShortDescription == ""){
			if(rowData[i].dataCode == ""){
				$.showErrorMsg("第"+line+"行数值编码不能为空");
			}else if(rowData[i].dataShortDescription == ""){
				$.showErrorMsg("第"+line+"行数值名称不能为空");
			}else if(rowData[i].dataLongDescription == ""){
				$.showErrorMsg("第"+line+"行数值说明不能为空");
			}
			return false;
		}else{
			//删除操作列
			delete rowData[i].act;
			//设置新增的含"temp"字符串的临时id为空
			if(rowData[i].id.indexOf("temp") != -1){
				rowData[i].id = null;
			}
			submitData.push(rowData[i]);
		}
	}
	var data = {
		i18nCode : $("#i18nCode").val(),
		dataTypeCode : $("input[name='dataTypeCode']").val(),
		dataShortDescription : $("input[name='dataShortDescription']").val(),
		dataLongDescription : $("input[name='dataLongDescription']").val(),
		dictionaryDetailList : submitData
	}
	$.confirm({
		msg: "确认保存？",
		successCallback: function(e, a) {
			layer.closeAll()
			$.ajax({
				url : "/dictionary/saveDictionary",
				type : "POST",
				data : JSON.stringify(data),
				contentType: "application/json; charset=UTF-8",
				success: function(res) {
					parent.layer.closeAll();
					parent.parentCallback()
				}
			})
		}
	})
}
﻿
发布于: 2020 年 07 月 22 日阅读数: 103
原文链接:【http://xie.infoq.cn/article/b05ec451ca1e7844d03898ecb】。文章转载请联系作者。
Seven_xw1213

关注
一枚前端 2019.01.15 加入
还未添加个人简介
评论 (1 条评论)

发布
InfoQ写作平台
图片上传失败了，修改下
2020 年 07 月 22 日 09:53
 0 回复
没有更多了
创作场景

jqGrid 表格封装和使用方法

jqGrid表格

1.css文件引用

﻿

2.js文件引用

﻿

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

4.使用方法

4.1.定义列显示名称数组

4.2.定义表格列的属性

4.3.初始化jqgrid

4.4.jqgrid时间字段格式化

4.5.表格字段对齐规则

4.6.表格横滚动条控制

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

4.8.表格多选

4.9.点击全选按钮事件

4.10.表格单选

4.11.点击行事件

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

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

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

4.15.tab页签中的jqgrid

4.16.jqgrid的行编辑

4.16.1 实时保存的行编辑

4.16.2jqGrid本地数据表格编辑

Seven_xw1213

评论 (1 条评论)
