標籤:
一、Ant Design of React
http://ant.design/docs/react/introduce
二、建立webpack工程
webpack+react demo下載
項目的啟動,參考
三、簡單配置
1.工程下載下來之後,在src目錄下建立目錄“table”,建立app.js,內容如下。
import React from ‘react‘;import ReactDOM from ‘react-dom‘;import ExampleTable from ‘./ExampleTable‘;import ‘antd/dist/antd.css‘;ReactDOM.render( <ExampleTable />, document.body);
註:記住引入antd.css, 否則Table組件無法正常顯示。
2.建立ExampleTable.js, 內容如下。
import { Table } from ‘antd‘;import React from ‘react‘;class ExampleTable extends React.Component { constructor(props) { super(props); this.showCurRowMessage = this.showCurRowMessage.bind(this); } componentDidMount() { } //展示當前行資訊 showCurRowMessage(record){ alert("key:"+record.key + " name:"+record.name + " age:" + record.age + " address:" + record.address + " description:" + record.description); } render() { let self = this; const columns = [ { title: ‘姓名‘, dataIndex: ‘name‘, key: ‘name‘ }, { title: ‘年齡‘, dataIndex: ‘age‘, key: ‘age‘, render: (text, record, index) => (Math.floor(record.age/10))*10+"多歲"}, { title: ‘住址‘, dataIndex: ‘address‘, key: ‘address‘ }, { title: ‘描述‘, dataIndex: ‘description‘, key: ‘description‘ }, { title: ‘操作‘, dataIndex: ‘‘, key: ‘operation‘, render: function(text, record, index) { alert(text.operation + " " + record.operation) return <a href="#" name="delete" onClick={function() { self.showCurRowMessage(record)} } >資訊</a>; } }, //精簡寫法 //{ title: ‘操作‘, dataIndex: ‘‘, key: ‘operation‘, render: (text, record, index) => <a href="#" name="delete" onClick={() => self.showCurRowMessage(record)}>資訊</a> }, ]; const data = [ { key: 1, name: ‘hyw‘, age: 32, address: ‘西湖區湖底公園1號‘, description: ‘我是hyw,今年32歲,住在西湖區湖底公園1號。‘, children:[ { key: 1.1, name: ‘fas‘, age: 32, address: ‘西湖區湖底公園1號‘, description: ‘我是fas,今年32歲,住在西湖區湖底公園1號。‘ }, { key: 1.2, name: ‘wyz‘, age: 42, address: ‘西湖區湖底公園2號‘, description: ‘我是wyz,今年42歲,住在西湖區湖底公園2號。‘ }, { key: 1.3, name: ‘ldz‘, age: 32, address: ‘西湖區湖底公園3號‘, description: ‘我是ldz,今年32歲,住在西湖區湖底公園3號。‘ }, ]}, { key: 2, name: ‘lkx‘, age: 32, address: ‘西湖區湖底公園1號‘, description: ‘我是lkx,今年32歲,住在西湖區湖底公園1號。‘ }, { key: 3, name: ‘mnk‘, age: 42, address: ‘西湖區湖底公園2號‘, description: ‘我是mnk,今年42歲,住在西湖區湖底公園2號。‘ }, { key: 4, name: ‘xyt‘, age: 32, address: ‘西湖區湖底公園3號‘, description: ‘我是xyt,今年32歲,住在西湖區湖底公園3號。‘ }, ]; const rowSelection = { onChange(selectedRowKeys, selectedRows) { console.log(`selectedRowKeys: ${selectedRowKeys}`, ‘selectedRows: ‘, selectedRows); }, onSelect(record, selected, selectedRows) { console.log(record, selected, selectedRows); }, onSelectAll(selected, selectedRows, changeRows) { console.log(selected, selectedRows, changeRows); }, }; return ( <div> <Table columns={columns} rowSelection={rowSelection} dataSource={data} className="table" /> </div> ); }}module.exports = ExampleTable;
3.修改入口地址
開啟webpack.config.js,修改entry配置。
entry: [ ‘webpack/hot/only-dev-server‘, "./src/table/app.js" ],
四、Table組件屬性1.Table
參數 |
說明 |
類型 |
預設值 |
rowSelection |
清單項目是否可選擇,配置項 |
Object |
null |
pagination |
分頁器,配置項參考 pagination,設為 false 時不顯示分頁 |
Object |
|
size |
正常或迷你類型,default or small |
String |
default |
dataSource |
資料數組 |
Array |
|
columns |
表格列的配置描述,具體項見下表 |
Array |
- |
rowKey |
表格行 key 的取值,可以是字串或一個函數 |
String or Function(record, index):string |
‘key‘ |
rowClassName |
表格行的類名 |
Function(record, index):string |
- |
expandedRowRender |
額外的展開行 |
Function |
- |
defaultExpandedRowKeys |
預設展開的行 |
Array |
- |
expandedRowKeys |
展開的行,控制屬性 |
Array |
- |
onChange |
分頁、排序、篩選變化時觸發 |
Function(pagination, filters, sorter) |
|
loading |
頁面是否載入中 |
Boolean |
false |
locale |
預設文案設定,目前包括排序、過濾、空資料文案 |
Object |
filterConfirm: ‘確定‘ filterReset: ‘重設‘ emptyText: ‘暫無資料‘ 預設值 |
indentSize |
展示樹形資料時,每層縮排的寬度,以 px 為單位 |
Number |
15 |
onRowClick |
處理行點擊事件 |
Function(record, index) |
- |
useFixedHeader |
是否固定表頭 |
Boolean |
false |
bordered |
是否展示外邊框和列邊框 |
Boolean |
false |
showHeader |
是否顯示表頭 |
Boolean |
true |
footer |
表格底部自訂渲染函數 |
Function(currentPageData) |
|
scroll |
橫向或縱向支援滾動,也可用於指定捲動區域的寬高度:{{ x: true, y: 300 }} |
Object |
- |
2.Column
列描述資料對象,是 columns 中的一項。
參數 |
說明 |
類型 |
預設值 |
title |
列頭顯示文字 |
String or React.Element |
- |
key |
React 需要的 key,建議設定 |
String |
- |
dataIndex |
列資料在資料項目中對應的 key,支援 a.b.c 的嵌套寫法 |
String |
- |
render |
產生複雜資料的渲染函數,參數分別為當前行的值,當前行資料,行索引,@return裡面可以設定表格行/列合并 |
Function(text, record, index) {} |
- |
filters |
表頭的篩選功能表項目 |
Array |
- |
onFilter |
本地模式下,確定篩選的運行函數 |
Function |
- |
filterMultiple |
是否多選 |
Boolean |
true |
filterDropdown |
可以自訂篩選菜單,此函數只負責渲染圖層,需要自行編寫各種互動 |
React.Element |
- |
sorter |
排序函數,本地排序使用一個函數,需要服務端排序可設為 true |
Function or Boolean |
- |
colSpan |
表頭列合并,設定為 0 時,不渲染 |
Number |
|
width |
列寬度 |
String or Number |
- |
className |
列的 className |
String |
- |
fixed |
列是否固定,可選 true (等效於 left) ‘left‘ ‘right‘ |
Boolean or String |
false |
filteredValue |
篩選的受控屬性,外界可用此控制列的篩選狀態,值為已篩選的 value 數組 |
Array |
- |
sortOrder |
排序的受控屬性,外界可用此控制列的排序,可設定為 ‘ascend‘ ‘descend‘ false |
Boolean or String |
- |
3.rowSelection
選擇功能的配置。
參數 |
說明 |
類型 |
預設值 |
type |
多選/單選,checkbox or radio |
String |
checkbox |
selectedRowKeys |
指定選中項的 key 數組,需要和 onChange 進行配合 |
Array |
[] |
onChange |
選中項發生變化的時的回調 |
Function(selectedRowKeys, selectedRows) |
- |
getCheckboxProps |
選擇框的預設屬性配置 |
Function(record) |
- |
onSelect |
使用者手動選擇/取消選擇某列的回調 |
Function(record, selected, selectedRows) |
- |
onSelectAll |
使用者手動選擇/取消選擇所有列的回調 |
Function(selected, selectedRows, changeRows) |
- |
五、資料擷取
開始使用table組件時,不知道如何擷取這一行的資料,第一種方法是配置rowSelection,在onSelect函數被調用的時候,可以擷取當前行以及其子行的資料。第二種方法是配置Column中的render屬性,這個屬性對應一個函數,fun(text, record, index){}, 這是個渲染函數,參數分別為當前行的值,當前行資料,行索引,return可以決定表格裡最終存放的值。
本例中,表格中“操作”這一列就是通過render渲染實現,render時我們可以擷取到當前行資料的引用record,並為這一列的每個表格的內容綁定了點擊事件,點擊之後alert當前行的資料。效果如所示。
六、部落格新增標籤
部落格中新增了“打賞”標籤,就在右下方。前幾天看見一個部落格有這樣的“打賞”標籤,於是模仿著做了一個,可以自行配置。由於是今天完成的,就在這裡簡單的介紹一下如何在自己的部落格裡引用這個功能。
進入自己的部落格, 依次點擊“管理”, 設定。在“頁首Html代碼”中加入下面的引用。
<!-- 掃碼打賞 --><script type="text/javascript">window.reward_config={align: "right", top: "50%", animate: true, alipay: "http://images.cnblogs.com/cnblogs_com/hujunzheng/855447/o_alipay.jpg", webChat: "http://images.cnblogs.com/cnblogs_com/hujunzheng/855447/o_webChat.png"};with(document)0[(getElementsByTagName(‘head‘)[0]||body).appendChild(createElement(‘script‘)).src=‘http://files.cnblogs.com/files/hujunzheng/my_reward.js‘];</script>
註:注意支付方式要改成自己的,引用的my_reward.js可以下載到本地,然後存放到自己部落格的檔案管理中。
更詳細的介紹請參考“打賞”標籤中的“瞭解更多”, 或者訪問 打賞demo 。
React中使用Ant Table組件