代码改变世界

分页控件(easyUi自己封装过后的)

2014-09-12 17:29  看看能坚持多久！  阅读(508)  评论(0)  编辑  收藏  举报

　　　　 这个版本是对easyui的封装，整体思路是easyui的界面风格，然后新建一个自定义控件，各个页面分别传递回调函数名,请求url，参数等，通过ajax请求成功后执行传递的回调函数即可。

　　　　先看下效果：

　　　　1.首先新建控件　

　　　　　　1.1html代码(注意引入easyui的js和css,jquery等)：

　　　  <div id="data_page_nav" class="easyui-pagination" data-options="total: 0, pageSize: 10, pageList: [10, 20, 50]" style="border:1px solid #ddd;  vertical-align: middle;" name="data_page_nav"></div>

　　　　　　1.2js代码 　　

 1 <script type="text/javascript">
 2     var PaginationData = { method: "", url: "", RenderFunc: null };
 3     (function (o) {
 4         o.GetParams = function () {
 5             return $("#data_page_nav").data("params");
 6         }
 7         o.SetParams = function (para) {
 8             $("#data_page_nav").data("params", para);//页面搜索项的参数
 9         }
10         o.BindTemplateList = function (d) {//绑定分页
11             $("#data_page_nav").data("params", d.params);//传参
12             o.RenderFunc = d.callbackfunc;//处理函数
13             o.url = d.url;
15             $('#data_page_nav').pagination({
16                 total: d.total,
17                 pageSize: d.pageSize,
18                 onSelectPage: function (pageNumber, pageSize) {
19                     $(this).pagination('loading');
20                     o.GetTemplateList(pageNumber,pageSize);
21                     $(this).pagination('loaded');
22                 }
23             });
25         }
27         o.GetTemplateList = function (pageIndex,pageSize) {//分页加载
28             var d = ($("#data_page_nav").data("params"));
29             d.PageIndex = pageIndex;
30             d.pageSize = pageSize;
31             $.ajax({
32                 url: o.url,
33                 data: d,
34                 type: 'post',
35                 dataType: 'json',
36                 async: false,
37                 success: function (v) {
38                     if (v != null) {
39                         $('#data_page_nav').pagination('refresh', {   
40                             total: v.total
41                         });
42                         o.RenderFunc(v);
43                     }
44                 }
45             });
46         }
47     })(PaginationData);
48     $("#data_page_nav").data("paginationdata", PaginationData);
49 </script>

 　　　2.各个页面的使用

　　　　　　2.1添加控件引用

1 <%@ Register Src="~/UserControl/Pagination.ascx" TagPrefix="uc1" TagName="Pagination" %>

　　　　　　2.2页面控件

 1 <uc1:Pagination runat="server" ID="Pagination" /> 

　　　　　　2.3页面js

 1    <script type="text/javascript">
 2             var DialogGoodListTm={};
 3             (function(o){
 4                 o.RenderFunc=function(v){//绑定 回调函数
 5                     if (v!=null&&v.DATA!=null&&v.DATA.length>0) {
 6                         var contentArr=[];
 7                         for (var i = 0; i < v.DATA.length; i++) {
 8                             contentArr.push('<tr>');
 9                             contentArr.push('<td><input type="checkbox" name="chk_Good_id" class="chk_cell" value="'+v.DATA[i].ID+'" good-name="'+v.DATA[i].GoodName+'" goodimg="'+v.DATA[i].img+'"  goodbh="'+v.DATA[i].Code+'"/></td>');                    
10                             contentArr.push('<td class="hotsell_name" >'+v.DATA[i].GoodName+'</td>');   
11                             contentArr.push('<td class="hotsell_name" >'+v.DATA[i].Code+'</td>'); 
12                             contentArr.push('<td class="hotsell_des" > '+v.DATA[i].BarCode+'</td>');
13                             contentArr.push(' </tr>');
14                         }
15                         $("#list_goodtable").find("tbody").html(contentArr.join(''));
16                     }else
17                     {
18                         $("#list_goodtable").find("tbody").html('<tr class="chk_line"><td colspan="4" class="ta_l">暂无数据</td>');
19                     }
20                 }57             })(DialogGoodListTm); 
60             $(document).ready(function () {
61                 var DialogGoodListPagination = $(".hotsells_good_wrap").find('[name="data_page_nav"]').data("paginationdata");
62                 DialogGoodListPagination.BindTemplateList({  //传递参数
63                     callbackfunc: DialogGoodListTm.RenderFunc, //回调函数
64                     total: <%=this.Total%>,
65                     pageSize: "10", //每页显示记录数，这里写死了 请注意
66                     params: {PageIndex:0,action :"GetGoodPageList",GoodName:'',GoodBH:'',Uid:<%=id%>}, //参数
67                     url:"/Good/GoodHandler.ashx"
68                 });//初始化分页
69                 DialogGoodListPagination.GetTemplateList(1);//绑定第一页  页面首次加载不要忘记
70             });
71    </script>

　　　　　总结：这个版本分页用户效果相对来说要好点，使用起来js代码稍微多点，但比起前面那个(拼接html)版本还是比较不错的，我个人比较推荐这个版本。

　　　　　　　　　　最后因为时间比较久了，可能写的不是非常完善有些东西没有写清楚（有需要的请留言）比如：页面搜索项查询情况等，谢谢大家阅读！下一篇整理自定义控件版分页和这个版本不一样的思路哦