Nocturnal Practitioners of Magic

    react-pagination-ht

    1.2.3 • Public • Published

    react-pagination 分页组件

    使用(usage):

    npm install react-pagination-ht --save;
    
    import ReactPagination  from "react-pagination-ht";
    

    简介(summary): 在做后台开发的时候,分页组件绝对是很重要的一环。刚好我就遇到这么一个情况,需要对日志做个系统的管理。

    现在在后台管理中常用的分页组件是easygrid.js,在vue和react大行其道的前端圈,easygrid.js...怎么说呢有点过时了。

    用这个也不符合我做这个系统的初衷,于是在npm找了些用react做的分页组件,npm下来,import...

    报错异常的多,而且还不符合我的业务场景。easygrid.js倒是很符合,但是你懂的,既然用react做,那就用react做,

    分页组件: 自由度要高,可以控制每一列的渲染。

    render方法是

    分页组件配置(configuration):

    	<ReactPagination
    	tHead={[
    					"日志ID",
    					"标题",
    					"发布时间",
    					"操作"
    				]} 
    			searchUrl="/requestUrl"
                                param={{id:this.state.id,tittle:this.state.tittle,time:this.state.time}}
    			lists={[
    					{type:"text",
    					rowDataProp:"id"},
    					{type:"text",
    					rowDataProp:"tittle"},
    					{type:"render",
    					render:this.transformTime.bind(this)},
    					{type:"render",
    					render:this.generator.bind(this)}
    				]}
    				pagesListNum={7}
    			mainCallBack={this.mainCallBack.bind(this)}/>
    

    Props说明(usage of props):

    1.tHead:table head 标题行 
    
    2.searchUrl:action request address
    
    3.param为请求参数。
    
    4.lists 定制每一行的列渲染行为,这点和easygrid很相似,如果规定为render,则方法的第一个参数为rowData,你可以为所欲为。
    
    5.最后一个为主回调方法,第一个参数为请求的全量数据,第二个参数为分页的页数。
    

    注意(pay attention): 传递给服务端的两个字段为:pagesListNum,intStart。全部请求的参数为

    id:"1",//from props
    tittle:"xxx", //from props
    time:"123113", //from props
    pagesListNum:7 //from this component
    intStart:17 //from this component
    

    最后附加在包装组件中以上两个渲染方法的实现(wrap component implements methods):

    generator(rowData){
    	return (<div style={{display:"inline-block"}}><span onClick={this.edit.bind(this,rowData.id)} className="operation-span" style={{display:"inline-block",
    							backgroundColor:"",
    							borderRadius:"3px",
    							padding:"10px",
    							paddingTop:"3px",
    							paddingBottom:"3px",
    							backgroundColor:"#50cf8e",
    							color:"white",
    							cursor:"pointer"
    							}}>编辑</span>
    							<span className="operation-span-delete" 
    							style={{display:"inline-block",
    							borderRadius:"3px",
    							padding:"10px",
    							paddingTop:"3px",
    							paddingBottom:"3px",
    							backgroundColor:"#f69581",
    							marginLeft:"20px",
    							color:"white",
    							cursor:"pointer"
    							}}
    							onTouchTap={this.deleteArticleSetId.bind(this,rowData.id)}>删除</span></div>)
    }
    
    // transform  timestamp to normal time
    transformTime(rowData){
    	return new Date(parseInt(rowData.time)).toLocaleString().replace(/:\d{1,2}$/,' ');
    }
    

    请求的数据格式(result of the requestUrl):

    {
    "count": 285,
    "resultList": [
        {
            "_id": "59358ac0daea9d0a6c1d3400",
            "id": 28,
            "tittle": "萨克的撒大黄是是是空的阿达啊哈大大",
            "value": "google",
            "time": 1496681150653,
            "updateTime": "1497792799187"
        },
        {
            "_id": "59358ac0daea9d0a6c1d342c",
            "id": 72,
            "tittle": "黄涛",
            "value": "Google ",
            "time": 1496681150713
        },
        {
            "_id": "59358ac3daea9d0a6c1d343d",
            "id": 89,
            "tittle": "黄涛",
            "value": "Google ",
            "time": 1496681150729
        },
        {
            "_id": "59358ac3daea9d0a6c1d344a",
            "id": 102,
            "tittle": "黄涛",
            "value": "Google 。",
            "time": 1496681150743
        },
        {
            "_id": "59358ac3daea9d0a6c1d344c",
            "id": 104,
            "tittle": "黄涛",
            "value": "Google 。",
            "time": 1496681150745
        },
        {
            "_id": "59358ac3daea9d0a6c1d344d",
            "id": 105,
            "tittle": "黄涛",
            "value": "验。",
            "time": 1496681150746
        },
        {
            "_id": "59358ac3daea9d0a6c1d344e",
            "id": 106,
            "tittle": "黄涛",
            "value": "Google 在新加坡组建工程中心时就曾说过:新加坡是最能给互联网带来「新的十亿用户」的国家。除了 Google、Facebook、",
            "time": 1496681150747
        }
    ]}
    

    that's it!

    Install

    npm i react-pagination-ht

    Homepage

    ~

    DownloadsWeekly Downloads

    16

    Version

    1.2.3

    License

    MIT

    Last publish

    Collaborators

    • brucehuangtao