【jqgrid】简单封装

最新推荐文章于 2021-02-16 11:52:49 发布

blackbeauty1024

最新推荐文章于 2021-02-16 11:52:49 发布

阅读量3.5k

点赞数

分类专栏： jqgrid 文章标签： jqgrid 封装

本文链接：https://blog.csdn.net/blackbeauty1024/article/details/44015767

版权

本文介绍了如何简单封装jqgrid，重点讲解了如何通过gridSql配置从数据库获取数据，以及利用datasourceClass处理复杂查询。同时，文章还讨论了如何实现合并表头、单元格内容修改后的标识、导出Excel功能，并详细阐述了分页多选和本地全选的实现，特别是支持分页选中的特性。最后，提到了如何触发全选和取消全选的事件，以及jqGridSelectAll事件的添加。

摘要由CSDN通过智能技术生成

如果要实现上面的grid，使用原生的jqgrid如下：

	function queryUser(){
		$("#testJqgrid").trigger("reloadGrid",[{page:1}]);
	}
	$(function(){
		initGrid();
	});
	function initGrid(){
		$("#testJqgrid").jqGrid({
			datatype: "json",
			mtype:'POST',
			url:"<%=request.getContextPath()%>/gridServer!server.do",
		   	colNames:['编号','用户名', '密码'],
		   	colModel:[
		   		{name:'id',index:'id', width:100,editable:true,edittype:'text'},
		   		{name:'userName',index:'userName', width:100,editable:true,sorttype:'date'},
		   		{name:'password',index:'password', width:100,editable:true,edittype:'text'}
		   	],
		   	viewrecords:true,
		   	rowNum:10,
		   	rowList:[10,20,30],
		   	sortname: 'id',
	        sortorder: "asc",
		    viewrecords: true,
		    autowidth:true,
		    height:'auto',
		    caption:"用户信息",
		    multiselect: true,
		    pager:'pageDiv',
		    altRows:true,
	        altclass:'gridAltclass',
		    prmNames:{
		    	page:"pageNum",
		    	rows:"pageSize", 
		    	sort: "sordCol",
		    	order: "orderRule", 
		    	search:"_search"
		    }
		    ,jsonReader:{
		    	total:'pageTotal',
		    	page:'pageNum',
		    	records:'totalSize',
		    	rows:'rows'
		    },
		    beforeRequest:function(){
		    	$("#testJqgrid").jqGrid('setGridParam',{
		    		postData:{
		    			gridSql:'com.myproject.user.dao.UserDao.queryByCondition',
		    			userName:$("#userName").val()
		    			}
		        });
		    }
		});
	}

如果要实现多个这样的grid，其实很多类似datatype、mtype、viewrecords、autowidth、height等等这样的配置信息是重复的，而且每次修改配置文件的时候必须要保证colNames、colModel的长度必须一致，为了让datatype等公共配置信息不分布在各个地方，我在jqgrid上做了简单的包装。虽有很多配置信息修改jqgrid源代码会更佳快捷，但我不建议这样做。如果修改了源代码，以后想通过升级jqgrid版本来引进新功能的时候我们不得不重修对新版本的源码做一次同样的修改，稍有不慎漏改或者改错了某个地方可能会导致不可预知的错误。

jquery.jqGrid.extend.js

if( Array.prototype.indexOf==undefined ){
	Array.prototype.indexOf = function(el){
		return $.inArray(el,this);
	};
}
function isEmptyString( str ){
	return str==undefined || $.trim(str)=='';
}
function queryGridData(gridId){
    $("#"+gridId).trigger("reloadGrid",[{page:1}]);
}
function exportGridExcel(gridId){
	extJqGrid.exportGridExcel(gridId);
}
var extJqGridObjects = {};
var extJqGrid ={
	defaultConfig:{
		datatype:'json',
		mtype:'POST',
		url:contextPath+"/gridServer!server.do",
		rowNum:10,
        rowList:[10,15,20],
        altRows:true,
        altclass:'gridAltclass',
	    autowidth:true,
	    height:'auto',
	    scrollOffset:0,
	    forceFit:true,
	    viewrecords:true,
	    toolbar:[true,'top'],
	    //pgbuttons:true,
	    selectLocalAllRow:false,
	    rownumbers:true,
	    showPager:true,
	    loadDataFlag:true,
	    useColSpanStyle:false,
	    excelDataFrom:'server',
	    'emptyrecords':'没有符合条件的记录',
	    prmNames:{
	    	page:"pageNum",
	    	rows:"pageSize", 
	    	sort: "sordCol",
	    	order: "orderRule", 
	    	search:"_search"
	    }
	    ,jsonReader:{
	    	total:'pageTotal',
	    	page:'pageNum',
	    	records:'totalSize',
	    	rows:'rows'
	    }
	},
	GridHeader:function(colModel){
	    if( colModel.colspan!=undefined&&colModel.colspan>1 ){
	        this.colName = isEmptyString(colModel.colspanTitle)?colModel.colName : colModel.colspanTitle;
	        if( isEmptyString(this.colName) ){
	        	this.colName = '';
	        }
	    }else{
	        this.colName = colModel.colName;
	    }
	    this.name = colModel.name;
	    this.isParent = false;
	    this.countFlag=colModel.countFlag; 
	},
	/**
	 * MergeHeader extends GridHeader
	 */
	MergeHeader:function(colModels,colIndex){
	    var colModel = colModels[colIndex];
	    extJqGrid.GridHeader.call(this,colModel);
	    if(  colModel.colspan!=undefined&&colModel.colspan>1 ){
	        var subHeaders = [];
	        for( var i=colIndex;i<(colIndex+colModel.colspan);i++ ){
	            subHeaders.push( new extJqGrid.GridHeader(colModels[i]));
	        }
	        this.subHeaders = subHeaders;
	        this.isParent = true;
	    }
	},
	/**
	 * 初始化grid表头信息，如果isParent为true，则表示该表头为合并单元格
	 */
	initGridHeaders:function(config){
	    var colModels =config.colModel;
	    var gridHeaders = [];
	    for( var i=0;i<colModels.length;i++ ){
	        if(colModels[i].hidden||isEmptyString(colModels[i].name)) continue;
	        gridHeaders.push(new extJqGrid.MergeHeader(colModels,i));
	        i+= colModels[i].colspan==undefined ? 0 : (colModels[i].colspan-1);
	    }
	    config.gridHeaders = gridHeaders;
	},
	/**
	 * 合并表头信息
	 */
	GroupHeader:function(gridHeader){
		this.startColumnName = gridH