easyui输入页数点击按钮手动翻页效果

  easyui分页组件Pagination,在页数显示输入框内输入页码后,一般情况下是需要按下回车键才会执行分页操作。要想手动翻页,给easyui分页组件Pagination增加新按钮,可以按照一下步骤进行扩展,效果如下

easyui输入页数点击按钮翻页效果

  easyui版本为1.4.4,其他版本注意查看dom结构,通过插入的按钮获取到页码输入框。及jquery.easyui.min.js中页面输入框绑定的事件名称,easyui1.4.4绑定的事件名称为:keydown.pagination。示例居于jquery-easyui-1.4.4\demo\pagination\basic.html修改。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>easyui分页组件Pagination按钮扩展</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script>
        //翻页工具栏文字,注意放在easyui框架后面
        if ($.fn.pagination) {
            $.fn.pagination.defaults.showPageList = true;
            $.fn.pagination.defaults.beforePageText = "第";
            $.fn.pagination.defaults.afterPageText = "页  <a style='border:0;text-decoration:none; font-size:15px;font-weight:bold;color:#8DB2E3' href='javascript:void(0);' onclick='jumpPage(this)'>GO</a>  共 {pages} 页";
            $.fn.pagination.defaults.displayMsg = "当前{from}-{to} 条  共{total}条记录";
        }
        window.jumpPage = function (btn) {
            var ipt = $(btn).closest('td').prev().find('input');//其他版本注意修改这里
            ipt.trigger('keydown.pagination', { keyCode: 13 });
        }
    </script>
</head>
<body>
	<h2>easyui分页组件Pagination按钮扩展</h2>
	<p>实现功能:扩展easyui Pagination分页组件,添加新按钮,点击此按钮进行翻页操作。</p>
	<div style="margin:20px 0;"></div>
	<div class="easyui-panel">
		<div class="easyui-pagination" data-options="total:114"></div>
	</div>
</body>
</html>

jquery.easyui.min.js源代码修改

/*bb.num.unbind(".pagination").bind("keydown.pagination",function(e){//大概在1057行,其他版本搜索pagination关键字定位到页面输入框
if(e.keyCode==13){
var _aa=parseInt($(this).val())||1;
_ae(_a2,_aa);
return false;
}
});
=======》*/
bb.num.unbind(".pagination").bind("keydown.pagination",function(e,data){//新增data参数,接收trigger触发事件传递的参数值
if(e.keyCode==13||(data&&data.keyCode==13)){//判断data参数是否传递及是否为keyCode 13
var _aa=parseInt($(this).val())||1;
_ae(_a2,_aa);
return false;
}
});

 



原创文章,转载请注明出处:easyui输入页数点击按钮手动翻页效果
评论(0)Web开发网
阅读(291)喜欢(0)不喜欢(0)easyui