CocoRoboDesktop/js/Controls/Basic/Page.js

//窗体功能命名空间
Namespace.register("U.UF.P");
/*
*   作用：给不同的域添加this的指定方向
*   @param {function}   fun 执行函数
*   @param {array}  arr 执行函数的参数数组
*   @param {element}    el 用于指向域    
*/
U.UF.P.apply = function (fun, arr, el) {
    return function () {
        fun.apply(el, arr);
    }
}
U.UF.P.pagepId = 0; //全局变量 分页控件数量
/*
**  @param {element} el 需要插入分页控件的位置
**  @param {number} num 数据的数量
**  @param {number} pagenum 一页中数据量的多少
**  @param {number} page 显示当前是第几页
**  @param {function} fun 回调函数
*/
U.UF.P.PPage = U.UF.P.page = function (el, num, pagenum, page, fun) {
    this.PageNum = 0; // 全局变量 当前页
    this.Index = 0; //全局变量 索引
    this.Pageall = 0; //全局变量 总页数
    this.init(el, num, pagenum, page, fun); //初始化函数
}


U.UF.P.page.prototype = {
    init: function (el, num, pagenum, page, fun) {
        this.PageNum = page; //获取当前页面
        this.Index = page - 1; //获取当前页码的索引
        var _el = U.selectEl(el)[0]; //获取需要插入分页控件的元素
        var _pagesum = Math.ceil(num / pagenum); //获取总页数，数据的数量/一页中的数量，向上取整
        this.Pageall = _pagesum; //获取总页数

        //判断是否拥有分页控件
        if (_el.getElementsByClassName('U_MD_F_Y')[0]) {
            return false; //有的话就不添加新的分页控件
        }
        U.UF.P.pagepId++;
        var _page = $$("div", { "className": "U_MD_F_Y" }, _el); //创建分页控件的整体部分
        var _pagenode = $$("div", { "className": "U_MD_F_YL" }, _page); //创建分页控件的父级
        var _firstEle = $$("div", { "className": "U_MD_F_YLO U_MD_F_Y_Button", "innerHTML": "首页", "title": "首页", "pid": U.UF.P.pagepId + "1" }, _pagenode); //创建分页的首页功能
        var _previousEle = $$("div", { "className": "U_MD_F_YLT U_MD_F_Y_Button", "title": "上一页", "pid": U.UF.P.pagepId + "3" }, _pagenode); //创建分页的上一页功能
        var _pagenum = $$("div", { "className": "U_MD_F_YN" }, _pagenode); //创建中间页码数的整体 , "style": { "cssText": "float:left"} 
        var _startpage;
        var _endpage = Math.min(_pagesum, Math.max(page + 5, 10));
        for (_startpage = Math.max(1, Math.min(page - 5, _pagesum - 10)); _startpage <= _endpage; _startpage++) {
            (function (i, el) {
                //创建中间的页码数，最高十页的页码数
                //"className": "list" + U.UF.P.pagepId,
                //"style": { "text-align": "center", "line-height": "31px;" }, 
                var _centerEle = $$("div", {
                    "innerHTML": i, "pid": U.UF.P.pagepId + "5"
                }, _pagenum); //创建中间的页码数
                i == page && (_centerEle.className = "U_MD_F_Y_Button_Active");
                _centerEle.onclick = U.UF.P.apply(function (i) {//给每一个页码数添加一个点击事件
                    U.UF.P.centerEle(el, _centerEle); //实现点击页码进行跳转
                }, [_startpage], el)
            })(_startpage, this);
        }
        //        var j = 0;
        //        for (j; j < _forpagesum && i <= _pagesum; j++) {//循环有多少个页码，并且进行创建
        //            (function (i, el) {
        //                //创建中间的页码数，最高十页的页码数
        //                //"className": "list" + U.UF.P.pagepId,
        //                //"style": { "text-align": "center", "line-height": "31px;" }, 
        //                var _centerEle = $$("div", {
        //                    "innerHTML": i, "pid": U.UF.P.pagepId + "5"
        //                }, _pagenum); //创建中间的页码数
        //                i == page && (_centerEle.className = "U_MD_F_Y_Button_Active");
        //                _centerEle.onclick = U.UF.P.apply(function (i) {//给每一个页码数添加一个点击事件
        //                    U.UF.P.centerEle(el, _centerEle); //实现点击页码进行跳转
        //                }, [i], el)
        //            })(i, this);
        //            i++;
        //        }
        var _nextEle = $$("div", { "className": "U_MD_F_YLS U_MD_F_Y_Button", "title": "下一页", "pid": U.UF.P.pagepId + "4" }, _pagenode); //创建下一页功能
        var _lastEle = $$("div", { "className": "U_MD_F_YLF U_MD_F_Y_Button", "innerHTML": "尾页", "title": "尾页", "pid": U.UF.P.pagepId + "2" }, _pagenode); //创建尾页功能
        var _pages = $$("div", { "className": "U_MD_F_YR" }, _page); //创建跳转页面的整体
        //        var _pagesk = $$("div", { "className": "U_MD_F_YRL" }, _pages); //创建跳转页面的父级
        $$("span", { "innerHTML": "到" }, _pages); //创建跳转元素
        //        var _pagejump = $$("div", {}, _pages); //创建页码输入框的父级
        var _input = $$("input", { "type": "text" }, _pages); //创建页码输入框
        $$("span", { "innerHTML": "页" }, _pages); //创建跳转元素
        var _rightEle = $$("div", { "className": "U_MD_F_YRZ", "pid": U.UF.P.pagepId + "6", "innerHTML": "确定" }, _pages); //创建确定按钮
        if (this.PageNum < _pagesum + 1) {//获取当前页面是否小于总页数
            var _list = U.selectEl(".list" + U.UF.P.pagepId); //获取所有的中间页码数
            for (var j = 1; j < _list.length + 1; j++) {//循环所有的中间页码数
                if (this.PageNum == j) {//判断当前页码数是否等于中间页码数的一个
                    U.selectEl(_list[this.PageNum - 1]).addClass("U_MD_F_Y_Button_Active");
                }
            }
        }
        _firstEle.onclick = U.UF.P.apply(this.fPage, [_firstEle, _pagesum, fun], this); //首页功能
        _previousEle.onclick = U.UF.P.apply(this.fPage, [_previousEle, _pagesum, fun], this); //上一页功能
        //中间点击页码跳转功能 参数一：el  指向U.UF.P.page这个域   参数二：el1 点击中间页码的元素 
        U.UF.P.centerEle = function (el, el1) {
            U.UF.P.apply(el.fPage, [el1, _pagesum, fun], el)(); //执行点击中间页码的功能
        }
        _nextEle.onclick = U.UF.P.apply(this.fPage, [_nextEle, _pagesum, fun], this); //下一页功能
        _lastEle.onclick = U.UF.P.apply(this.fPage, [_lastEle, _pagesum, fun], this); //尾页功能
        _rightEle.onclick = U.UF.P.apply(this.fPage, [_rightEle, _pagesum, fun, _input], this); //跳页功能
        _input.onkeyup = function () {//做一个键盘按下的功能
            if (event.keyCode == "13") {//判断是否是回车键
                _rightEle.onclick(); //如果是回车键，则 执行确定按钮功能
            }
        }
    },

    /*
    **  作用：用于首页 上一页 下一页 尾页 输入框跳转 点击中间页码数的功能实现
    **  @param {element} el 获取当前元素
    **  @param {number} pagesum 总页数
    **  @param {function} fun   回调函数
    **  @param {element}  input 获取输入框的元素
    */
    fPage: function (el, pagesum, fun, input) {
        _el1 = el.pid; //获取点击元素的pid，用于判断是首页 上一页 下一页 尾页 输入框跳转 点击中间页码数的功能
        _el = _el1.charAt(_el1.length - 1); //截取pid最后一个数字，用于判断是首页 上一页 下一页 尾页 输入框跳转 点击中间页码数的功能
        if (_el == 5) {//判断是否是点击中间页码
            _list = U.selectEl($(el).Parent()).Parent().children[2].children; //获取点击中间页码的该元素的所有页码元素
        } else if (_el == 6) {//判断是否是确定或者是回车按钮的点击
            _list = U.selectEl($(el).Parent()).Parent().children[0].children[2].children; //获取确定或回车按钮的点击的该元素的所有页码元素
        } else {//如果既不是中间页码，也不是回车或者是确定按钮的点击
            _list = U.selectEl(el).Parent().children[2].children; //获取该元素所有的页码元素
        }
        U.selectEl(".U_MD_F_Y_Button_Active", U.selectEl(el).Parent(3)).removeClass("U_MD_F_Y_Button_Active"); //清空所有页码的点击样式

        if (_el == 1) {//pid为1时，执行首页的功能
            if (this.Index == 0) { this.Index++ } //判断当前索引是否为0，如果是 则执行索引++
            if (this.PageNum > 1) {//判断当前页数是否大于1
                U.selectEl(_list[0]).addClass("U_MD_F_Y_Button_Active");
                this.Index = 0; //获取索引为0
                this.PageNum = 1//获取当前页数为1
                this.pagefun(this.PageNum, _list, el); //执行页码跳转功能
                fun(this.PageNum); //执行数据的跳转 this.PageNum 当前页数
                return;
            }
            U.selectEl(_list[--this.Index]).addClass("U_MD_F_Y_Button_Active");
        }
        else if (_el == 2) {//pid为2时，执行尾页功能
            if (this.PageNum < this.Pageall) {//判断当前页码是否小于总页数
                this.Index = pagesum; //获取索引值为总页数
                this.PageNum = this.Pageall; //获取全局变量的当前页为总页数
                this.pagefun(this.PageNum, _list, el); //执行页码跳转功能
                fun(this.PageNum); //执行数据的跳转 this.PageNum 当前页数
                return
            } else {
                U.selectEl(_list[this.Index]).addClass("U_MD_F_Y_Button_Active");
            }
        }
        else if (_el == 3) {//pid为3时，执行上一页功能
            if (this.Index > 0) {//判断当前索引是否大于0
                U.selectEl(_list[--this.Index]).addClass("U_MD_F_Y_Button_Active"); //获取当前页的上一个页码的点击样式
                this.PageNum--; //并且当前页减一
                this.pagefun(this.PageNum, _list, el); //执行页码跳转功能
                fun(this.PageNum); //执行数据的跳转 this.PageNum 当前页数
                return
            } else { // 判断第一页
                U.selectEl(_list[this.Index]).addClass("U_MD_F_Y_Button_Active");
            }
        }
        else if (_el == 4) {//pid为4时，执行下一页功能
            if (this.PageNum < this.Pageall) {//判断当前页码是否小于总页数
                U.selectEl(_list[++this.Index]).addClass("U_MD_F_Y_Button_Active"); //获取当前页的下一个页码的点击样式
                this.PageNum++; //并且当前页码加一
                this.pagefun(this.PageNum, _list, el); //执行页码跳转功能
                fun(this.PageNum); //执行数据的跳转 this.PageNum 当前页数
                return
            } else {// 判断最后一页
                U.selectEl(_list[this.Index]).addClass("U_MD_F_Y_Button_Active"); //获取最后一页的点击样式
            }
        } else if (_el == 5) {//pid为5时，执行点击中间页码跳转功能
            this.pagefun(el, _list, el); //执行页码跳转功能
            fun(this.PageNum); //执行数据的跳转 this.PageNum 当前页数
            return
        } else if (_el == 6) {//pid为6时，执行输入框功能
            var _number = new RegExp("^[0-9]*$")//写一个正则表达式，只能够输入数字
            if (input.value.match(_number)) {//判断输入的是否是数字
                if (input.value >= 1 && input.value <= this.Pageall) {//判断输入的数字是否大于等于1，并且，输入的数字小于等于总页数
                    this.PageNum = input.value; //输入的值为当前页码数
                    this.pagefun(this.PageNum, _list, el); //执行页码跳转功能
                    fun(this.PageNum); //执行数据的跳转 this.PageNum 当前页数
                } else {//如果输入的不是数字
                    U.alert("无效的输入"); //则弹窗提示
                    U.selectEl(_list[this.Index]).addClass("U_MD_F_Y_Button_Active"); //并且点击样式不改变
                }
            }
        }
    },
    /*
    **  作用：用于首页、上一页、下一页、尾页、输入框、点击页码进行页码跳转的功能
    **  @param {element} el  当前页码数
    */
    pagefun: function (el, list, pel) {
        var _list = list; //获取所有的中间页码数
        var elNum = parseInt(el.innerHTML) || el; // 获取当前点击页码
        U.selectEl(".U_MD_F_Y_Button_Active", pel).removeClass("U_MD_F_Y_Button_Active"); //清空所有的中间页码数的点击样式
        var _listLength = Math.ceil(_list.length / 2); // 获取页码长度的一半
        var Index; // 记录点击时的页码的索引
        var preIndex = this.Index; // 上一个页码索引
        var difference = null; // 计算当前页码跟所点击的页码的差异

        var lastPage = parseInt($(_list)[$(_list).length - 1].innerText); // 当前页码的最后一个数的页码
        //判断当前点击页码是否小于页码长度的一半，或者当前点击页码大于当前页码的最后一个数的页码减去页码长度的一半并且当前点击页码小于等于总页码数
        if (!(elNum < _listLength || (elNum > this.Pageall - _listLength && elNum <= this.Pageall))) {//这里有个取反
            // 点击页码中间以后的页码处理 例如 1 2 3 4 .... 8 9 则 5以后的页码点击处理事件
            //判断当前页码的最后一个数除以当前点击页码，向上取整，是否小于当前页码的最后一个数减去当前点击页码，并且索引值不为0
            if (!(Math.ceil(lastPage / elNum) < lastPage - elNum) && this.Index != 0) {//这里有一个取反
                difference = elNum - parseInt(_list[_listLength - 1].innerText); // 计算差异
                [ ].__proto__.forEach.apply($(_list), [function (value, index, ar) {//forEach循环数组，循环所有获取到的中间页码数，并且获取数组中的每一个元素的索引
                    value.innerText = parseInt(value.innerText) + difference; // 跟中间的值进行比较
                } ])
                this.Index = _listLength - 1; // 记录索引
            } else {
                // 向页码中间以前的页码点击处理事件
                difference = elNum - parseInt(_list[_listLength - 1].innerText); //计算当前页码跟所点击的页码的差异
                [ ].__proto__.forEach.apply($(_list), [function (value, index, ar) {//forEach循环数组，循环所有获取到的中间页码数，并且获取数组中的每一个元素的索引
                    value.innerText = parseInt(value.innerText) + difference; // 跟中间的值进行比较
                } ])
                this.Index = _listLength - 1; // 记录索引
            }
        } else if (elNum > this.Pageall - _listLength && elNum <= this.Pageall) { // 最大页码设置
            var elthis = this;
            [ ].__proto__.forEach.apply($(_list), [
                            function (value, index, ar) {//forEach循环数组，循环所有获取到的中间页码数，并且获取数组中的每一个元素的索引
                                value.innerText = elthis.Pageall + 1 - ar.length + index;
                            } ])
        } else if (elNum < _listLength) { // 最小页码设置
            [ ].__proto__.forEach.apply($(_list), [function (value, index, ar) {//forEach循环数组，循环所有获取到的中间页码数，并且获取数组中的每一个元素的索引
                value.innerText = index + 1; // 跟中间的值进行比较
            } ])
        }
        // 页码点击处理事件
        [ ].__proto__.forEach.apply(_list, [function (value, index, ar) {//forEach循环数组，循环所有获取到的中间页码数，并且获取数组中的每一个元素的索引
            if (parseInt(value.innerHTML) == elNum) {//判断循环出来的元素的值是否为当前点击页码
                Index = index;
            } //获取索引
        } ])
        this.Index = Index; //获取当前索引
        this.PageNum = elNum; // 修改当前页数

        U.selectEl(_list[this.Index]).addClass("U_MD_F_Y_Button_Active"); //并且点击样式不改变
    }
}