基本jqgrid封装

/**
 * 获取分页列表
 *  参数：json格式 
 *  options={ 
 * grid_selector:''//表格
 * pager_selector:''//分页 
 * popup:true,判断是否是弹出层，如果弹出层调用此方法必须传此参数
 *   url : '',//数据请求url
 *   colNames:[],//列表的列名（数组）
 * colModel:[  如果需要某一列生成时为输入框模式则需要添加editable : true属性 , //列表内容（json）
 * caption:"",//列表名称 
 *      multiSort:true,（非必填）可选参数true/false,默认为true，为true时支持多列排序。
 * sortname :""按字段排序，如field1 asc,field2 desc...fieldN（字段名 排序类型）。注意最后一个字段是没有asc或者desc的
 * sortorder:""升序/降序
 * methods : function(){},用来传自己需要的方法 在加载jqgrid列表后调用
 *   edit:"column",//(非必填)设置编辑模式"column"为某一列变为可编辑模式，"line"为选中行变为可编辑模式
 * multiselect:true//左侧选择列是(true),否(false)显示,
 * rowSelectFun:funtion(rowId,status){},//列表行选中事件,当选择行时触发此事件。rowid：当前行id；status：选择状态，当multiselect 为true时此参数才可用
 * buttons:[{
 * type:""//可选值"button"(按钮)，"separator"(分隔符)
 * caption : "",//按钮名称
 * title : "添加角色",
 * buttonicon: "ace-icon fa fa-plus-circle purple",//按钮icon
 * onClickButton : add,
 * position : "last"//按钮位置 
 * }]//自定义按钮
 * }
 */
$.fn.getList = function(options){
var grid_selector = options.grid_selector;
var pager_selector = options.pager_selector;

//行编辑事件保存标记
var lastSel;

var multiselect = true;
if(options.multiselect == false){
multiselect = options.multiselect
}


var multiSort=true;
if(options.multiSort){
multiSort=options.multiSort;
}

var multiboxonly=false;
if(options.multiboxonly){
multiboxonly=options.multiboxonly;
}
   
$(grid_selector).jqGrid({

//请求路径
url : options.url,

//提交到后台的参数
postData : options.postData,

//数据类型
datatype : "json",

//请求类型
mtype : 'POST',

//语言类型
i18n:'zh-cn',

//解析从Server端发回来的json数据
jsonReader : {
root : "data.list",
records : "data.count",// 总记录数
total : "data.pageCount",// 总页数
page : "data.pageNo"// 当前页
},

//高度自适应
height : "auto",

//列显示名称
colNames : options.colNames,

//列表内容
colModel : options.colModel,

//显示总记录数
viewrecords : true,

//页面初始化时表格显示的记录数
rowNum:10,

//表格显示的记录数
rowList:[10,20,30],

//翻页用的导航栏
pager : pager_selector,

//默认拍序列
sortname : options.sortname,

//排序顺序
sortorder : options.sortorder,

//表格隔行换色
altRows : true,

//定义可以多选
multiselect : multiselect,

//定义是否支持多列排序
multiSort:multiSort,

shrinkToFit:true,

multiboxonly:multiboxonly,

       //当从服务器返回响应时加载下方翻页按钮
       loadComplete : function(response){
//判断用户是否登录超时，如果超时跳转到登录页面
$.fn.Global.isLoginTimeOut(response);
var table = this;
setTimeout(function(){updatePagerIcons(table);enableTooltips(table);}, 0);
},

//表格点击事件
onSelectRow:function(rowId,status){
if(options.rowSelectFun != null){
options.rowSelectFun(rowId,status);
}
},

//当表格加载时默认加载事件
gridComplete : function() {
if(options.gridCompleteFun != null){
options.gridCompleteFun();
}

if(options.popup){
$(options.grid_selector).jqGrid('setGridWidth',$('.modal-body', parent.document).width()-40);
}else{
$(options.grid_selector).jqGrid('setGridWidth',$(".page-content").width());
}

//设置表头标题居中
$('.ui-jqgrid-sortable').css("text-align","center");


//取得宽度的像素值
//var widpx = $('.jqgfirstrow td:last-child').css('width');

//去掉最后的px
//var wid = widpx.substring(0,widpx.length - 2);

//宽度减1
//$('.jqgfirstrow td:last-child').css('width',parseInt(wid) - 1);

$(grid_selector).css("border-left","0");

//设置编辑模式"column"时，设置列可以编辑
if(options.edit == "column"){
           var ids = $(grid_selector).jqGrid('getDataIDs');
           for ( var i = 0; i < ids.length; i++) {
            $(grid_selector).jqGrid('editRow', ids[i]);
           }
}
},

//表格双击编辑事件
ondblClickRow: function(id){
//设置编辑模式"line"时，设置行可编辑
if(options.edit == "line"){
//重置gird的选中状态
//$("#grid-table").resetSelection();
    if(id && id!==lastSel){ 
       $(grid_selector).saveRow(lastSel, {url: options.saveurl,extraparam:{token: $.cookie("token")}}); 
       lastSel=id; 
    }
    $(grid_selector).editRow(id, {keys:true, url: options.saveurl,extraparam:{token: $.cookie("token")}});
    //选中编辑行
    $("#grid-table").setSelection(id);
}
},
 
//表格名称
caption : options.caption
});

// 调整大小以适应页面大小
$(window).on('resize.jqGrid',function() {

if(options.popup){

$(options.grid_selector).jqGrid('setGridWidth',$('.modal-body', parent.document).width()-40);
}else{
$(options.grid_selector).jqGrid('setGridWidth',$(".page-content").width());

}
})

//触发窗口调整大小
$(window).triggerHandler('resize.jqGrid');


// 与fontawesome图标像上面所替换图标
function updatePagerIcons(table) {
var replacement = {
'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
};
$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(
function() {
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));


if ($class in replacement)
icon.attr('class', 'ui-icon '+ replacement[$class]);
})
}


function enableTooltips(table) {
$('.navtable .ui-pg-button').tooltip({
container : 'body'
});
$(table).find('.ui-pg-div').tooltip({
container : 'body'
});
}


$(document).on('ajaxloadstart', function(e) {
$(grid_selector).jqGrid('GridUnload');
$('.ui-jqdialog').remove();
});

// navButtons
$(grid_selector).jqGrid('navGrid', pager_selector, {
// navbar options
edit : false,
add : false,
del : false,
search : false,
refresh : false,
view : false
})

//绑定操作按钮
if(options.buttons){
if (options.buttons.length > 0) {
$.each(options.buttons, function(i) {
var type = options.buttons[i].type;
switch(type){
case "button":
jQuery(grid_selector).navButtonAdd(pager_selector,options.buttons[i]);
break;
case "separator":
jQuery(grid_selector).navSeparatorAdd(pager_selector,options.buttons[i]);
break;
}
});
}
}
};

有喜欢的朋友可以关注下头条号《老徐聊技术》