前端基於JQgrid實作自訂列頭展示
前端
基於
實現
自訂
先上效果圖
因為公司專案的需要，而且公司只有我這一個能寫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: "goodsId"242 }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實作自訂列頭展示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前
By DDD
Inzoi：如何申請學校和大學
4 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前
By DDD
在哪裡可以找到Atomfall中的站點辦公室鑰匙
4 週前
By DDD
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
華為手機如何實現雙微信登入？
Mar 24, 2024 am 11:27 AM
華為手機如何實現雙微信登入？隨著社群媒體的興起，微信已成為人們日常生活中不可或缺的溝通工具之一。然而，許多人可能會遇到一個問題：在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說，實現雙微信登入並不困難，本文將介紹華為手機如何實現雙微信登入的方法。首先，華為手機自帶的EMUI系統提供了一個很方便的功能－應用程式雙開。透過應用程式雙開功能，用戶可以在手機上同
PHP程式設計指南：實作斐波那契數列的方法
Mar 20, 2024 pm 04:54 PM
程式語言PHP是一種用於Web開發的強大工具，能夠支援多種不同的程式設計邏輯和演算法。其中，實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中，將介紹如何使用PHP程式語言來實作斐波那契數列的方法，並附上具體的程式碼範例。斐波那契數列是一個數學上的序列，其定義如下：數列的第一個和第二個元素為1，從第三個元素開始，每個元素的值等於前兩個元素的和。數列的前幾元
edius自訂螢幕佈局的操作流程
Mar 27, 2024 pm 06:50 PM
1.下圖是edius預設的螢幕佈局，預設的EDIUS視窗佈局是橫向版式，因此在單一顯示器環境中，許多視窗是重疊在一起的，且預覽視窗為單一視窗模式。 2、您可以透過【檢視】選單列啟用【雙視窗模式】，使預覽視窗同時顯示播放視窗和錄製視窗。 3.您可以透過【檢視功能表列>視窗佈局>常規】來恢復預設螢幕佈局。另外您也可以自訂適合您的佈局方式，並儲存為常用螢幕佈局：將視窗拖曳成適合自己的佈局，然後點擊【檢視>視窗佈局>儲存目前佈局>新建】，在彈出的【儲存目前佈局】小視窗中輸入佈局名稱，按確定
如何在華為手機上實現微信分身功能
Mar 24, 2024 pm 06:03 PM
如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視，微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號，方便管理和使用。在華為手機上實現微信分身功能並不困難，只需要按照以下步驟操作即可。第一步：確保手機系統版本和微信版本符合要求首先，確保你的華為手機系統版本已更新至最新版本，以及微信App
PHP與Vue：完美搭檔的前端開發利器
Mar 16, 2024 pm 12:09 PM
PHP與Vue：完美搭檔的前端開發利器在當今網路快速發展的時代，前端開發變得愈發重要。隨著使用者對網站和應用的體驗要求越來越高，前端開發人員需要使用更有效率和靈活的工具來創建響應式和互動式的介面。 PHP和Vue.js作為前端開發領域的兩個重要技術，搭配起來可以稱得上是完美的利器。本文將探討PHP和Vue的結合，以及詳細的程式碼範例，幫助讀者更好地理解和應用這兩
掌握Golang如何實現遊戲開發的可能性
Mar 16, 2024 pm 12:57 PM
在現今的軟體開發領域中，Golang（Go語言）作為一種高效、簡潔、並發性強的程式語言，越來越受到開發者的青睞。其豐富的標準庫和高效的並發特性使它成為遊戲開發領域的一個備受關注的選擇。本文將探討如何利用Golang來實現遊戲開發，並透過具體的程式碼範例來展示其強大的可能性。 1.Golang在遊戲開發中的優勢作為靜態類型語言，Golang正在建構大型遊戲系統
PHP遊戲需求實作指南
Mar 11, 2024 am 08:45 AM
PHP遊戲需求實現指南隨著網路的普及和發展，網頁遊戲的市場也越來越火爆。許多開發者希望利用PHP語言來開發自己的網頁遊戲，而實現遊戲需求是其中一個關鍵步驟。本文將介紹如何利用PHP語言來實現常見的遊戲需求，並提供具體的程式碼範例。 1.創造遊戲角色在網頁遊戲中，遊戲角色是非常重要的元素。我們需要定義遊戲角色的屬性，例如姓名、等級、經驗值等，並提供方法來操作這些
excel怎麼自訂x軸和y軸？ (excel座標軸刻度如何自訂)
Mar 14, 2024 pm 02:10 PM
在excel表格中，有時候可能需要插入座標軸，能夠更直觀地看到資料的變化趨勢。還有些小夥伴不清楚怎麼在表中插入座標軸，接下來小編就跟大家分享一下excel自訂座標軸刻度的方法吧。 座標軸插入方法： 1、在excel介面中，選取資料。 2、在插入介面中，點選插入長條圖或長條圖。 3、在展開的介面中，選擇形圖類型。 4、在表格右鍵介面中，點選選擇資料。 5、在展開的介面中，進行自訂即可。
