React —— antd Table組件的使用

今天剛剛運用antd作了個分頁，根據官網上的指導和一些本身的摸索，將其完成，有些代碼編寫的仍是比較繁瑣，沒有作簡化。

antd官網講的仍是比較詳細的，有案例，本例在其基礎上擴展了一下功能，現將其按照例子的方式記錄下來，以供之後參考。

 

先將顯示出來的效果放出來（注：本次案例是點擊一次頁碼請求一頁數據）：

 

編碼過程大致須要如下幾步：

1.初始化必要屬性，如數據 data，數據條數 count;

2.設置table的表頭標題，即，標題1，標題2這些;

3.請求數據，引用Table組件，添加相關屬性;

4.添加相應的點擊效果;

嗯，應該就這些，下邊開始詳細講。

 

最初，若是比較懶，沒有要求特別的樣式，能夠用antd所給的樣式：import '~/antd/dist/antd.css'，具體路徑依照各自的結構有區別。

 

初始化數據：

getInitialState() {    
　　this.tableColumns = [];  //初始定義表頭菜單
　　return{
	queryInfo : {    //設置最初一頁顯示多少條
	　　pageSize: 10
	},		
	dataSource:{    //數據存放
	　　count: 0,    //一共幾條數據
	　　data: [],    //數據
　　　　　},

      	loading: false  //Load屬性設置
			
　　}
}

數據初始完成後開始各類定義，使數據豐富有效起來；設置table的表頭標題：

        getTable() {    //函數封裝
		this.tableColumns = [{
			title: '菜單1',        //菜單內容
			dataIndex: 'cloud_computing_mark',   //在數據中對應的屬性
			key: 'cloud_computing_mark'   //key
			}, {
			title: '菜單2',
			dataIndex: 'project_name',
			key: 'project_name'
			}, {
			title: '菜單3',
			dataIndex: 'data_scope',
			key: 'data_scope'
			}, {
			title: '菜單4',
			dataIndex: 'description',
			key: 'description',
			}, {
			title: '操做',
			key: 'operation',
			render: (text, record) => (  //塞入內容 
			<span>
			　　<a className="edit-data" onClick={this.editSource.bind(this,text)}>編輯</a>
			　　<a className="delete-data" onClick={this.deletSource.bind(this,text)}>刪除</a>
			　　<Link className="topo-data" to={{pathname:'/a',query:{id:text.id}}}>數據拓撲</Link>
			</span>
			),
		}];

  	},

請求數據（這邊就寫請求成功後的，我用的是JSON請求的方式）,初次請求數據設置這些便可：

    promise.then(function(data) {
		this.setState({
			dataSource:{
		            count: data.count,
		            data: data.data,
			    page: 1
		        },
		});
      }.bind(this))

開始引用Table組件：

<Table 
	columns={self.tableColumns} //th菜單項
	rowKey={record => record.registered}
	dataSource={this.state.dataSource.data} //數據
	pagination={{  //分頁
		total: this.state.dataSource.count, //數據總數量
		pageSize: this.state.queryInfo.pageSize,  //顯示幾條一頁
		defaultPageSize: this.state.queryInfo.pageSize, //默認顯示幾條一頁
		showSizeChanger: true,  //是否顯示能夠設置幾條一頁的選項
		onShowSizeChange(current, pageSize) {  //當幾條一頁的值改變後調用函數，current：改變顯示條數時當前數據所在頁；pageSize:改變後的一頁顯示條數
		　　self.toSelectchange(current, pageSize); //這邊已經設置了self = this
		},
		onChange(current) {  //點擊改變頁數的選項時調用函數，current:將要跳轉的頁數
			self.gotoThispage(current, self.state.queryInfo.pageSize);
		},								            
  		showTotal: function () {  //設置顯示一共幾條數據
			return '共 ' + this.state.dataSource.count + ' 條數據';  
		}
	}}
	loading={this.state.loading}  //設置loading屬性
/>

當點擊選擇一頁顯示幾條時，請求數據，從新渲染，所調用的函數：

toSelectchange(page,num) {
　　$.ajax({
	url: url,
	type: "POST",
	dataType: 'json',
	cache:false,
	data:{
	　　page: page, 
	　　pagesize:num
	},
	success:function(data) {
	　　console.log(data);
	　　this.setState({
		queryInfo : {
		　　pageSize: num
	　　　　},						
	　　　　dataSource:{
	　　　　　　count: data.count,
	　　　　　　data: data.data,
	　　　　}
	　　});
	}.bind(this),
	error:function(data) {
	　　console.log(data);
	}.bind(this)
　　});		
}

同理，在點擊頁數和點擊上一頁下一頁時，調用函數，函數與上邊同樣，只是請求的網址會不一樣。