好吧,用ReactJs做功能,结果又要分页了,跟分页真是剪不断的猿粪啊,跟JQuery的相比,ReactJs中全是组件,以下为具体代码
var PagerLink = React.createClass({
clickEvent:function(){
if(this.props.className.indexOf('disabled')<0 && this.props.className.indexOf('active')<0){
this.props.callBack(this.props.index);
}
},
render: function() {
return (
<li className={this.props.className} onClick={this.clickEvent}><a href="javascript:void(0)">{this.props.text}</a></li>
);
}
});
var Pager = React.createClass({
getInitialState: function() {
return {
goIndex:''
};
},
getDefaultProps: function() {
return {
totalCount:0,
firstText:'First',
prevText:'Prev',
nextText:'Next',
lastText:'Last',
showLinkNum:10 ,//如果设置小于0的数字,那么则不显示数字标签
alwaysShow:true,//当总页数只有一页时是否显示
goWidth:50,//跳转输入框的宽度
recordTextFormat: '{0}/{1}' //{0}对应当前页 {1}对应总页数 {2}对应总记录数 如果不希望显示此部分内容,将此部分赋空值
};
},
callBack:function(index){
this.props.callBack(index);
},
getPageLink: function(p){
return <PagerLink key={p.Key} text={p.Text} index={p.Index} className={p.ClassName} callBack={this.callBack}/>;
},
goIndexChanged:function(e){
var n = parseInt(e.target.value);
var v='';
if(!isNaN(n)&&n>0){
v= Math.min(n,this.getTotalPages())+'';
}
this.setState({goIndex:v});
},
getTotalPages:function(){
return Math.ceil(this.props.totalCount / this.props.pageSize);
},
goClicked:function(){
var idx = ~~this.state.goIndex -1;
if(idx>=0&& idx!=this.props.pageIndex){
this.callBack(idx);
this.setState({goIndex:''});
}
},
render: function() {
var display='';
if(!this.props.alwaysShow || this.props.totalCount == 0){
display = this.props.totalCount<=this.props.pageSize?'none':'';
}
var totalPages = this.getTotalPages();
var arr=[];
var prevDisplay = 0==this.props.pageIndex?'disabled':'';
var lastDisplay = totalPages-1==this.props.pageIndex?'disabled':'';
arr.push(
this.getPageLink({
Key : "F",
Text : this.props.firstText,
Index : 0,
ClassName : prevDisplay
})
);
arr.push(
this.getPageLink({
Key : "P",
Text : this.props.prevText,
Index : Math.max(this.props.pageIndex - 1,0),
ClassName : prevDisplay
})
);
if(this.props.showLinkNum > 0){
//PageIndex从0开始计算
var startIndex = ~~(this.props.pageIndex / this.props.showLinkNum) * this.props.showLinkNum;
var endIndex = Math.min(startIndex + this.props.showLinkNum,totalPages);
for(var i=startIndex;i<endIndex;i++){
arr.push(
this.getPageLink({
Key : i,
Text : i + 1,
Index : i,
ClassName : i==this.props.pageIndex?'active':''
})
);
}
}
arr.push(
this.getPageLink({
Key : "N",
Text : this.props.nextText,
Index : Math.min(this.props.pageIndex + 1,totalPages - 1),
ClassName : lastDisplay
})
);
arr.push(
this.getPageLink({
Key : "L",
Text : this.props.lastText,
Index : totalPages - 1,
ClassName : lastDisplay
})
);
if(totalPages>this.props.showLinkNum){//显示快速跳转输入框
arr.push(
<li key="G">
<div className="input-group" style={{display:'inline-block',float:'left'}}>
<input type="text" className="form-control" maxLength={(totalPages+"").length} value={this.state.goIndex} onChange={this.goIndexChanged} style={{width:this.props.goWidth}} />
<span className="input-group-btn" style={{display:'inline-block'}}>
<button className="btn btn-default" onClick={this.goClicked} type="button">Go</button>
</span>
</div>
</li>
);
}
if(this.props.recordTextFormat.length>0){//显示文本
arr.push(
<li key="T" style={{marginLeft:5}}>
<span>{this.props.recordTextFormat.replace(/\{0\}/g, this.props.pageIndex + 1)
.replace(/\{1\}/g, totalPages).replace(/\{2\}/g, this.props.totalCount)}</span>
</li>
);
}
return (
<ul className="pagination" style={{margin: '0px 0px',display:display}}>
{arr}
</ul>
);
}
});
因为分页不可能作为一个单独的组件存在,所以这里的示例代码写在render方法里
render: function() {
var pagerSetting={
totalCount:this.state.TotalCount,
pageSize:this.state.PageSize,
pageIndex:this.state.PageIndex,
firstText:"首页" ,
prevText:"上一页",
nextText:"下一页",
lastText:"尾页",
recordTextFormat: "{0}/{1}页 共{2}条记录",
//showLinkNum:2,
callBack:this.pageIndexChanged
};
return (
<div className="panel-body">
<Pager {...pagerSetting} />
</div>
);
}
效果截图