XPaging前端分页组件

前言

专注拖控件6年的C#程序员，迫于某种原因做起了前端开发，然后发现纯前端写起来要人命啊，所有的页面交互逻辑全是JS代码控制，写起来好难受。幸亏我JS功底深厚（自恋中……别打扰我……），很快就适应了，不然真的被搞死。

不过写到后面发现，纯JS控制用户交互，体验效果比aspx页面好多了。页面样式虽然是自己手写的，没用什么前端框架，但是用的Vue数据框架啊，然后发现Vue有组件开发模式，就想着是不是可以把原来ascx控件变成组件，这样写前端也变成拖控件了（PS:虽然是写标签），但开发效率肯定提升很大啊。

于是开始折腾启分页组件，因为使用次数高，而且也是最麻烦的一个，就试着把原来的ascx分页组件变成前端的，前面我写过一篇分页算法，这里我直接改成JS代码，这也是分页组件最核心的代码。

正文

 首先，遵循Vue的组件规范，定义组件模板，并进行全局注册，基础知识不知道的请看这里，代码如下：

//注册Vue组件
Vue.component('x-paging', {
    props: ['codelist', 'total', 'pagelist'],
    template: '<div id="xpaging" class="pagenum"><span class="pagemsg">每页 '
        + '<select id="pagesize" name="pagesize" onchange="XPaging.Api.ChangePageSize(this)">'
        + '<option v-bind:selected="code.selected?\'selected\':\'\'" v-for="code in codelist">{{code.pagesize}}</option>'
        + '</select>条 '
        + '共<span class="number">{{total}}</span>条记录</span>'
        + '<a v-bind:class="page.ClassName" href="javascript:;" v-for="page in pagelist" v-on:click="XPaging.Api.PageTurn(page.Value)">{{page.Code}}</a></div>'
});

这里使用三个prop变量进行数据的交互，codelist：每页数据大小集合，俗称pagesize；total：总记录数；pagelist：页码集合，就是第一页，第二页，第三页……

需要注意的是Vue定义组件，必须用一个标签包括起来，不然组件无法生效。

其次，就是组件的样式，代码如下：

/*
    分页控件样式库
*/
.pagenum {
    float: left;
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 7px;
    vertical-align: middle;
}

    /*页码格子*/
    .pagenum a {
        text-decoration: none;
        text-align: center;
        display: block;
        float: left;
        height: 16px;
        line-height: 16px;
        padding: 5px 7px 5px 7px;
        vertical-align: middle;
        min-width: 16px;
        border-radius: 2px;
        margin-right: 5px;
    }

        .pagenum a:link, a:visited {
            text-decoration: none;
        }

        .pagenum a:hover, a:active {
            text-decoration: none;
        }

        .pagenum a:hover {
            background-color: #f15a22;
            opacity: .7;
            filter: alpha(opacity=70);
            color: #ffffff;
        }

/*总记录数*/
.number {
    color: #F30;
    margin-left: 5px;
    margin-right: 5px;
}

/*每页记录数*/
.pagemsg {
    text-align: center;
    display: block;
    float: left;
    height: 26px;
    line-height: 26px;
    margin-right: 10px;
    vertical-align: middle;
}

/*当前页码*/
.currindex {
    color: #FFF;
    background: #009ad6;
}

/*侯选页*/
.waitpage {
    color: #4f5555;
    background: #F0f0f0;
}

.pagenum select {
    margin-right: 4px;
    height: 22px;
    padding: 0px 0px;
    font-size: 13px;
    font-weight: bold;
    color: #F30;
}

再次，就是为了统一pagesize，和默认的页面大小，我将其写入了一个json文件中。

为什么要这样呢？就是因为设计时，此控件会记录用户设置的页面大小，当打开其他页面或者刷新当前页面时，会默认设置用户上次选择的页面大小，代码如下：

{
  "XPageSize": [
    {
      "pagesize": 2,
      "selected": false
    },
    {
      "pagesize": 5,
      "selected": false
    },
    {
      "pagesize": 10,
      "selected": true
    },
    {
      "pagesize": 15,
      "selected": false
    },
    {
      "pagesize": 20,
      "selected": false
    },
    {
      "pagesize": 25,
      "selected": false
    },
    {
      "pagesize": 30,
      "selected": false
    },
    {
      "pagesize": 40,
      "selected": false
    },
    {
      "pagesize": 50,
      "selected": false
    },
    {
      "pagesize": 100,
      "selected": false
    }
  ],
  "XCodeNum": 5
}

pagesize和selected我就不说了，其中XCodeNum表示的是”连续页码显示的个数“，例如”1，2，3，4，5，……，10“连续显示5个页码。

最后，就是组件实现的JS代码了，核心方法有：

1.根据总记录数和连续页码显示个数，生成页码集合，就是pagelist；

2.获取json文件的数据，生成codelist，以及存储用户设置的页面大小，以便下次调用；

3.页面跳转，以及跳转后执行数据刷新方法等。

代码过长，只贴部分代码，要看完整的代码，及使用实例，请下载源码。

//插件默认参数
    var options = {
        //连续页码显示个数（必须是奇数）
        ContinNO: 5,
        //索引页
        CurrentPageIndex: 1,
        //总页数
        PageCount: 0,
        //页面显示记录数
        PaseSize: 0,
        //绑定数据方法名
        DataBindFunc: "",
        //JSON配置文件路径
        ConfigUrl: "../lib/XPaging/XPaingConfig.json"
    };

    //用户调用接口
    var XPagingInit = {
        //配置信息
        config: function (opts) {
            //没有参数传入，直接返回默认参数
            if (!opts) return options;
            //有参数传入，通过key将options的值更新为用户的值
            for (var key in opts) {
                options[key] = opts[key];
            }
            return this;
        },
        //初始化插件
        init: function (vueObj) {
            $.ajax({
                type: "GET",
                url: options.ConfigUrl,
                async: false,
                dataType: 'Json',
                success: function (result) {
                    options.ContinNO = result.XCodeNum;
                    Xdata.SetPageSize(result.XPageSize, vueObj);
                    Xdata.GetPageCount(vueObj.total);
                    Xdata.GetPageList(vueObj);
                },
                error: function (data, XMLHttpRequest, textStatus, errorThrown) {
                    alert("分页控件初始化失败，返回信息：" + JSON.stringify(data));
                }
            });
            return this;
        },
        //获取当前页索引
        GetCurrentPageIndex: function () {
            return options.CurrentPageIndex;
        },
        //获取页面大小
        GetPageSize: function () {
            return options.PaseSize;
        }
    };

 最终的运行效果如下图：