React中使用Ant Table組件

來源:互聯網
上載者:User

標籤:

一、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組件

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.