tba-gx-guochan/public/static/plugins/jqgrid.pager.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');//获取当前页数
                alert('totalrecords ' + totalrecords);
                var current_pager = $this.getGridParam('page');//获取当前页数
                var total_pager = Math.max($this.getGridParam('total'), 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);