前端基於JQgrid實作自訂列頭展示-js教程-PHP中文網

首頁

web前端

js教程

前端基於JQgrid實作自訂列頭展示

巴扎黑

Jun 26, 2017 pm 02:30 PM

前端基於實現自訂

先上效果圖

因為公司專案的需要，而且公司只有我這一個能寫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><ul>
<li>
<input>全选</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><ul>
<li>
<input>全选</li>'; 24             } 25             for(i = 0; i  -1) { 27                     multi_select += '<li>
<input>' + names[i] + '</li>'; 28                 } else { 29                     multi_select += '<li>
<input>' + 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  -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  -1) {161         this.splice(index, 1);162     }163 };</ul></div><p> </p><p>上面的是我封裝好的函數程式碼，現在看一下html頁面需要給予什麼參數以及在哪裡呼叫。 </p><div class="cnblogs_code"><pre class="brush:php;toolbar:false">  1 nbsp;html>  2   3   4   5     <meta>  6     <meta>  7     <title></title>  8     <link>  9     <link> 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  31  32  33     <div> 34         <div> 35             <div> 36                 <div> 37                     <!--<span style="width:500px;display:inline-block;"></span>--> 38                     表头配置： 39                     <input> 40                 </div> 41             </div> 42             <table></table> 43             <div></div> 44         </div> 45         </div> 46         <script></script> 47         <script></script> 48         <script></script> 49         <script> 50             $(function () { 51                 //names=[jqgrid的列头名称，这个值负责下拉列表的名称显示] 52                 //modelnames=[jqgrid列头名称对应的id,这个值控制jqgrid的列显示隐藏] 53                 //names数组与modelnames数组2个值必须一一对应 54                 var names = [&#39;常用&#39;, &#39;流水号&#39;, &#39;疫苗种类&#39;, &#39;疫苗信息&#39;, &#39;包装(支/件)&#39;, &#39;生产企业&#39;, &#39;库存量&#39;, &#39;采购数量&#39;, &#39;采购价（元）&#39;, &#39;采购金额（元）&#39;, &#39;生产注册号（隐藏）&#39;], 55                     modelnames = [&#39;ISCU&#39;, &#39;DRUGID&#39;, &#39;DRUGTYPE&#39;, &#39;PRODUCTNAME&#39;, &#39;PACKUNIT&#39;, &#39;COMPANYNAME_SC&#39;, &#39;STORAGECOUNT&#39;, &#39;PURCHASECOUNT&#39;, &#39;ACTUALPRICE&#39;, &#39;COMPANYID_SC&#39;], 56                     //kehuSelectHides后台取值----客户选定的隐藏的列数据 57                     kehuSelectHides = [&#39;ISCU&#39;, &#39;DRUGID&#39;, &#39;1111&#39;, &#39;2222&#39;, &#39;STORAGECOUNT&#39;]; 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": [&#39;常用&#39;, &#39;流水号&#39;, &#39;疫苗种类&#39;, &#39;疫苗信息&#39;, &#39;包装(支/件)&#39;, &#39;生产企业&#39;, &#39;库存量&#39;, &#39;采购数量&#39;, &#39;采购价（元）&#39;, &#39;采购金额（元）&#39;, &#39;生产注册号（隐藏）&#39;], 69                     "model": [{ 70                         name: &#39;ISCU&#39;, 71                         index: &#39;ISCU&#39;, 72                         width: 50, 73                         align: &#39;center&#39;, 74                         sortable: false, 75                         //fixed: true, 76                         //resizable:false, 77                         formatter: function (cellvalue, options, rowObject) { 78                             if (cellvalue == "1") { 79                                 return "<a style=&#39;cursor:pointer;&#39; onclick=&#39;btdel(\"" + rowObject.DRUGID + "\");&#39;>加入"; 80                             } else { 81                                 return "<a style=&#39;cursor:pointer;&#39; onclick=&#39;btAdd(\"" + rowObject.DRUGID + "\");&#39;>取消"; 82                             } 83                         } 84                     }, 85                         { 86                             name: &#39;DRUGID&#39;, 87                             index: &#39;DRUGID&#39;, 88                             width: 100, 89                             align: &#39;center&#39;, 90                             sortable: false 91                             //fixed: true 92                         }, 93                         { 94                             name: &#39;DRUGTYPE&#39;, 95                             index: &#39;DRUGTYPE&#39;, 96                             width: 170, 97                             align: &#39;left&#39;, 98                             //resizable: false, 99                             sortable: false,100                             //fixed: true101                         },102                         {103                             name: &#39;PRODUCTNAME&#39;,104                             index: &#39;PRODUCTNAME&#39;,105                             width: 315,106                             align: &#39;left&#39;,107                             sortable: false,108                             //resizable: false,109                             //fixed:true110 111                         },112                         {113                             name: &#39;PACKUNIT&#39;,114                             index: &#39;PACKUNIT&#39;,115                             width: 80,116                             align: &#39;center&#39;,117                             sortable: false118                         },119                         {120                             name: &#39;COMPANYNAME_SC&#39;,121                             index: &#39;COMPANYNAME_SC&#39;,122                             width: 200,123                             align: &#39;left&#39;,124                             sortable: false125                         },126                         {127                             name: &#39;STORAGECOUNT&#39;,128                             index: &#39;STORAGECOUNT&#39;,129                             width: 80,130                             align: &#39;center&#39;,131                             sortable: false,132                             formatter: function (cellvalue, options, rowObject) {133                                 return "<span  class=&#39;label pull-center bg-blue&#39;>" + cellvalue + "";134                             }135                         },136                         {137                             name: &#39;PURCHASECOUNT&#39;,138                             index: &#39;PURCHASECOUNT&#39;,139                             width: 150,140                             align: &#39;center&#39;,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\">-<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,&#39;" + rowObject.COMPANYNAME_SC + "&#39;,&#39;" + rowObject.PRODUCTNAME + "【" + rowObject.YMMEDICINEMODEL + " " + rowObject.YMOUTLOOKC + " " + rowObject.DRUGFACTOR + rowObject.FORMULATION + "/" + rowObject.YMUNIT + "】&#39;,&#39;" + rowObject.PACKUNIT + "&#39;)\" onfocus=\"foc(this.id)\"/><button class=\"addThis\" type=\"button\" id=\"" + rowObject.DRUGID +145                                     "_add\" onclick=\"btnAdd(this.id,&#39;" + rowObject.COMPANYNAME_SC + "&#39;,&#39;" + rowObject.PRODUCTNAME + "【" + rowObject.YMMEDICINEMODEL + " " + rowObject.YMOUTLOOKC + " " + " " + rowObject.DRUGFACTOR + rowObject.FORMULATION + "/" + rowObject.YMUNIT + "】&#39;,&#39;" + rowObject.PACKUNIT + "&#39;)\" title=\"+\" style=\"width:20px;text-align:center;background-color: #F6F2F2;border:1px solid #dfdfdf;padding:1px\">+";146                             }147                         },148                         {149                             name: &#39;ACTUALPRICE&#39;,150                             index: &#39;ACTUALPRICE&#39;,151                             width: 100,152                             align: &#39;right&#39;,153                             sortable: false154                         },155                         {156                             name: &#39;AMOUNT&#39;,157                             index: &#39;AMOUNT&#39;,158                             width: 130,159                             align: &#39;right&#39;,160                             sortable: false161                         },162                         {163                             name: &#39;COMPANYID_SC&#39;,164                             index: &#39;COMPANYID_SC&#39;,165                             width: 100,166                             align: &#39;center&#39;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: &#39;10&#39;193                 }];194 195                 //初始化隐藏jqgrid客户选择的列196                 obj.model = multiSelect.jqgridHiddenColInit(obj.model, modelnames, kehuSelectHides),197                 $("#gridlist").jqGrid({198                     /*            url: "stdGoods/getStdGoodsData.html",199                                 contentType : &#39;application/json&#39;,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(&#39;editRow&#39;, id);236                         }237                     },238 239                     jsonReader: {240                         repeatitems: false,241                         id: "goodsId"242                     }243                 });244                 $("#gridlist").jqGrid(&#39;navGrid&#39;, &#39;#gridpage&#39;, {245                     add: false,246                     edit: false,247                     del: false,248                     search: false,249                     refresh: false250                 }).jqGrid(&#39;setFrozenColumns&#39;);251 252             });253         </script>254 255 256 257

要注意的幾個點：

1.參數選項需要看清楚，html和js裡都有註解說明
2.jqgrid的版本4.6.0
3.jquery的版本1.11.0

#這個功能的注意點主要是參數的傳輸以及何處調用，注意點搞清了，這個功能有需求的小伙伴們拿去用吧~~~

以上是前端基於JQgrid實作自訂列頭展示的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。