欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

简单实现修改jqgrid的翻页栏显示效果

程序员文章站 2022-06-18 11:17:18
...

沙漠渔溏--时间小记: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);

简单实现修改jqgrid的翻页栏显示效果

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文件中的说明去使用,不要单独调用其他方法.

记录一下,方便后面查询.