简单实现修改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);
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文件中的说明去使用,不要单独调用其他方法.
记录一下,方便后面查询.