簡單實現修改jqgrid的翻頁欄顯示效果
阿新 • • 發佈：2019-01-23
沙漠漁溏--時間小記:2018年8月2日 11:29:12
從今年五一開始接觸軟體開發行業，看到公司做的web程式應用很多jqgrid外掛，說句實話好多地方感覺好醜
話不多說先上程式碼再看演示(寫的很糙,看網上沒有,僅做參考吧)
js檔案
/*** * 2018年7月26日 09:19:56 * 基於jqGrid 4.4.3 */ (function ($) { $.fn.extend({ //自動美化方法(應用方法:$.jqGrid({}). autoFlatter() 需要配合css檔案才能顯示樣式,主要實現隔行變色-自適應寬度-底欄自定義功能,可以單獨呼叫後面的方法) autoFlatter: function () { return this.each(function () { var $this = $(this); var $container= $this.parents(".ui-jqgrid-bdiv").first().parents('.ui-jqgrid').first().parents("div").first(); $this.setGridWidth($container.width()); var $pagerdiv = $this.parents(".ui-jqgrid-view").first().nextAll(".ui-jqgrid-pager").first(); $pagerdiv.css({height:40}).find(".ui-pager-control").remove(); var divout='pagerout'+$pagerdiv[0].id; var divin='pagerin'+$pagerdiv[0].id; var prev_pager_div = 'prev_pager_div'+$pagerdiv[0].id; var first_pager_div = 'first_pager_div'+$pagerdiv[0].id; var mid1_pager_div = 'mid1_pager_div'+$pagerdiv[0].id; var current_pager_div = 'current_pager_div'+$pagerdiv[0].id; var mid2_pager_div = 'mid2_pager_div'+$pagerdiv[0].id; var last_pager_div = 'last_pager_div'+$pagerdiv[0].id; var next_pager_div = 'next_pager_div'+$pagerdiv[0].id; var select_pager_div = 'prev_pager_div'+$pagerdiv[0].id; var select_pager = 'select_pager'+$pagerdiv[0].id; if ($("#"+divout).size()===0){ $pagerdiv.prepend('<div id="'+divout+'" style="width:100%;height:40px;float:right;"><div id="'+divin+'" style="margin:auto;text-align:center;"></div></div>').find("#"+divin).append( '<div id="'+prev_pager_div+'" class="ui-but-page pager_stable" >上一頁</div>' + '<div id="'+first_pager_div+'" class="pager_in" style="display: none">1</div>' + '<div id="'+mid1_pager_div+'" class="pager_omit" style="display: none">...</div>' + '<div id="'+current_pager_div+'" class="pager_in current_pager">1</div>' + '<div id="'+mid2_pager_div+'" class="pager_omit" style="display: none">...</div>' + '<div id="'+last_pager_div+'" class="pager_in" style="display: none">ERR</div>' + '<div id="'+next_pager_div+'" class="ui-but-page pager_stable" >下一頁</div>' + '<div id="'+select_pager_div+'" class="pager_select">第 <select id="'+select_pager+'" class="select_pager"><option value="1">1</option></select> 頁</div>'); } //region 調整模板和新增翻頁欄 在ajax請求成功即執行 $this.unbind('ajaxSuccess').ajaxSuccess(function(){ $this.autoWidth().disColour().newpager(); }); //endregion }); }, disColour: function () { return this.each(function () { //這裡的this 就是 jQuery物件。這裡return 為了支援鏈式呼叫 var $this = $(this); //獲取當前dom 的 jQuery物件，這裡的this是當前迴圈的dom var ids = $this.getDataIDs(); for (var i = 0; i < ids.length; i++) { var rowid = ids[i]; if (rowid % 2 === 0) { $this.find('#' + rowid).addClass("rowClassODD"); } else { $this.find('#' + rowid).addClass("rowClassEVEN"); } } }); }, autoWidth: function () { return this.each(function () { //這裡的this 就是 jQuery物件。這裡return 為了支援鏈式呼叫 var $this = $(this); //獲取當前dom 的 jQuery物件，這裡的this是當前迴圈的dom.removeClass("pager_stable") var $ui_jqgrid_bdiv= $this.parents(".ui-jqgrid-bdiv").first(); if ($this.css("height")<=$ui_jqgrid_bdiv.css("height")) { $this.css("width", $ui_jqgrid_bdiv.css("width")); $this.parents(".ui-jqgrid-bdiv").first().prevAll(".ui-jqgrid-hdiv").first().find(".ui-jqgrid-htable").first().css("width", $ui_jqgrid_bdiv.css("width")); $ui_jqgrid_bdiv.css('overflow-y','hidden');//強制不顯示滾動條 不然在差不多高度時會跳啊跳的 煩死了 }else { $this.setGridWidth($ui_jqgrid_bdiv.width()); $ui_jqgrid_bdiv.css('overflow-y','auto');//強制不顯示滾動條 不然在差不多高度時會跳啊跳的 煩死了 } }); }, newpager:function () { return this.each(function () { //這裡的this 就是 jQuery物件 支援鏈式呼叫 var $this = $(this);//獲取jquery物件 //查詢並定義頁面所需標籤內容 var totalrecords=$this.getGridParam('records');//獲取當前頁數 var current_pager = $this.getGridParam('page');//獲取當前頁數 var total_pager=Math.max($this.getGridParam('lastpage'),1);//獲取最大頁數 //通過table找到所對應的pager的div 如果有 var $pagerdiv = $this.parents(".ui-jqgrid-view").first().nextAll(".ui-jqgrid-pager").first(); $pagerdiv.css({ height:40 }).find(".ui-pager-control").remove();//讓原來的div隱藏掉 //定義各個元素的id名稱 避免衝突 選擇和頁面內的pager組合 var divout='pagerout'+$pagerdiv[0].id; var divin='pagerin'+$pagerdiv[0].id; var prev_pager_div = 'prev_pager_div'+$pagerdiv[0].id; var first_pager_div = 'first_pager_div'+$pagerdiv[0].id; var mid1_pager_div = 'mid1_pager_div'+$pagerdiv[0].id; var current_pager_div = 'current_pager_div'+$pagerdiv[0].id; var mid2_pager_div = 'mid2_pager_div'+$pagerdiv[0].id; var last_pager_div = 'last_pager_div'+$pagerdiv[0].id; var next_pager_div = 'next_pager_div'+$pagerdiv[0].id; var select_pager_div = 'prev_pager_div'+$pagerdiv[0].id; var select_pager = 'select_pager'+$pagerdiv[0].id; if ($("#"+divout).size()===0){//如果原來頁面沒有這個元素就插入,如果有就不執行插入操作 只進行後面的新增內容和設定內容操作 $pagerdiv.prepend('<div id="'+divout+'" style="width:100%;height:40px;float:right;"><div id="'+divin+'" style="margin:auto;text-align:center;"></div></div>').find("#"+divin).append( '<div id="'+prev_pager_div+'" class="ui-but-page pager_stable" >上一頁</div>' + '<div id="'+first_pager_div+'" class="pager_in" style="display: none">1</div>' + '<div id="'+mid1_pager_div+'" class="pager_omit" style="display: none">...</div>' + '<div id="'+current_pager_div+'" class="pager_in current_pager">1</div>' + '<div id="'+mid2_pager_div+'" class="pager_omit" style="display: none">...</div>' + '<div id="'+last_pager_div+'" class="pager_in" style="display: none">ERR</div>' + '<div id="'+next_pager_div+'" class="ui-but-page pager_stable" >下一頁</div>' + '<div id="'+select_pager_div+'" class="pager_select">第 <select id="'+select_pager+'" class="select_pager"><option value="1">1</option></select> 頁</div>'); } //獲取div容器 避免重複查詢 var $prev_pager_div=$("#"+prev_pager_div), $first_pager_div=$("#"+first_pager_div), $mid1_pager_div=$("#"+mid1_pager_div), $current_pager_div=$("#"+current_pager_div), $mid2_pager_div=$("#"+mid2_pager_div), $last_pager_div=$("#"+last_pager_div), $next_pager_div=$("#"+next_pager_div), $select_pager_div=$("#"+select_pager_div), $select_pager=$("#"+select_pager); // //給容器加上內容 $current_pager_div.html(current_pager); $last_pager_div.html(total_pager); //控制是否顯示尾頁和中間的省略部分 if (total_pager === current_pager) { $mid2_pager_div.css("display", "none"); $last_pager_div.css("display", "none").addClass("pager_stable").removeClass("pager_click"); $next_pager_div.addClass("pager_stable").removeClass("pager_click"); } else if (total_pager - 1 === current_pager) { $mid2_pager_div.css("display", "none"); $last_pager_div.css("display", "").removeClass("pager_stable").addClass("pager_click"); $next_pager_div.removeClass("pager_stable").addClass("pager_click"); } else if (total_pager <=1){ $mid2_pager_div.css("display", "none"); $last_pager_div.css("display", "none").addClass("pager_stable").removeClass("pager_click"); $mid1_pager_div.css("display", "none"); $first_pager_div.css("display", "none").addClass("pager_stable").removeClass("pager_click"); $next_pager_div.addClass("pager_stable").removeClass("pager_click"); } else { $mid2_pager_div.css("display", ""); $last_pager_div.css("display", "").removeClass("pager_stable").addClass("pager_click"); $next_pager_div.removeClass("pager_stable").addClass("pager_click") } //控制是否顯示首頁和中間的省略部分 if (1 === current_pager) { $mid1_pager_div.css("display", "none"); $first_pager_div.css("display", "none").addClass("pager_stable").removeClass("pager_click"); $prev_pager_div.addClass("pager_stable").removeClass("pager_click"); } else if (2 === current_pager) { $mid1_pager_div.css("display", "none"); $first_pager_div.css("display", "").removeClass("pager_stable").addClass("pager_click"); $prev_pager_div.removeClass("pager_stable").addClass("pager_click"); } else { $mid1_pager_div.css("display", ""); $first_pager_div.css("display", "").removeClass("pager_stable").addClass("pager_click"); $prev_pager_div.removeClass("pager_stable").addClass("pager_click"); } //取消點選事件 一定要有 $pagerdiv.find(".pager_stable").unbind("click"); //新增點選事件 $pagerdiv.find(".pager_click").each(function () { var selquery=false;var _page=1; if (this.id===last_pager_div){_page=total_pager;selquery=true;} if (this.id===next_pager_div){_page=current_pager+1;selquery=true;} if (this.id===prev_pager_div){_page=current_pager-1;selquery=true;} if (this.id===first_pager_div){_page=1;selquery=true;} if (selquery) { $(this).unbind("click").click(function() { $this.trigger("reloadGrid",[{page:_page}]); }); } }); $select_pager.empty().each(function () { for(var i=1;i<=total_pager;i++){ this.add(new Option(i,i)); } $(this).val(current_pager).unbind("change").change(function(){ $this.trigger("reloadGrid",[{page:$(this).val()}]); }); }); }); } })(window.jQuery);
css:
.rowClassODD { background: #EAEAEA;} .rowClassEVEN { background: #DDDDDC;} /*上一頁下一頁預設樣式*/ .ui-but-page{width:60px;height:20px;margin:8px;border:1px solid #106cff;display:inline-block;padding-top: 3px;border-radius: 4px;font-weight: normal;cursor:pointer} /*框體預設樣式*/ .pager_in{width:25px;height:20px;margin:5px;border:1px solid #106cff;display:inline-block;padding-top: 2px;border-radius: 4px;font-weight: normal;cursor:pointer} /*省略號樣式*/ .pager_omit{width:18px;height:10px;margin:0px;border:0px solid #106cff;display:inline-block;padding-top: 0px;border-radius: 3px} /*不可選中的樣式*/ .pager_stable{background: #ffffff} /*當前頁樣式*/ .current_pager{background: #00a0e9;color: #f5fafa} /*選擇頁樣式*/ .pager_select{width:55px;height:40px;margin:10px;display:inline-block;padding-top: 0px;font-weight: normal} .select_pager{height:22px;width:35px;border-radius: 4px;cursor:pointer}
可以快速翻頁,為了避免寬度太寬,只顯示首頁尾頁和當前頁以及上下頁和快讀跳轉頁等功能,有必要可以顯示出來更多,為了避免出現載入完成之前翻頁欄還是原來的,建議按照js檔案中的說明去使用,不要單獨呼叫其他方法.
記錄一下,方便後面查詢.