臨時存放：react框架-自寫table元件-歷次迭代
阿新 • • 發佈：2021-07-29
版本一：
<!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; } table td,table th { padding: 5px; border: 1px solid #cbcbcb; } table thead { background-color: #e0e0e0; color: #000; text-align: left; } .filter{ width:998px; border:1px solid gray; padding-top:10px; } .line{ display:flex; margin-bottom: 10px;; } .group{ width:330px; display:flex; } .label{ display: inline-block; width:120px; height: 24px; line-height: 24px; text-align: right; padding-right: 5px; } .input{ display: inline-block; width:180px; height: 24px; line-height: 24px; border-radius: 3px; padding:0 4px; } .select{ display: inline-block; width:188px; height: 26px; line-height: 26x; border-radius: 3px; } </style> </head> <body> <div id="container"></div> </body> <script type="text/babel"> const container = document.getElementById('container'); class TablePage extends React.Component { constructor(props) { super(props); this.state = {}; } render() { var thead=[]; var tbody=[]; var trThead=[]; var trBody=[]; var dataIndexs=[]; this.props.columns.forEach(function(th,index){ trThead.push(<th key={index}>{th.title}</th>) dataIndexs.push(th.dataIndex) }); thead.push(trThead); this.props.dataSource.forEach(function(tr,index){ var trSingle=[]; for(var i=0;i<dataIndexs.length;i++){ var indexIn=dataIndexs[i]; trSingle.push(<td key={indexIn}>{tr[indexIn]}</td>) } trBody.push(<tr key={index}>{trSingle}</tr>); }); return ( <div> <table> <thead> <tr> {thead} </tr> </thead> <tbody> {trBody} </tbody> </table> </div> ) } } class WholePage extends React.Component { constructor(props) { super(props); this.state = { }; }; componentWillMount() { this.onChange(1) } onChange(nowPageNum) { var data=[]; var allItemsNum = 193; for(var i=1;i<=allItemsNum;i++){ var obj={ id:'id'+i, title1:'資料'+(i+0), title2:'資料'+(i+1), title3:'資料'+(i+2) }; data.push(obj) }; var dataSource = data.slice((nowPageNum-1)*10,(nowPageNum)*10); this.setState({dataSource:dataSource }) } render() { var columns = [ { title: '標題1', dataIndex: 'title1', }, { title: '標題2', dataIndex: 'title2', }, { title: '標題3', dataIndex: 'title3', }, ]; var {dataSource}={...this.state} return ( <div> <TablePage columns={columns} dataSource={dataSource} /> </div> ) } } ReactDOM.render(<WholePage/>, container); </script> </html>