你的位置:首页 > Java教程

[Java教程]ReactJS实现的通用分页组件


    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果:
   

    注意这个组件需要ES6环境,最好使用NodeJS结合Webpack来打包:webpack --display-error-details --config webpack.config.js

    此React版分页组件请亲们结合redux来使用比较方便,UI = Fn(State)
    基本流程就是:用户交互->Action->Reduce->Store->UIRender

    了解以上基础知识却非常必要,但不是我此次要说的重点,以上相关知识请各位自行补脑,废话就不多说,直接上代码。

   filename: paging-bar.js

 1 import React, { Component } from 'react' 2 import Immutable from 'immutable' 3 import _ from 'lodash' 4  5 /* ================================================================================ 6  * React GrxPagingBar 通用分页组件 7  * author: 天真的好蓝啊 8  * ================================================================================ */ 9 class GrxPagingBar extends Component { 10   render() { 11     var pagingOptions = { 12       showNumber: 5, 13       firstText: "<<", 14       firstTitle: "第一页", 15       prevText: "<", 16       prevTitle: "上一页", 17       beforeTitle: "前", 18       afterTitle: "后", 19       pagingTitle: "页", 20       nextText: ">", 21       nextTitle: "下一页", 22       lastText: ">>", 23       lastTitle: "最后一页", 24       classNames: "grx-pagingbar pull-right", 25     } 26      27     $.extend(pagingOptions, this.props.pagingOptions) 28  29     return ( 30       <div className={pagingOptions.classNames} > 31         <GrxPagingFirst {...pagingOptions} {...this.props} /> 32         <GrxPagingBeforeAfter isBefore="true" {...pagingOptions} {...this.props} /> 33         <GrxPagingList {...pagingOptions} {...this.props} /> 34         <GrxPagingBeforeAfter isBefore="false" {...pagingOptions} {...this.props} /> 35         <GrxPagingLast {...pagingOptions} {...this.props} /> 36         <GrxPagingInfo {...this.props} /> 37       </div> 38     ) 39   } 40 } 41  42 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 43  * 分页条头组件 44  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 45 class GrxPagingFirst extends Component { 46   render() { 47     var ids = [] 48     let paging = this.props.items.get('Paging') 49     let current = paging.get('PagingIndex') 50     let pagingIndex = current - 1 51  52     if(paging.get('PagingIndex') != 1){ 53       ids.push(1) 54     } 55  56     let html = ids.map( 57       (v,i) =>  58       <span> 59         <GrxPagingNumber title={this.props.firstTitle} text={this.props.firstText} pagingIndex={1} {...this.props}/> 60         <GrxPagingNumber title={this.props.prevTitle} text={this.props.prevText} pagingIndex={pagingIndex} {...this.props}/> 61       </span> 62     ) 63      64     return ( 65       <span className="grx-pagingbar-fl"> 66         {html} 67       </span> 68     ) 69   } 70 } 71  72 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 73  * 分页条前后页组件 74  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 75 class GrxPagingBeforeAfter extends Component { 76   render() { 77     var ids = [] 78     let isBefore = this.props.isBefore == "true" ? true : false 79     let paging = this.props.items.get('Paging') 80     let pagingCount = paging.get('PagingCount') 81     let current = paging.get('PagingIndex') 82      83     let pagingIndex = isBefore ? current - this.props.showNumber : current + this.props.showNumber 84     let title = (isBefore ? this.props.beforeTitle : this.props.afterTitle) + (this.props.showNumber + 1) + this.props.pagingTitle 85  86     if(isBefore && current > this.props.showNumber + 1){ 87       ids.push(1) 88     }else if(!isBefore && current < pagingCount - this.props.showNumber){ 89       ids.push(1) 90     } 91  92     var html = ids.map( 93       (v,i) => <a href="###" onClick={this.props.actions.pagingAction.bind(this, pagingIndex)} title={title}>..</a> 94     ) 95  96     return ( 97       <span> 98         {html} 99       </span>100     )101   }102 }103 104 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++105  * 分页条页码列表组件106  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */107 class GrxPagingList extends Component {108   render(){109     let paging = this.props.items.get('Paging')110     let count = paging.get('PagingCount')111     let current = paging.get('PagingIndex')112     let start = current - this.props.showNumber113     let end = current + this.props.showNumber114 115     var pageIndexs = new Array();116     for(var i = start; i < end; i ++) {117       if( i == current){118         pageIndexs.push(i)119       }else if(i > 0 & i <= count) {120         pageIndexs.push(i)121       }122     }123 124     var pagingList = pageIndexs.map(125       (v,i) => 126       current == v ? 127       count > 1 ? <span className="grx-pagingbar-current">{v}</span> : ""128       : 129       <GrxPagingNumber pagingIndex={v} {...this.props} />130     )131 132     return(133       <span>134         {pagingList}135       </span>136     )137   }138 }139 140 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++141  * 分页条尾部组件142  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */143 class GrxPagingLast extends Component {144   render() {145     var ids = []146     let paging = this.props.items.get('Paging')147     let pagingCount = paging.get('PagingCount')148     let current = paging.get('PagingIndex')149     let pagingIndex = current + 1150 151     if(paging.get('PagingIndex') < paging.get('PagingCount')){152       ids.push(1)153     }154 155     let html = ids.map(156       (v,i) => 157       <span>158         <GrxPagingNumber title={this.props.nextTitle} text={this.props.nextText} pagingIndex={pagingIndex} {...this.props}/>159         <GrxPagingNumber title={this.props.lastTitle} text={this.props.lastText} pagingIndex={pagingCount} {...this.props} />160       </span>161     )162 163     return (164       <span className="grx-pagingbar-fl">165         {html}166       </span>167     )168   }169 }170 171 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++172  * 分页页码组件173  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */174 class GrxPagingNumber extends Component {175   render(){176     let pagingIndex = this.props.pagingIndex177     let title = "第"+ pagingIndex + this.props.pagingTitle178     let text = pagingIndex179 180     if(this.props.title){181       title = this.props.title182     }183 184     if(this.props.text){185       text = this.props.text186     }187 188     return(189       <a href="###" onClick={this.props.actions.pagingAction.bind(this, pagingIndex)} title={title}> {text} </a>190     )191   }192 }193 194 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++195  * 分页条信息组件196  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */197 class GrxPagingInfo extends Component {198   render() {199     let paging = this.props.items.get('Paging')200     let pagingIndex = paging.get('PagingIndex')201     let pagingCount = paging.get('PagingCount')202     let totalRecord = paging.get('TotalRecord')203     return (204       <span className="grx-pagingbar-info">第{pagingIndex}/{pagingCount}页,共{totalRecord}条数据</span>205     )206   }207 }208 209 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++210  * 从此模块导出分页条组件211  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */212 export default GrxPagingBar

 

使用方法:

 1 import React, { Component } from 'react' 2 import _ from 'lodash' 3 import classNames from 'classnames' 4 import PagingBar from '.paging-bar' 5  6 /* ================================================================================ 7  * React PagingBar使用范例组件 8  * ================================================================================ */ 9 class PagingBarExample extends Component {10   render() {11     let pagingOptions = {12       showNumber: 313     }14 15     return (16       <table className="table table-condensed">17         <tbody>18           <tr>19             <td>20               <PagingBar pagingOptions={pagingOptions} {...this.props} />21             </td>22           </tr>23         </tbody>24       </table>25     )26   }27 }

好了,本次内容就这么多,写完这个文章后我马上要出去菜场买菜,饭都还没吃,这就是生活。
感谢园子里的亲们,2016新年快乐*_^。