原创：GridView组件（三）：分页组件部分

原创：GridView组件（三）：分页组件部分

上期回顾：http://www.cnblogs.com/beiou/p/4274434.html

初始化部分：

if(this.opts.pageModule){                if(this.opts.pageModule.panel != null && this.opts.pageModule.panel.length > 0){                    this.opts.pageModule.panel.append(this._pagePanel);                }else{                    if(this.opts.pageModule.isTop){                        this._pagePanel.insertBefore(this._colHeadPanel);                    }else{                        this.target.append(this._pagePanel);                    }                }                                this.page = this._pagePanel.GridPage({                    total: this.opts.pageModule.total,                    index: this.opts.pageModule.index,                    pageNum: this.opts.pageModule.pageNum,                    pageRate: this.opts.pageModule.pageRate,                    onChange:this.opts.pageModule.onChange,                    onSetNum:this.opts.pageModule.onSetNum,                    type:this.opts.pageModule.type                });            }

组件code部分：（可单独使用，并不局限于只在Gridview中使用）

var GridPageControl = function (pObj, pOpts) {//gridview分页组件        pOpts = $.extend({            index:1,                    //当前页            viewNum:3,            pageNum:50,                 //每页显示数量            total:100,                  //总数            pageRate:[50,100,200,500],  //每页显示数量            onChange:null,              //分页事件回调function(pIndex)            onSetNum:null,               //设置每页显示数量function(pNum)            type:true        }, pOpts);        $.extend(this, pOpts);        this.target = $(pObj);        this.init(pOpts);    };    GridPageControl.PRototype = {        init: function () {            this.setOptions();            if(this.type){                this.viewPage(this.index);            }else{                this.viewPageNumber(this.index);            }        },        setOptions: function () {                        this.pageTotal = this.total % this.pageNum > 0 ? parseInt(this.total / this.pageNum) + 1 : parseInt(this.total / this.pageNum);        },        prevPage: function () {            this.index -= 1;            return this.setPageByIndex(this.index);        },        nextPage: function () {            this.index += 1;            return this.setPageByIndex(this.index);        },        setTotle: function (pNum) {            this.total = pNum;            this.pageTotal = this.total % this.pageNum > 0 ? parseInt(this.total / this.pageNum) + 1 : parseInt(this.total / this.pageNum);            if(this.type){                this.viewPage(this.index);            }else{                this.viewPageNumber(this.index);            }        },        bindEvent: function () {            var _this = this;            this.target.off("click.gridPage");            this.target.on("click.gridPage", function (e) {                e = e || window.event;                var target = e.target || e.srcElement;                target = target.tagName === "I" ? target.parentNode : target;                if (target.tagName === "A") {                    if($(target).hasClass("no")) return;                    var _type = $(target).data("type"),                        _hash = {                            "prev":function(){ _this.prevPage() },                            "next":function(){ _this.nextPage() },                            "first":function(){ _this.setPageByIndex(1) },                            "last":function(){ _this.setPageByIndex(_this.pageTotal) },                            "refresh":function(){ _this.setPageByIndex(_this.index) }                        }                    if(_hash[_type]){                        _hash[_type]();                    }else{                        var index = parseInt(target.innerHTML, 10);                        _this.setPageByIndex(index);                    }                }            });            this.pageInput.on("keydown.gridPage",function(e){                if(e.keyCode == $.KEY_ENTER){                    _this.onEnter();                }            });            this.goInput && this.goInput.on("click.gridPage",function(){                _this.onEnter();            });            this.numDrop && this.numDrop.on("change.gridPage", function () {                _this.pageNum = ~~_this.numDrop.val();                if($.type(_this.onSetNum) === "function"){                    _this.index = 1;                    _this.setTotle(_this.total);                    _this.onSetNum.call(this,_this.numDrop.val());                }            });        },        onEnter:function(){            var _val = this.pageInput.val();            _val = _val.replace(//D/g,'');            if(_val.length == 0) {                this.setPageByIndex(1);            }else{                if(~~_val == this.index){                    this.pageInput.val(this.index);                    return;                }                 if(~~_val > this.pageTotal){                    this.setPageByIndex(this.pageTotal);                }else{                    this.setPageByIndex(_val);                }            }        },        setPageByIndex: function (pIndex) {            if (typeof pIndex === "undefined") {                return this.index;            } else {                this.index = pIndex = ~ ~pIndex;                if($.type(pIndex) === "number"){                    if (pIndex < 1) {                        return [false, "over-low"];                    } else if (pIndex > this.pageTotal) {                        return [false, "over-high"];                    } else {                        this.indexHtml && this.indexHtml.html(pIndex);                                                if(this.type){                            this.pageInput.val(pIndex);                            this.initPage();                        }else{                            this.viewPageNumber(pIndex);                            this.pageInput.val(pIndex);                        }                                                if($.type(this.onChange) === "function"){                            this.onChange.call(null,pIndex);                        }                        return [true, ""];                    }                }                            }        },        initPage:function(){            if(this.index == 1){                this.firstBtn && this.firstBtn.addClass("no");                this.prevBtn.addClass("no");            }else{                this.firstBtn && this.firstBtn.removeClass("no");                this.prevBtn.removeClass("no");            }            if(this.index < this.pageTotal){                this.nextBtn.removeClass("no");                this.lastBtn && this.lastBtn.removeClass("no");            }else{                this.nextBtn.addClass("no");                this.lastBtn && this.lastBtn.addClass("no");            }        },        viewPageNumber:function(pIndex){            this.index = pIndex;            var dnum = this.viewNum % 2,                hnum = (this.viewNum - dnum) / 2,                center = pIndex - (pIndex - dnum) % hnum,                start = Math.max(1, center - hnum + 1 - dnum),                end = Math.min(this.pageTotal, start + this.viewNum - 1);            var template = '<div class="page_box">/                <$ var start = GlobalData.start,end = GlobalData.end,currentIndex = GlobalData.currentIndex; $>/                <div class="page">/                    <span class="text">共 <$= GlobalData.total $> 条</span>/                    <a href="javascript:" class="prev" data-type="prev">&lt;</a>/                    <$ if(start > 1){ $>/                        <a href="Javascript:" class="num">1</a>/                    <$ } $>/                    <$ if(start > 2){ $>/                        <span class="more">...</span>/                    <$ } $>/                    <$ for(;start < currentIndex;start++){ $>/