因为公司项目的需要，并且公司只有我这一个能写js的前端，这个自定义展示jqgrid列选项的需求依然是交由我写，辣么就分享一下我的工作成果。
1 //初始化函数 2 multiselectcolinit(); 3 //调用下拉多选点击事件以及对应传参 4 5 function multiselectcolinit() { 6 multiselect = { 7 //ajaxmodelnames: [], //此jqgrid列头名称对应的id数组用于传给后台 8 contorljqgridcol: function(names, modelnames, kehuselecthides, ajaxhideids) { 9 var self = $(input[data-multiselect]), 10 selfhei = self.outerheight(true), //点击input的高度 11 self_offset_top = self.offset().top, 12 self_left = self.offset().left, 13 selecthides = selectsames(modelnames, kehuselecthides), 14 self_top = self_offset_top + selfhei, 15 multi_select = '<div class=multiselect><ul><li class="ckallli"><input type="checkbox" checked="true" class="ckallbox">全选</li>', 16 len = names.length, //总列数 17 hidelen = selecthides.length, //隐藏的列数 18 showlen = len - hidelen, //显示的列数 19 selfstr = '共有' + len + '列，显示' + showlen + '列，隐藏' + hidelen + '列', //17.5.4新增 20 //ajaxnames = [], //此jqgrid列头名称数组用于传给后台 21 ajaxmodelnames = selecthides; //此jqgrid列头名称对应的id数组用于传给后台 22 if (hidelen > 0) { 23 multi_select = '<div class=multiselect><ul><li class="ckallli"><input type="checkbox" class="ckallbox">全选</li>'; 24 } 25 for(i = 0; i < len; i++) { 26 if(selecthides.indexof(modelnames[i]) > -1) { 27 multi_select += '<li class="multili"><input type="checkbox" value=' + modelnames[i] + ' class="multicheckbox">' + names[i] + '</li>'; 28 } else { 29 multi_select += '<li class="multili"><input type="checkbox" checked="true" value=' + modelnames[i] + ' class="multicheckbox">' + names[i] + '</li>'; 30 } 31 32 } 33 multi_select += '</ul></div>'; 34 $('body').append(multi_select); 35 $('.multiselect').css({ 36 'top': self_top, 37 'left': self_left 38 }); 39 //新增初次加载input框内显示有多少列，多少列默认没有显示 40 self.val(selfstr); 41 self.attr('showcol', showlen); 42 //17-5-8 新增窗口大小改变事件重新定位多选框 43 $(window).resize(function () { 44 if ($('.multiselect').length) { 45 var selfhei = self.outerheight(true), //点击input的高度 46 self_offset_top = self.offset().top, 47 self_left = self.offset().left, 48 self_top = self_offset_top + selfhei; 49 $('.multiselect').css({ 50 'top': self_top, 51 'left': self_left 52 }); 53 } 54 55 }); 56 $(input[data-multiselect]).click(function(e) { 57 stoppropagation(e); 58 if($('.multiselect').length) { 59 $('.multiselect').show(); 60 } 61 }) 62 $('.multiselect').click(function(e) { 63 stoppropagation(e); 64 }) 65 $(document).on(click, function() { 66 if($('.multiselect').length && $('.multiselect').is(:visible)) { 67 $('.multiselect').hide(function() { //回调是否保存数据 68 ajaxhideids(ajaxmodelnames); 69 }); 70 } 71 }) 72 $(.multicheckbox).click(function(e) { 73 stoppropagation(e); 74 var val = $(this).attr(value), 75 showcol = parseint(self.attr('showcol')), 76 newshowcol = 0; 77 if(!$(this).prop(checked)) { //如果当前选中 78 $(#gridlist).jqgrid('hidecol', val); 79 newshowcol = showcol - 1; 80 ajaxmodelnames.push(val); 81 } else { 82 $(#gridlist).jqgrid('showcol', val); 83 newshowcol = showcol + 1; 84 ajaxmodelnames.remove(val); 85 } 86 var newnoshowcol = len - newshowcol; 87 selfstr = '共有' + len + '列，显示' + newshowcol + '列，隐藏' + newnoshowcol + '列'; //17.5.4新增 88 self.val(selfstr); 89 self.attr('showcol', newshowcol); 90 }) 91 $('.multili,.ckallli').click(function (e) { 92 stoppropagation(e); 93 var childinput = $(this).find('input'); 94 childinput.trigger('click'); 95 }) 96 $(.ckallbox).click(function (e) {//全选input的全选点击事件 97 stoppropagation(e); 98 if ($(this).prop(checked)) {//应该全部隐藏 99 $(.multicheckbox).each(function (index, obj) {100 var _this = $(obj);101 if (!_this.prop(checked)) {102 _this.trigger(click);103 }104 })105 106 } else {107 $(.multicheckbox).each(function (index, obj) {108 var _this = $(obj);109 if (_this.prop(checked)) {110 _this.trigger(click);111 }112 })113 }114 })115 116 },117 jqgridhiddencolinit: function(opt, modelnames, kehuselecthides) { //opt为传入的jqgrid的option.model118 var objmodel = opt,119 objmodellen = objmodel.length;120 for(var k = 0; k < objmodellen; k++) {121 if(selectsames(modelnames, kehuselecthides).indexof(objmodel[k].name) > -1) {122 objmodel[k].hidden = true;123 }124 }125 return objmodel;126 }127 }128 129 }130 131 function stoppropagation(e) {132 window.event ? window.event.cancelbubble = true : e.stoppropagation();133 }134 135 function selectsames(arr1, arr2) { //选择前面2个数组中重复的赋值给第三个参数数组136 //arr1是jqgrid自带的所有modelname的id集合137 //arr2是客户选择的需要隐藏的jqgrid的id集合138 //arr3是返回2个数组中重复的id集合139 var arr3 = [];140 for(var s in arr1) {141 for(var x in arr2) {142 if(x != 'remove') {143 if(arr2[x] == arr1[s]) {144 arr3.push(arr1[s]);145 }146 }147 }148 }149 return arr3;150 }151 152 array.prototype.indexof = function(val) {153 for(var i = 0; i < this.length; i++) {154 if(this[i] == val) return i;155 }156 return -1;157 };158 array.prototype.remove = function(val) {159 var index = this.indexof(val);160 if(index > -1) {161 this.splice(index, 1);162 }163 };
上面的是我封装好的函数代码，现在看一下html页面需要给予什么参数以及在哪里调用。
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <meta http-equiv="x-ua-compatible" content="ie=100"> 7 <title></title> 8 <link href="../content/css/homecommon.css?1.1.11" rel="stylesheet" /> 9 <link href="../content/plugins/jqgrid/ui.jqgrid.css?1.1.11" rel="stylesheet" /> 10 <style> 11 .multiselect { 12 display: none; 13 position: absolute; 14 background:rgba(255,255,255,0.8); 15 border: 1px solid #dfdfdf; 16 color:#000; 17 } 18 .multiselect li, .multiselect input { 19 cursor: pointer; 20 margin: 5px 3px 5px 2px; 21 } 22 .multiselect ul{ 23 height:250px;/*高度可以自定义*/ 24 overflow:auto; 25 } 26 .box{ 27 border-bottom:0; 28 } 29 </style> 30 </head> 31 32 <body> 33 <div class="content"> 34 <div class="content10"> 35 <div class="box-body box"> 36 <div> 37 <!--<span style="width:500px;display:inline-block;"></span>--> 38 表头配置： 39 <input type="text" data-multiselect style="width: 180px;"> 40 </div> 41 </div> 42 <table class="jqgrid" id="gridlist"></table> 43 <div id="gridpage"></div> 44 </div> 45 </div> 46 <script src="../content/js/jquery-1.11.0.js?1.1.11"></script> 47 <script src="../content/plugins/multiselectcontroljqgridcol/jqgrid动态控制列显示隐藏.js?1.1.11"></script> 48 <script src="../content/plugins/jqgrid/jquery.jqgrid.min.js?1.1.11"></script> 49 <script> 50 $(function () { 51 //names=[jqgrid的列头名称，这个值负责下拉列表的名称显示] 52 //modelnames=[jqgrid列头名称对应的id,这个值控制jqgrid的列显示隐藏] 53 //names数组与modelnames数组2个值必须一一对应 54 var names = ['常用', '流水号', '疫苗种类', '疫苗信息', '包装(支/件)', '生产企业', '库存量', '采购数量', '采购价（元）', '采购金额（元）', '生产注册号（隐藏）'], 55 modelnames = ['iscu', 'drugid', 'drugtype', 'productname', 'packunit', 'companyname_sc', 'storagecount', 'purchasecount', 'actualprice', 'companyid_sc'], 56 //kehuselecthides后台取值----客户选定的隐藏的列数据 57 kehuselecthides = ['iscu', 'drugid', '1111', '2222', 'storagecount']; 58 //kehuselecthides = []; 59 60 //ajaxhideids 是定义的隐藏下拉框之后调用的回调函数 61 multiselect.contorljqgridcol(names, modelnames, kehuselecthides, function (data) { 62 //第四个function是定义的隐藏下拉框之后调用的回调函数（data是需要隐藏的列id集合） 63 alert(data); 64 65 }); 66 //jqgrid初始化 67 var obj = { 68 names: ['常用', '流水号', '疫苗种类', '疫苗信息', '包装(支/件)', '生产企业', '库存量', '采购数量', '采购价（元）', '采购金额（元）', '生产注册号（隐藏）'], 69 model: [{ 70 name: 'iscu', 71 index: 'iscu', 72 width: 50, 73 align: 'center', 74 sortable: false, 75 //fixed: true, 76 //resizable:false, 77 formatter: function (cellvalue, options, rowobject) { 78 if (cellvalue == 1) { 79 return <a style='cursor:pointer;' onclick='btdel(\"" + rowobject.drugid + "\");'>加入</a>; 80 } else { 81 return <a style='cursor:pointer;' onclick='btadd(\"" + rowobject.drugid + "\");'>取消</a>; 82 } 83 } 84 }, 85 { 86 name: 'drugid', 87 index: 'drugid', 88 width: 100, 89 align: 'center', 90 sortable: false 91 //fixed: true 92 }, 93 { 94 name: 'drugtype', 95 index: 'drugtype', 96 width: 170, 97 align: 'left', 98 //resizable: false, 99 sortable: false,100 //fixed: true101 },102 {103 name: 'productname',104 index: 'productname',105 width: 315,106 align: 'left',107 sortable: false,108 //resizable: false,109 //fixed:true110 111 },112 {113 name: 'packunit',114 index: 'packunit',115 width: 80,116 align: 'center',117 sortable: false118 },119 {120 name: 'companyname_sc',121 index: 'companyname_sc',122 width: 200,123 align: 'left',124 sortable: false125 },126 {127 name: 'storagecount',128 index: 'storagecount',129 width: 80,130 align: 'center',131 sortable: false,132 formatter: function (cellvalue, options, rowobject) {133 return <span class='label pull-center bg-blue'> + cellvalue + </span>;134 }135 },136 {137 name: 'purchasecount',138 index: 'purchasecount',139 width: 150,140 align: 'center',141 sortable: false,142 formatter: function (cellvalue, options, rowobject) {143 return <button id=\"" + rowobject.drugid + "_reduce\" type=\"button\" onclick=\"btnreduce(this.id)\" title=\"-\" style=\"width:20px;padding: 1px;background-color: #f6f2f2;border:1px solid #dfdfdf\">-</button><input type=\"text\" id=\"" + rowobject.drugid +144 "_purchasecount\" value=\"0\" style=\"width:40px;text-align:center;margin:0 3px;height:19px\" maxlength=\"5\" onchange=\"showvalue(this.id,'" + rowobject.companyname_sc + "','" + rowobject.productname + "【" + rowobject.ymmedicinemodel + " " + rowobject.ymoutlookc + " " + rowobject.drugfactor + rowobject.formulation + "/" + rowobject.ymunit + "】','" + rowobject.packunit + "')\" onfocus=\"foc(this.id)\"/><button class=\"addthis\" type=\"button\" id=\"" + rowobject.drugid +145 "_add\" onclick=\"btnadd(this.id,'" + rowobject.companyname_sc + "','" + rowobject.productname + "【" + rowobject.ymmedicinemodel + " " + rowobject.ymoutlookc + " " + " " + rowobject.drugfactor + rowobject.formulation + "/" + rowobject.ymunit + "】','" + rowobject.packunit + "')\" title=\"+\" style=\"width:20px;text-align:center;background-color: #f6f2f2;border:1px solid #dfdfdf;padding:1px\">+</button>;146 }147 },148 {149 name: 'actualprice',150 index: 'actualprice',151 width: 100,152 align: 'right',153 sortable: false154 },155 {156 name: 'amount',157 index: 'amount',158 width: 130,159 align: 'right',160 sortable: false161 },162 {163 name: 'companyid_sc',164 index: 'companyid_sc',165 width: 100,166 align: 'center'167 }168 ]169 };170 171 giddata = [{172 actualprice: 1,173 approval: s20140114,174 companyid_sc: j0383,175 companyname_sc: merck sharp & dohme corp.,176 companyname_zd: 北京科园信海医药经营有限公司,177 drugfactor: 1,178 drugid: 2,179 drugtype: 23价肺炎球菌多糖疫苗,180 formulation: 瓶,181 hospitalid: jk003,182 iscu: 1,183 netprice: null,184 packaging: 玻璃西林瓶,185 packunit: 144,186 productname: 23价肺炎球菌多糖疫苗,187 remark: null,188 storagecount: 0,189 ymmedicinemodel: 注射液,190 ymoutlookc: 0.5ml/瓶,191 ymunit: 盒,192 amount: '10'193 }];194 195 //初始化隐藏jqgrid客户选择的列196 obj.model = multiselect.jqgridhiddencolinit(obj.model, modelnames, kehuselecthides),197 $(#gridlist).jqgrid({198 /* url: stdgoods/getstdgoodsdata.html,199 contenttype : 'application/json',200 datatype: json,*/201 datatype: local,202 data: giddata,203 //autowidth: true,204 autowidth: false,205 shrinktofit: false, //默认不自适应206 height: 270,207 colnames: obj.names,208 colmodel: obj.model,209 rownum: 20,210 rowlist: [10, 20, 50, 100],211 //rownumbers: true,212 pager: #gridpage,213 viewrecords: true,214 multiselect: true,215 caption: ,216 //postdata: {isusing:1},217 rownumbers: true, //隐藏jqgrid的序号218 //序号宽度自动变化219 gridcomplete: function () {220 var dochei = parseint($(body).height()) - 9,221 winhei = parseint($(window).height()),222 jqhei = parseint($(.ui-jqgrid-bdiv).height());223 if (dochei >= winhei) {224 var heit = dochei - winhei,225 tuhei = jqhei - heit;226 $(.ui-jqgrid-bdiv).css(height, tuhei);227 } else {228 var hei = winhei - dochei + jqhei;229 $(.ui-jqgrid-bdiv).css(height, hei);230 }231 $(.jqgrid).jqgrid(setgridwidth, $(.content10)[0].offsetwidth - 20);232 var ids = $(#gridlist).getdataids();233 for (var i = 0; i < ids.length; i++) {234 var id = ids[i];235 jquery(#gridlist).jqgrid('editrow', id);236 }237 },238 239 jsonreader: {240 repeatitems: false,241 id: goodsid242 }243 });244 $(#gridlist).jqgrid('navgrid', '#gridpage', {245 add: false,246 edit: false,247 del: false,248 search: false,249 refresh: false250 }).jqgrid('setfrozencolumns');251 252 });253 </script>254 255 </body>256 257 </html>
需要注意的几个点：
1.参数选项需要看清楚，html和js里都有注释说明
2.jqgrid的版本4.6.0
3.jquery的版本1.11.0
这个功能的注意点主要是参数的传输以及何处调用，注意点搞清了，这个功能有需求的小伙伴们拿去用吧~~~
以上就是前端基于jqgrid实现自定义列头展示的详细内容。