<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>勾选和分页组件之React16.4.0版</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<style>
table{
border-collapse: collapse;
border: 1px solid #cbcbcb;
width:1000px;
background:#ffffff;
text-align:center;
}
table td,table th {
padding: 5px;
border: 1px solid #cbcbcb;
font-weight:100
}
div button{
color:gray;
margin-right:5px
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/babel">
const container = document.getElementById('container');
function TwoImg(props) {
var checkImg = {
yes: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADqADAAQAAAABAAAADgAAAAC98Dn6AAAA+UlEQVQoFZWSMU4DMRBF/584G7QSRcIxuAZKEykNEiUVHVTQRaKh4AIcgAvQpkukVDlBOAYNSGSlXXuwpViyYYFdS9aMZ/6bsezh5HZ3T2KhqkfosEhWqnjkyd1u3xWKdQMsfaEAB0Zilf8swfdU0w0klmpGpz1BvpbHcklbPf8Okts0CfJtWBTz/Yc++Jc8S3PZVQfKGwiuvMD6XYsMzm1dT/1jXKdQ8E0asHRrAzOzbC6UGINWHPQp1UQ/6wjF2LpmJSKfhti4Bi8+lhWP4I+gAqV1uqSi8j9WRuF3m3eMWVUJBeKxzUoYn7bEX7HDyPmB7QEHbRjyL+/+VnuXDUFOAAAAAElFTkSuQmCC',
no: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADqADAAQAAAABAAAADgAAAAC98Dn6AAAAbklEQVQoFWM8c+ZMLQMDQxUQcwAxMeAHUFEbC5CoYmNj02ZmZn5FjK6/f/+K/fr16ypIIwdIk7a29hdiNF69ehWkjIOJGMXY1IxqxBYqULEhFDiglPMDlIygKQKPryBSILUgPSCNbaC0B6RJSuQAbowizhJuOsAAAAAASUVORK5CYII=',
};
return (<img src={props.isTrue?checkImg.yes:checkImg.no} onClick={props.clickImg.bind(this)}/>)
}
class TablePage extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.initThead = [];
this.dataIndexs = [];
this.maxRowspan = 1;
if(props.giveParentClickAllPages){
props.giveParentClickAllPages(this)
}
}
getDataIndexsAndMaxRowspan(columns,maxRowspan){
var that=this;
columns.forEach(function(item,index) {
if(item.children){
maxRowspan+=1;
if(maxRowspan>that.maxRowspan) that.maxRowspan = maxRowspan;
that.getDataIndexsAndMaxRowspan(item.children,maxRowspan)
}else{
that.dataIndexs.push(item.dataIndex)
}
});
}
getThisRowspan(columns,maxRowspan){
var that=this;
columns.forEach(function(item,index) {
if(item.children){
item.thisRowspan=1;
that.getThisRowspan(item.children,maxRowspan-1)
}else{
item.thisRowspan=maxRowspan;
}
});
}
addEachColumnMaxColspan(columns){
var that=this;
columns.forEach(function(item) {
if(item.children){
if(!item.thisColspan)that.addThisColumnMaxColspan(item,item.children)
}else{
item.thisColspan=1;
}
});
}
addThisColumnMaxColspan(item,children){
var that=this;
children.forEach(function(child,index) {
var thisChildren= child.children;
if(thisChildren){
that.addThisColumnMaxColspan(item,thisChildren);
that.addEachColumnMaxColspan(children);
}else{
if(item.thisColspan){
item.thisColspan+=1;
}else{
item.thisColspan=1;
}
child.thisColspan=1;
}
});
}
getInitThead(){
for(var i=0;i<this.maxRowspan;i++){
this.initThead.push([]);
}
}
getCenterThead(columns,initThead,index){
var that=this;
columns.forEach(function(item,indexIn){
var itemTitle;
if(item.title){
itemTitle=item.title;
}else{
itemTitle=<TwoImg isTrue={that.props.checkSource.isSelectNowPage} clickImg={that.clickThisPage.bind(that,that.props.dataSource)}/>
}
initThead[index].push(<th key={indexIn+Math.random()} rowSpan={item.thisRowspan} colSpan={item.thisColspan} dataindex={item.dataIndex||''}>{itemTitle}</th>)
var children=item.children;
if(children){
that.getCenterThead(children,initThead,index+1)
}
})
}
getLastThead(thead,initThead){
var that=this;
initThead.forEach(function(item,index){
thead.push(<tr key={index}>{item}</tr>)
})
}
getTbody(dataSource,trBody){
var that=this;
dataSource.forEach(function(tr,index){
var trSingle=[];
for(var i=0;i<that.dataIndexs.length;i++){
var indexIn=that.dataIndexs[i];
var td;
if(indexIn === 'checkQC'){
td = <TwoImg isTrue={tr.state} clickImg={that.clickSingleItem.bind(that,tr,dataSource)}/>
}else{
td = tr[indexIn];
}
trSingle.push(<td key={indexIn}>{td}</td>)
}
trBody.push(<tr key={index}>{trSingle}</tr>);
});
}
componentWillUpdate(nextProps) {
this.signCheckbox(nextProps)
}
setAllState(){
this.props.checkboxClick({
allIncludedIds: this.props.checkSource.allIncludedIds,
allExcludedIds: this.props.checkSource.allExcludedIds,
isSelectNowPage: this.props.checkSource.isSelectNowPage,
isSelectAllPages: this.props.checkSource.isSelectAllPages,
textAllPages: this.props.checkSource.textAllPages,
})
}
clickAllPages(itemArray) {//所有页所有条目全选复选框被点击时执行的函数
if(this.props.checkSource.isSelectAllPages){
if(this.props.checkSource.allExcludedIds.length>0){
this.props.checkSource.isSelectAllPages = true;
this.props.checkSource.isSelectNowPage = true;
this.props.checkSource.textAllPages= '全选已启用，没有排除任何项！';
itemArray.forEach(function (item) {
item.state = true;
});
}else if(this.props.checkSource.allExcludedIds.length==0){
this.props.checkSource.isSelectAllPages = false;
this.props.checkSource.isSelectNowPage = false;
this.props.checkSource.textAllPages= '全选未启用，没有选择任何项!';
itemArray.forEach(function (item) {
item.state = false;
});
}
}else{
this.props.checkSource.isSelectAllPages = true;
this.props.checkSource.isSelectNowPage = true;
this.props.checkSource.textAllPages= '全选已启用，没有排除任何项！';
itemArray.forEach(function (item) {
item.state = true;
});
}
this.props.checkSource.allExcludedIds = [];
this.props.checkSource.allIncludedIds = [];
this.setAllState()
}
clickThisPage(itemArray) {//当前页所有条目全选复选框被点击时执行的函数
//onClick={this.clickThisPage.bind(this,params.tableDatas)
var that = this;
this.props.checkSource.isSelectNowPage = !this.props.checkSource.isSelectNowPage;
itemArray.forEach(function (item) {
item.state = that.props.checkSource.isSelectNowPage;
if (item.state) {
that.delID(item[that.props.idKey], that.props.checkSource.allExcludedIds);
that.addID(item[that.props.idKey], that.props.checkSource.allIncludedIds);
} else {
that.delID(item[that.props.idKey], that.props.checkSource.allIncludedIds);
that.addID(item[that.props.idKey], that.props.checkSource.allExcludedIds);
}
});
if(this.props.checkSource.isSelectAllPages){
if(this.props.checkSource.isSelectNowPage && this.props.checkSource.allExcludedIds.length === 0){
this.props.checkSource.textAllPages = '全选已启用，没有排除任何项！';
}else{
this.props.checkSource.textAllPages = '全选已启用，已排除'+ this.props.checkSource.allExcludedIds.length + '项！排除项的ID为：' + this.props.checkSource.allExcludedIds;
}
}else{
if(!this.props.checkSource.isSelectNowPage && this.props.checkSource.allIncludedIds.length === 0){
this.props.checkSource.textAllPages='全选未启用，没有选择任何项!';
}else{
this.props.checkSource.textAllPages = '全选未启用，已选择' + this.props.checkSource.allIncludedIds.length + '项！选择项的ID为：' + this.props.checkSource.allIncludedIds;
}
}
this.setAllState()
}
clickSingleItem(item, itemArray) {//当前页单个条目复选框被点击时执行的函数
var that = this;
item.state = !item.state;
if (item.state) {
this.props.checkSource.isSelectNowPage = true;
this.addID(item[this.props.idKey], this.props.checkSource.allIncludedIds);
this.delID(item[this.props.idKey], this.props.checkSource.allExcludedIds);
itemArray.forEach(function (item) {
if (!item.state) {
that.props.checkSource.isSelectNowPage = false;
}
});
} else {
this.props.checkSource.isSelectNowPage = false;
this.addID(item[this.props.idKey], this.props.checkSource.allExcludedIds);
this.delID(item[this.props.idKey], this.props.checkSource.allIncludedIds);
}
if(this.props.checkSource.isSelectAllPages){
if(this.props.checkSource.isSelectNowPage && this.props.checkSource.allExcludedIds.length === 0){
this.props.checkSource.textAllPages = '全选已启用，没有排除任何项！';
}else{
this.props.checkSource.textAllPages = '全选已启用，已排除'+ this.props.checkSource.allExcludedIds.length + '项！排除项的ID为：' + this.props.checkSource.allExcludedIds;
}
}else{
if(!this.props.checkSource.isSelectNowPage && this.props.checkSource.allIncludedIds.length === 0){
this.props.checkSource.textAllPages='全选未启用，没有选择任何项!';
}else{
this.props.checkSource.textAllPages = '全选未启用，已选择' + this.props.checkSource.allIncludedIds.length + '项！选择项的ID为：' + this.props.checkSource.allIncludedIds;
}
}
this.setAllState()
}
signCheckbox(nextProps) {//标注当前页被选中的条目，在翻页成功后执行。
console.log( nextProps )
var that = this;
if(nextProps.checkSource.isSelectAllPages){
nextProps.checkSource.isSelectNowPage = true;
nextProps.dataSource.forEach(function (item) {
var thisID = item[nextProps.idKey];
var index = nextProps.checkSource.allExcludedIds.indexOf(thisID);
if (index > -1) {
item.state = false;
nextProps.checkSource.isSelectNowPage = false;
} else {
item.state = true;
}
});
}else{
nextProps.checkSource.isSelectNowPage = true;
nextProps.dataSource.forEach(function (item) {
var thisID = item[nextProps.idKey];
var index = nextProps.checkSource.allIncludedIds.indexOf(thisID);
if (index === -1) {
item.state = false;
nextProps.checkSource.isSelectNowPage = false;
} else {
item.state = true;
}
});
}
this.state.isSelectNowPage=nextProps.checkSource.isSelectNowPage;
}
addID(id, idArray) {
var index = idArray.indexOf(id);
if (index === -1) {
idArray.push(id);//如果当前页的单项既有勾选又有非勾选，这时勾选当前页全选，需要这个判断，以免重复添加
}
}
delID(id, idArray) {
var index = idArray.indexOf(id);
if (index > -1) {
idArray.splice(index, 1)
}
}
render() {
var that=this;
var thead=[];
var tbody=[];
var trBody=[];
var columns=this.props.columns;
var dataSource=this.props.dataSource;
this.initThead = [];
this.dataIndexs = [];
this.getDataIndexsAndMaxRowspan(columns,this.maxRowspan);
this.getThisRowspan(columns,this.maxRowspan);
this.addEachColumnMaxColspan(columns);
this.getInitThead();
this.getCenterThead(columns,this.initThead,0);
this.getLastThead(thead,this.initThead);
this.getTbody(dataSource,trBody);
return (
<div>
<table>
<thead>
{thead}
</thead>
<tbody>
{trBody}
</tbody>
</table>
</div>
)
}
}
class DevidePage extends React.Component {
constructor(props) {
super(props);
this.state = { };
}
componentDidMount(){
document.getElementById("inputQC").addEventListener("keydown", this.onKeyDown.bind(this))
}
componentDidUpdate(){
document.getElementById("inputQC").addEventListener("keydown", this.onKeyDown.bind(this))
}
componentWillUnmount(){
document.getElementById("inputQC").removeEventListener("keydown", this.onKeyDown.bind(this))
}
inputChange() {
var value = parseInt(this.refs.input.value);
var allPagesNum = this.props.divideSource.allPagesNum;
if(value < allPagesNum && value > 1) {
this.props.divideSource.inputValue = value
}else if(value >= allPagesNum) {
this.props.divideSource.inputValue = allPagesNum
}else{//包含 value <= 1和value=其它非数字字符
this.props.divideSource.inputValue = 1
}
}
clickButton(value){
var nowPageNum = null;
if(value === 'front'){
this.props.divideSource.nowPageNum--;
nowPageNum = this.props.divideSource.nowPageNum
}else if(value === 'back'){
this.props.divideSource.nowPageNum++;
nowPageNum = this.props.divideSource.nowPageNum
}else if(value === 'leap'){
this.inputChange();
nowPageNum = this.props.divideSource.inputValue
}else{
nowPageNum = value
}
this.refs.input.value = nowPageNum;
this.props.divideClick(nowPageNum,this.props.divideSource.eachPageItemsNum);
}
onKeyDown(event){
if(event.key === 'Enter'){
this.inputChange();
this.refs.input.value = this.props.divideSource.inputValue;
this.props.divideClick(this.props.divideSource.inputValue,this.props.divideSource.eachPageItemsNum);
}
}
pageNumLeap(){
var eachPageItemsNum = this.refs.select.value;
this.props.divideSource.eachPageItemsNum = eachPageItemsNum;
this.props.divideClick(1,eachPageItemsNum);
}
render() {
var numButton=[];
var allPagesNum = this.props.divideSource.allPagesNum;
var nowPageNum = this.props.divideSource.nowPageNum;
if (allPagesNum >= 1 && allPagesNum <= 10) {
for (var i = 1; i <= allPagesNum; i++) {
numButton.push(<button key={i} style={i==nowPageNum?{color:'red'}:{color:'gray'}} onClick={this.clickButton.bind(this,i)}>{i}</button>)
}
} else if (allPagesNum >= 11) {
if (nowPageNum > 8) {
numButton.push(<button key={1} onClick={this.clickButton.bind(this,1)}>{1}</button>);
numButton.push(<button key={2} onClick={this.clickButton.bind(this,2)}>{2}</button>);
numButton.push(<button key={3} onClick={this.clickButton.bind(this,3)}>{3}</button>);
numButton.push(<button key={'front'} disabled>{'...'}</button>);
numButton.push(<button key={nowPageNum-2} onClick={this.clickButton.bind(this,nowPageNum-2)}>{nowPageNum-2}</button>);
numButton.push(<button key={nowPageNum-1} onClick={this.clickButton.bind(this,nowPageNum-1)}>{nowPageNum-1}</button>);
numButton.push(<button key={nowPageNum} style={{color:'red'}} onClick={this.clickButton.bind(this,nowPageNum)}>{nowPageNum}</button>);
} else {
for (i = 1; i <= nowPageNum; i++) {
numButton.push(<button key={i} style={i==nowPageNum?{color:'red'}:{color:'gray'}} onClick={this.clickButton.bind(this,i)}>{i}</button>)
}
}
// 以上当前页的左边，以下当前页的右边
if (allPagesNum - nowPageNum >= 7) {
numButton.push(<button key={nowPageNum+1} onClick={this.clickButton.bind(this,nowPageNum+1)}>{nowPageNum+1}</button>);
numButton.push(<button key={nowPageNum+2} onClick={this.clickButton.bind(this,nowPageNum+2)}>{nowPageNum+2}</button>);
numButton.push(<button key={'back'} disabled>{'...'}</button>);
numButton.push(<button key={allPagesNum-2} onClick={this.clickButton.bind(this,allPagesNum-2)}>{allPagesNum-2}</button>);
numButton.push(<button key={allPagesNum-1} onClick={this.clickButton.bind(this,allPagesNum-1)}>{allPagesNum-1}</button>);
numButton.push(<button key={allPagesNum} onClick={this.clickButton.bind(this,allPagesNum)}>{allPagesNum}</button>);
} else {
for (var i = nowPageNum + 1; i <= allPagesNum; i++) {
numButton.push(<button key={i} onClick={this.clickButton.bind(this,i)}>{i}</button>)
}
}
}
var selectOption=[];
for(var i=0;i<this.props.numOptions.length;i++){
selectOption.push(<option value={this.props.numOptions[i].back} key={i} >{this.props.numOptions[i].front}</option>)
}
return (
<div style={{display:'block',display:"flex",width:"1000px",marginTop:"20px"}}>
<div style={{display:"flex"}}>
<button style={{marginRight:"5px"}} disabled={this.props.divideSource.nowPageNum===1} onClick={this.clickButton.bind(this,'front')}>上一页</button>
<div>{ numButton }</div>
<button disabled={this.props.divideSource.nowPageNum===this.props.divideSource.allPagesNum} onClick={this.clickButton.bind(this,'back')}>下一页</button>
</div>
<div style={{display:"flex", flex:1, justifyContent:"flex-end"}}>
<div style={{marginRight:"15px"}}>
<span>转到第</span>
<input id='inputQC' key={this.props.divideSource.nowPageNum==1?Math.random():'key'} type="text" style={{width:"30px",margin:"0 5px"}} ref="input" onChange={this.inputChange.bind(this)} onKeyDown={this.onKeyDown.bind(this,event)} defaultValue={this.props.divideSource.inputValue}/>
<span>页</span>
<button style={{margin:"0 5px"}} onClick={this.clickButton.bind(this,'leap')}>Go</button>
</div>
<div>
<span>每页显示</span>
<select style={{margin:"0 5px"}} ref="select" defaultValue={this.props.divideSource.eachPageItemsNum||10} onChange={this.pageNumLeap.bind(this)}>
{ selectOption }
</select>
<span>{(this.props.text&&this.props.text.unit)||"条"}</span>
</div>
<div>
<span>{this.props.text&&this.props.text.frontMoreText}</span>
<span>{(this.props.text&&this.props.text.totalText)||"共"}</span>
<span>{(this.props.text&&this.props.divideSource.allItemsNum)||0}</span>
<span>{(this.props.text&&this.props.text.totalUnit)||"只"}</span>
<span>{this.props.text&&this.props.text.backMoreText}</span>
</div>
</div>
</div>
)
}
}
class WholePage extends React.Component {
constructor(props) {
super(props);
//this.ref = React.createRef();
this.state = {
dataSource: [],
divideSource:{
nowPageNum: 1,
allPagesNum: 1,
allItemsNum: 1,
eachPageItemsNum: 10,
inputValue:1,
},
checkSource:{
allIncludedIds: [],
allExcludedIds: [],
isSelectAllPages: false,
isSelectNowPage: false,
textAllPages: '全选未启用，没有选择任何项!',
},
};
};
componentWillMount() {
this.divideClick(1,10)
}
divideClick(nowPageNum,eachPageItemsNum) {
var data=[];
var allItemsNum = 193;
var nowPageNum = nowPageNum||1;
var eachPageItemsNum = eachPageItemsNum||10;
var allPagesNum = Math.ceil(allItemsNum/eachPageItemsNum);
for(var i=0;i<allItemsNum;i++){
var obj={
id:'id'+i,
order:i+1,
name:'姓名'+(i+1),
age:(i+10)+'岁',
street:'第'+(i+3)+'大街',
building:(i+2)+'号楼',
number:((i+1)+'0'+5)+'室',
companyAddress:'公司地址'+(i+5),
companyName:'公司名称'+(i+6),
gender:(i%2===0?'男':'女')
};
data.push(obj)
};
var dataSource = data.slice((nowPageNum-1)*eachPageItemsNum,nowPageNum*eachPageItemsNum);
this.setState({
dataSource: dataSource,
divideSource: {
nowPageNum: nowPageNum,
allPagesNum: allPagesNum,
allItemsNum: allItemsNum,
eachPageItemsNum: eachPageItemsNum,
inputValue: nowPageNum,
},
})
}
checkboxClick(object) {
this.setState({
allIncludedIds: object.allIncludedIds,
allExcludedIds: object.allExcludedIds,
isSelectAllPages: object.isSelectAllPages,
isSelectNowPage: object.isSelectNowPage,
textAllPages: object.textAllPages,
})
}
getChildClickAllPages(that){
this.childRef=that;
}
clickAllPages(dataSource){
this.childRef.clickAllPages(dataSource)
}
render() {
var columns = [
{
title: '',
dataIndex: 'checkQC',
},
{
title: '序号',
dataIndex: 'order',
},
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Person',
children: [
{
title: 'Age',
dataIndex: 'age'
},
{
title: 'Family Address',
children: [
{
title: 'Street',
dataIndex: 'street'
},
{
title: 'Block',
children: [
{
title: 'Building',
dataIndex: 'building'
},
{
title: 'Door No.',
dataIndex: 'number'
},
],
},
],
},
],
},
{
title: 'Company',
children: [
{
title: 'Company Address',
dataIndex: 'companyAddress'
},
{
title: 'Company Name',
dataIndex: 'companyName'
},
],
},
{
title: 'Gender',
dataIndex: 'gender'
},
];
var {dataSource,divideSource,checkSource}={...this.state};
var text={
unit:"项，",
totalText:"共有",
totalUnit:"项",
};
var numOptions = [
{ back: 10, front: 10 },
{ back: 20, front: 20 },
{ back: 30, front: 30 },
{ back: 40, front: 40 },
{ back: 50, front: 50 }
];
return (
<div>
<div>
<span><TwoImg isTrue={checkSource.isSelectAllPages} clickImg={this.clickAllPages.bind(this,dataSource)}/></span>
<span>是否全选所有页</span>
</div>
<TablePage
idKey='id'
columns={columns}
dataSource={dataSource}
checkSource={checkSource}
checkboxClick={this.checkboxClick.bind(this)}
giveParentClickAllPages={this.getChildClickAllPages.bind(this)}
/>
<DevidePage
text={text}
numOptions={numOptions}
divideSource={divideSource}
divideClick={this.divideClick.bind(this)}
/>
</div>
)
}
}
ReactDOM.render(<WholePage/>, container);
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>勾选和分页组件之React16.4.0版</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<style>
table{
border-collapse: collapse;
border: 1px solid #cbcbcb;
width:1000px;
background:#ffffff;
text-align:center;
}
table td,table th {
padding: 5px;
border: 1px solid #cbcbcb;
font-weight:100
}
div button{
color:gray;
margin-right:5px
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/babel">
const container = document.getElementById('container');
function TwoImg(props) {
var checkImg = {
yes: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADqADAAQAAAABAAAADgAAAAC98Dn6AAAA+UlEQVQoFZWSMU4DMRBF/584G7QSRcIxuAZKEykNEiUVHVTQRaKh4AIcgAvQpkukVDlBOAYNSGSlXXuwpViyYYFdS9aMZ/6bsezh5HZ3T2KhqkfosEhWqnjkyd1u3xWKdQMsfaEAB0Zilf8swfdU0w0klmpGpz1BvpbHcklbPf8Okts0CfJtWBTz/Yc++Jc8S3PZVQfKGwiuvMD6XYsMzm1dT/1jXKdQ8E0asHRrAzOzbC6UGINWHPQp1UQ/6wjF2LpmJSKfhti4Bi8+lhWP4I+gAqV1uqSi8j9WRuF3m3eMWVUJBeKxzUoYn7bEX7HDyPmB7QEHbRjyL+/+VnuXDUFOAAAAAElFTkSuQmCC',
no: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADqADAAQAAAABAAAADgAAAAC98Dn6AAAAbklEQVQoFWM8c+ZMLQMDQxUQcwAxMeAHUFEbC5CoYmNj02ZmZn5FjK6/f/+K/fr16ypIIwdIk7a29hdiNF69ehWkjIOJGMXY1IxqxBYqULEhFDiglPMDlIygKQKPryBSILUgPSCNbaC0B6RJSuQAbowizhJuOsAAAAAASUVORK5CYII=',
};
return (<img src={props.isTrue?checkImg.yes:checkImg.no} onClick={props.clickImg.bind(this)}/>)
}
class TablePage extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.initThead = [];
this.dataIndexs = [];
this.maxRowspan = 1;
if(props.giveParentClickAllPages){
props.giveParentClickAllPages(this)
}
}
getDataIndexsAndMaxRowspan(columns,maxRowspan){
var that=this;
columns.forEach(function(item,index) {
if(item.children){
maxRowspan+=1;
if(maxRowspan>that.maxRowspan) that.maxRowspan = maxRowspan;
that.getDataIndexsAndMaxRowspan(item.children,maxRowspan)
}else{
that.dataIndexs.push(item.dataIndex)
}
});
}
getThisRowspan(columns,maxRowspan){
var that=this;
columns.forEach(function(item,index) {
if(item.children){
item.thisRowspan=1;
that.getThisRowspan(item.children,maxRowspan-1)
}else{
item.thisRowspan=maxRowspan;
}
});
}
addEachColumnMaxColspan(columns){
var that=this;
columns.forEach(function(item) {
if(item.children){
if(!item.thisColspan)that.addThisColumnMaxColspan(item,item.children)
}else{
item.thisColspan=1;
}
});
}
addThisColumnMaxColspan(item,children){
var that=this;
children.forEach(function(child,index) {
var thisChildren= child.children;
if(thisChildren){
that.addThisColumnMaxColspan(item,thisChildren);
that.addEachColumnMaxColspan(children);
}else{
if(item.thisColspan){
item.thisColspan+=1;
}else{
item.thisColspan=1;
}
child.thisColspan=1;
}
});
}
getInitThead(){
for(var i=0;i<this.maxRowspan;i++){
this.initThead.push([]);
}
}
getCenterThead(columns,initThead,index){
var that=this;
columns.forEach(function(item,indexIn){
var itemTitle;
if(item.title){
itemTitle=item.title;
}else{
itemTitle=<TwoImg isTrue={that.props.checkSource.isSelectNowPage} clickImg={that.clickThisPage.bind(that,that.props.dataSource)}/>
}
initThead[index].push(<th key={indexIn+Math.random()} rowSpan={item.thisRowspan} colSpan={item.thisColspan} dataindex={item.dataIndex||''}>{itemTitle}</th>)
var children=item.children;
if(children){
that.getCenterThead(children,initThead,index+1)
}
})
}
getLastThead(thead,initThead){
var that=this;
initThead.forEach(function(item,index){
thead.push(<tr key={index}>{item}</tr>)
})
}
getTbody(dataSource,trBody){
var that=this;
dataSource.forEach(function(tr,index){
var trSingle=[];
for(var i=0;i<that.dataIndexs.length;i++){
var indexIn=that.dataIndexs[i];
var td;
if(indexIn === 'checkQC'){
td = <TwoImg isTrue={tr.state} clickImg={that.clickSingleItem.bind(that,tr,dataSource)}/>
}else{
td = tr[indexIn];
}
trSingle.push(<td key={indexIn}>{td}</td>)
}
trBody.push(<tr key={index}>{trSingle}</tr>);
});
}
componentWillUpdate(nextProps) {
this.signCheckbox(nextProps)
}
setAllState(){
this.props.checkboxClick({
allIncludedIds: this.props.checkSource.allIncludedIds,
allExcludedIds: this.props.checkSource.allExcludedIds,
isSelectNowPage: this.props.checkSource.isSelectNowPage,
isSelectAllPages: this.props.checkSource.isSelectAllPages,
textAllPages: this.props.checkSource.textAllPages,
})
}
clickAllPages(itemArray) {//所有页所有条目复选框被点击时执行的函数
if(this.props.checkSource.isSelectAllPages){
if(this.props.checkSource.allExcludedIds.length>0){
this.props.checkSource.isSelectAllPages = true;
this.props.checkSource.isSelectNowPage = true;
this.props.checkSource.textAllPages= '已启用,无排除项!';
itemArray.forEach(function (item) {
item.state = true;
});
}else if(this.props.checkSource.allExcludedIds.length==0){
this.props.checkSource.isSelectAllPages = false;
this.props.checkSource.isSelectNowPage = false;
this.props.checkSource.textAllPages= '未启用,无选择项!';
itemArray.forEach(function (item) {
item.state = false;
});
}
}else{
this.props.checkSource.isSelectAllPages = true;
this.props.checkSource.isSelectNowPage = true;
this.props.checkSource.textAllPages= '已启用,无排除项!';
itemArray.forEach(function (item) {
item.state = true;
});
}
this.props.checkSource.allExcludedIds = [];
this.props.checkSource.allIncludedIds = [];
this.setAllState()
}
clickThisPage(itemArray) {//当前页所有条目复选框被点击时执行的函数
//onClick={this.clickThisPage.bind(this,params.tableDatas)
var that = this;
this.props.checkSource.isSelectNowPage = !this.props.checkSource.isSelectNowPage;
itemArray.forEach(function (item) {
item.state = that.props.checkSource.isSelectNowPage;
if (item.state) {
that.delID(item[that.props.idKey], that.props.checkSource.allExcludedIds);
that.addID(item[that.props.idKey], that.props.checkSource.allIncludedIds);
} else {
that.delID(item[that.props.idKey], that.props.checkSource.allIncludedIds);
that.addID(item[that.props.idKey], that.props.checkSource.allExcludedIds);
}
});
if(this.props.checkSource.isSelectAllPages){
if(this.props.checkSource.isSelectNowPage && this.props.checkSource.allExcludedIds.length === 0){
this.props.checkSource.textAllPages = '已启用,无排除项!';
}else{
this.props.checkSource.textAllPages = '已启用,已排除'+ this.props.checkSource.allExcludedIds.length + '项!排除项的ID为:' + this.props.checkSource.allExcludedIds;
}
}else{
if(!this.props.checkSource.isSelectNowPage && this.props.checkSource.allIncludedIds.length === 0){
this.props.checkSource.textAllPages='未启用,无选择项!';
}else{
this.props.checkSource.textAllPages = '未启用,已选择' + this.props.checkSource.allIncludedIds.length + '项!选择项的ID为:' + this.props.checkSource.allIncludedIds;
}
}
this.setAllState()
}
clickSingleItem(item, itemArray) {//当前页单个条目复选框被点击时执行的函数
var that = this;
item.state = !item.state;
if (item.state) {
this.props.checkSource.isSelectNowPage = true;
this.addID(item[this.props.idKey], this.props.checkSource.allIncludedIds);
this.delID(item[this.props.idKey], this.props.checkSource.allExcludedIds);
itemArray.forEach(function (item) {
if (!item.state) {
that.props.checkSource.isSelectNowPage = false;
}
});
} else {
this.props.checkSource.isSelectNowPage = false;
this.addID(item[this.props.idKey], this.props.checkSource.allExcludedIds);
this.delID(item[this.props.idKey], this.props.checkSource.allIncludedIds);
}
if(this.props.checkSource.isSelectAllPages){
if(this.props.checkSource.isSelectNowPage && this.props.checkSource.allExcludedIds.length === 0){
this.props.checkSource.textAllPages = '已启用,无排除项!';
}else{
this.props.checkSource.textAllPages = '已启用,已排除'+ this.props.checkSource.allExcludedIds.length + '项!排除项的ID为:' + this.props.checkSource.allExcludedIds;
}
}else{
if(!this.props.checkSource.isSelectNowPage && this.props.checkSource.allIncludedIds.length === 0){
this.props.checkSource.textAllPages='未启用,无选择项!';
}else{
this.props.checkSource.textAllPages = '未启用,已选择' + this.props.checkSource.allIncludedIds.length + '项!选择项的ID为:' + this.props.checkSource.allIncludedIds;
}
}
this.setAllState()
}
signCheckbox(nextProps) {//标注当前页被选中的条目，在翻页成功后执行。
console.log( nextProps )
var that = this;
if(nextProps.checkSource.isSelectAllPages){
nextProps.checkSource.isSelectNowPage = true;
nextProps.dataSource.forEach(function (item) {
var thisID = item[nextProps.idKey];
var index = nextProps.checkSource.allExcludedIds.indexOf(thisID);
if (index > -1) {
item.state = false;
nextProps.checkSource.isSelectNowPage = false;
} else {
item.state = true;
}
});
}else{
nextProps.checkSource.isSelectNowPage = true;
nextProps.dataSource.forEach(function (item) {
var thisID = item[nextProps.idKey];
var index = nextProps.checkSource.allIncludedIds.indexOf(thisID);
if (index === -1) {
item.state = false;
nextProps.checkSource.isSelectNowPage = false;
} else {
item.state = true;
}
});
}
this.state.isSelectNowPage=nextProps.checkSource.isSelectNowPage;
}
addID(id, idArray) {
var index = idArray.indexOf(id);
if (index === -1) {
idArray.push(id);//如果当前页的单项既有勾选又有非勾选，这时勾选当前页，需要这个判断，以免重复添加
}
}
delID(id, idArray) {
var index = idArray.indexOf(id);
if (index > -1) {
idArray.splice(index, 1)
}
}
render() {
var that=this;
var thead=[];
var tbody=[];
var trBody=[];
var columns=this.props.columns;
var dataSource=this.props.dataSource;
this.initThead = [];
this.dataIndexs = [];
this.getDataIndexsAndMaxRowspan(columns,this.maxRowspan);
this.getThisRowspan(columns,this.maxRowspan);
this.addEachColumnMaxColspan(columns);
this.getInitThead();
this.getCenterThead(columns,this.initThead,0);
this.getLastThead(thead,this.initThead);
this.getTbody(dataSource,trBody);
return (
<div>
<table>
<thead>
{thead}
</thead>
<tbody>
{trBody}
</tbody>
</table>
</div>
)
}
}
class DevidePage extends React.Component {
constructor(props) {
super(props);
this.state = { };
}
componentDidMount(){
document.getElementById("inputQC").addEventListener("keydown", this.onKeyDown.bind(this))
}
componentDidUpdate(){
document.getElementById("inputQC").addEventListener("keydown", this.onKeyDown.bind(this))
}
componentWillUnmount(){
document.getElementById("inputQC").removeEventListener("keydown", this.onKeyDown.bind(this))
}
inputChange() {
var value = parseInt(this.refs.input.value);
var allPagesNum = this.props.divideSource.allPagesNum;
if(value < allPagesNum && value > 1) {
this.props.divideSource.inputValue = value
}else if(value >= allPagesNum) {
this.props.divideSource.inputValue = allPagesNum
}else{//包含 value <= 1和value=其它非数字字符
this.props.divideSource.inputValue = 1
}
}
clickButton(value){
var nowPageNum = null;
if(value === 'front'){
this.props.divideSource.nowPageNum--;
nowPageNum = this.props.divideSource.nowPageNum
}else if(value === 'back'){
this.props.divideSource.nowPageNum++;
nowPageNum = this.props.divideSource.nowPageNum
}else if(value === 'leap'){
this.inputChange();
nowPageNum = this.props.divideSource.inputValue
}else{
nowPageNum = value
}
this.refs.input.value = nowPageNum;
this.props.divideClick(nowPageNum,this.props.divideSource.eachPageItemsNum);
}
onKeyDown(event){
if(event.key === 'Enter'){
this.inputChange();
this.refs.input.value = this.props.divideSource.inputValue;
this.props.divideClick(this.props.divideSource.inputValue,this.props.divideSource.eachPageItemsNum);
}
}
pageNumLeap(){
var eachPageItemsNum = this.refs.select.value;
this.props.divideSource.eachPageItemsNum = eachPageItemsNum;
this.props.divideClick(1,eachPageItemsNum);
}
render() {
var numButton=[];
var allPagesNum = this.props.divideSource.allPagesNum;
var nowPageNum = this.props.divideSource.nowPageNum;
if (allPagesNum >= 1 && allPagesNum <= 10) {
for (var i = 1; i <= allPagesNum; i++) {
numButton.push(<button key={i} style={i==nowPageNum?{color:'red'}:{color:'gray'}} onClick={this.clickButton.bind(this,i)}>{i}</button>)
}
} else if (allPagesNum >= 11) {
if (nowPageNum > 8) {
numButton.push(<button key={1} onClick={this.clickButton.bind(this,1)}>{1}</button>);
numButton.push(<button key={2} onClick={this.clickButton.bind(this,2)}>{2}</button>);
numButton.push(<button key={3} onClick={this.clickButton.bind(this,3)}>{3}</button>);
numButton.push(<button key={'front'} disabled>{'...'}</button>);
numButton.push(<button key={nowPageNum-2} onClick={this.clickButton.bind(this,nowPageNum-2)}>{nowPageNum-2}</button>);
numButton.push(<button key={nowPageNum-1} onClick={this.clickButton.bind(this,nowPageNum-1)}>{nowPageNum-1}</button>);
numButton.push(<button key={nowPageNum} style={{color:'red'}} onClick={this.clickButton.bind(this,nowPageNum)}>{nowPageNum}</button>);
} else {
for (i = 1; i <= nowPageNum; i++) {
numButton.push(<button key={i} style={i==nowPageNum?{color:'red'}:{color:'gray'}} onClick={this.clickButton.bind(this,i)}>{i}</button>)
}
}
// 以上当前页的左边，以下当前页的右边
if (allPagesNum - nowPageNum >= 7) {
numButton.push(<button key={nowPageNum+1} onClick={this.clickButton.bind(this,nowPageNum+1)}>{nowPageNum+1}</button>);
numButton.push(<button key={nowPageNum+2} onClick={this.clickButton.bind(this,nowPageNum+2)}>{nowPageNum+2}</button>);
numButton.push(<button key={'back'} disabled>{'...'}</button>);
numButton.push(<button key={allPagesNum-2} onClick={this.clickButton.bind(this,allPagesNum-2)}>{allPagesNum-2}</button>);
numButton.push(<button key={allPagesNum-1} onClick={this.clickButton.bind(this,allPagesNum-1)}>{allPagesNum-1}</button>);
numButton.push(<button key={allPagesNum} onClick={this.clickButton.bind(this,allPagesNum)}>{allPagesNum}</button>);
} else {
for (var i = nowPageNum + 1; i <= allPagesNum; i++) {
numButton.push(<button key={i} onClick={this.clickButton.bind(this,i)}>{i}</button>)
}
}
}
var selectOption=[];
for(var i=0;i<this.props.numOptions.length;i++){
selectOption.push(<option value={this.props.numOptions[i].back} key={i} >{this.props.numOptions[i].front}</option>)
}
return (
<div style={{display:'block',display:"flex",width:"1000px",marginTop:"20px"}}>
<div style={{display:"flex"}}>
<button style={{marginRight:"5px"}} disabled={this.props.divideSource.nowPageNum===1} onClick={this.clickButton.bind(this,'front')}>上一页</button>
<div>{ numButton }</div>
<button disabled={this.props.divideSource.nowPageNum===this.props.divideSource.allPagesNum} onClick={this.clickButton.bind(this,'back')}>下一页</button>
</div>
<div style={{display:"flex", flex:1, justifyContent:"flex-end"}}>
<div style={{marginRight:"15px"}}>
<span>转到第</span>
<input id='inputQC' key={this.props.divideSource.nowPageNum==1?Math.random():'key'} type="text" style={{width:"30px",margin:"0 5px"}} ref="input" onChange={this.inputChange.bind(this)} onKeyDown={this.onKeyDown.bind(this,event)} defaultValue={this.props.divideSource.inputValue}/>
<span>页</span>
<button style={{margin:"0 5px"}} onClick={this.clickButton.bind(this,'leap')}>Go</button>
</div>
<div>
<span>每页显示</span>
<select style={{margin:"0 5px"}} ref="select" defaultValue={this.props.divideSource.eachPageItemsNum||10} onChange={this.pageNumLeap.bind(this)}>
{ selectOption }
</select>
<span>{(this.props.text&&this.props.text.unit)||"条"}</span>
</div>
<div>
<span>{this.props.text&&this.props.text.frontMoreText}</span>
<span>{(this.props.text&&this.props.text.totalText)||"共"}</span>
<span>{(this.props.text&&this.props.divideSource.allItemsNum)||0}</span>
<span>{(this.props.text&&this.props.text.totalUnit)||"只"}</span>
<span>{this.props.text&&this.props.text.backMoreText}</span>
</div>
</div>
</div>
)
}
}
class WholePage extends React.Component {
constructor(props) {
super(props);
//this.ref = React.createRef();
this.state = {
dataSource: [],
divideSource:{
nowPageNum: 1,
allPagesNum: 1,
allItemsNum: 1,
eachPageItemsNum: 10,
inputValue:1,
},
checkSource:{
allIncludedIds: [],
allExcludedIds: [],
isSelectAllPages: false,
isSelectNowPage: false,
textAllPages: '未启用,无选择项!',
},
};
};
componentWillMount() {
this.divideClick(1,10)
}
divideClick(nowPageNum,eachPageItemsNum) {
var data=[];
var allItemsNum = 193;
var nowPageNum = nowPageNum||1;
var eachPageItemsNum = eachPageItemsNum||10;
var allPagesNum = Math.ceil(allItemsNum/eachPageItemsNum);
for(var i=0;i<allItemsNum;i++){
var obj={
id:'id'+(i+1),
order:i+1,
name:'姓名'+(i+1),
age:(i+10)+'岁',
street:'第'+(i+3)+'大街',
building:(i+2)+'号楼',
number:((i+1)+'0'+5)+'室',
companyAddress:'公司地址'+(i+5),
companyName:'公司名称'+(i+6),
gender:(i%2===0?'男':'女')
};
data.push(obj)
};
var dataSource = data.slice((nowPageNum-1)*eachPageItemsNum,nowPageNum*eachPageItemsNum);
this.setState({
dataSource: dataSource,
divideSource: {
nowPageNum: nowPageNum,
allPagesNum: allPagesNum,
allItemsNum: allItemsNum,
eachPageItemsNum: eachPageItemsNum,
inputValue: nowPageNum,
},
})
}
checkboxClick(object) {
this.setState({
allIncludedIds: object.allIncludedIds,
allExcludedIds: object.allExcludedIds,
isSelectAllPages: object.isSelectAllPages,
isSelectNowPage: object.isSelectNowPage,
textAllPages: object.textAllPages,
})
}
getChildClickAllPages(that){
this.childRef=that;
}
clickAllPages(dataSource){
this.childRef.clickAllPages(dataSource)
}
render() {
var columns = [
{
title: '',
dataIndex: 'checkQC',
},
{
title: '序号',
dataIndex: 'order',
},
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Person',
children: [
{
title: 'Age',
dataIndex: 'age'
},
{
title: 'Family Address',
children: [
{
title: 'Street',
dataIndex: 'street'
},
{
title: 'Block',
children: [
{
title: 'Building',
dataIndex: 'building'
},
{
title: 'Door No.',
dataIndex: 'number'
},
],
},
],
},
],
},
{
title: 'Company',
children: [
{
title: 'Company Address',
dataIndex: 'companyAddress'
},
{
title: 'Company Name',
dataIndex: 'companyName'
},
],
},
{
title: 'Gender',
dataIndex: 'gender'
},
];
var {dataSource,divideSource,checkSource}={...this.state};
var text={
unit:"项，",
totalText:"共有",
totalUnit:"项",
};
var numOptions = [
{ back: 10, front: 10 },
{ back: 20, front: 20 },
{ back: 30, front: 30 },
{ back: 40, front: 40 },
{ back: 50, front: 50 }
];
return (
<div>
<div style={{'paddingBottom':'4px'}}>
<span style={{'paddingRight':'10px'}}><TwoImg isTrue={checkSource.isSelectAllPages && checkSource.allExcludedIds.length===0} clickImg={this.clickAllPages.bind(this,dataSource)}/></span>
<span>{checkSource.textAllPages}</span>
</div>
<TablePage
idKey='id'
columns={columns}
dataSource={dataSource}
checkSource={checkSource}
checkboxClick={this.checkboxClick.bind(this)}
giveParentClickAllPages={this.getChildClickAllPages.bind(this)}
/>
<DevidePage
text={text}
numOptions={numOptions}
divideSource={divideSource}
divideClick={this.divideClick.bind(this)}
/>
</div>
)
}
}
ReactDOM.render(<WholePage/>, container);
</script>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
