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

其他 2018-08-31 14:21:24 阅读次数: 0

沙漠渔溏--时间小记: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文件中的说明去使用,不要单独调用其他方法.

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

猜你喜欢

转载自blog.csdn.net/forose/article/details/81355919
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022