FixedDataTable使用简介

来源：互联网发布：lol外服盒子 mac版编辑：程序博客网时间：2024/06/05 15:56

FixedDataTable是一个React的官方Table控件，它支持标准表格功能，如定义表格头、尾、列、行、列分组，以及冻结列和滚动列等实用功能。

FixedDataTable与其他Table控件最为明显的不同之处在于他的高灵活性和可拓展性，还有其在处理大数据上的高效性。

FixedDataTable的功能如下：

1.可以固定Header和Footer

2.冻结列功能

3.处理海量大数据

4.自适应行高度

5.列长度自动调整

6.高性能的滚动

7.滚动API具有触摸支持（移动端）

如果您想学习更多的FixedDataTable知识，请浏览FixedDataTable的官网：http://facebook.github.io/fixed-data-table/

好了，那么下面，我们以下方图片为例，开始FixedDataTable的使用讲解，图片如下：

图片中包括了列冻结，列组，滚动，列自适应，筛选数据，排序，风格自定义这几种最常见的功能，下面我们废话不多说，看看这些功能，究竟需要多少代码。

第一步：安装fixeddatatable

方法一：打开控制台输入npm install fixed-data-table

方法二：在package.json中加入依赖后运行npm install

第二步：在页面中加入fixeddatatable依赖

1.创建文件Table.jsx（注意，一定要是jsx而不是js,因为fixeddatatable大量使用了es6/es7语法）

2.加入fixeddatatable组件依赖 (这里用的是Commonjs的形式，你也可以用es7的import形式引入组件依赖)

var Table=require('fixed-data-table').Table;var Column=require('fixed-data-table').Column;var Cell=require('fixed-data-table').Cell;var ColumnGroup=require('fixed-data-table').ColumnGroup;

3.加入fixeddatatable样式依赖

require('fixed-data-table/dist/fixed-data-table.css');

也可以单独把fixed-data-table.css提前出来，加入在index.html中，方便调试。

第三步：进行编码

var React=require('react');var Link= require('react-router').Link;var IndexLink=require('react-router').IndexLink;//require('fixed-data-table/dist/fixed-data-table.css');var Table=require('fixed-data-table').Table;var Column=require('fixed-data-table').Column;var Cell=require('fixed-data-table').Cell;var ColumnGroup=require('fixed-data-table').ColumnGroup;//Demo数据var rows=[    {name: 'Rylan', email: 'Angelita_Weimann42@gmail.com','sex':'male',age:'18',city:'New York',address:'北京'},    {name: 'Amelia', email: 'Dexter.Trantow57@hotmail.com','sex':'male',age:'18',city:'New York',address:'上海'},    {name: 'Estevan', email: 'Aimee7@hotmail.com','sex':'male',age:'18',city:'New York',address:'深渊'},    {name: 'Florence', email: 'Jarrod.Bernier13@yahoo.com','sex':'male',age:'18',city:'New York',address:'广州'},    {name: 'Tressa', email: 'Yadira1@hotmail.com','sex':'male',age:'18',city:'New York',address:'杭州'},];//生成单元格组件class MyTextCell extends React.Component {    //渲染组件    render() {        const {rowIndex,field,data,...prop} = this.props;        return (            <Cell {...prop}>               <span className='cellColor'>{data[rowIndex][field]}</span>            </Cell>        );    }}//排序类型var SortTypes = {    ASC: 'ASC',    DESC: 'DESC'};//点击排序时切换排序方法function reverseSortDirection(sortDir) {    return sortDir === SortTypes.DESC ? SortTypes.ASC : SortTypes.DESC;}//筛选组件class SortHeaderCell extends React.Component {    constructor(props) {        super(props);        this.onSortChange = this.onSortChange.bind(this);    }    //创建onSortChange target并进行绑定    onSortChange(e) {        e.preventDefault();        if (this.props.onSortChange) {            this.props.onSortChange(                this.props.columnKey,                this.props.sortDir ?                    reverseSortDirection(this.props.sortDir) :                    SortTypes.DESC            );        }    }     //渲染组件    render() {        var {sortDir, children, ...props} = this.props;        return (            <Cell {...props}>                <a onClick={this.onSortChange}>                    {children} {sortDir ? (sortDir === SortTypes.DESC ? '↓' : '↑') : ''}                </a>            </Cell>        );    }}function classGetter(index){}class DataListWrapper {    constructor(indexMap, data) {        this._indexMap = indexMap;        this._data = data;    }    getSize() {        return this._indexMap.length;    }    getObjectAt(index) {        return this._data.getObjectAt(            this._indexMap[index]        );    }}class myTable extends React.Component{    constructor(props) {        super(props);        this.defaultSortIndexes = [];        var size = rows.length;        for (var index = 0; index < size; index++) {            this.defaultSortIndexes.push(index);        }        //定义Table列初始属性，定义Table初始数据        this.state = {            columnWidths: {                name: 100,                email: 300,                sex: 100,                age: 100,                city: 100,                address:300            },            colSortDirs: {},            tableData: rows        };        //绑定列调整回调方法        this.resizeEndCallback = this.resizeEndCallback.bind(this);        //绑定筛选方法        this.filterChange = this.filterChange.bind(this);        //绑定排序方法        this.sortChange=this.sortChange.bind(this);    }    //调整回调    resizeEndCallback(newColumnWidth, columnKey) {        this.setState(({columnWidths}) => ({            columnWidths: {                ...columnWidths,                [columnKey]: newColumnWidth            }        }));    }    //排序方法    sortChange(columnKey, sortDir) {        var sortIndexes = this.defaultSortIndexes.slice();        //数据之间进行比较        sortIndexes.sort((indexA, indexB) => {            //var valueA = this._dataList.getObjectAt(indexA)[columnKey];            //var valueB = this._dataList.getObjectAt(indexB)[columnKey];            var valueA = rows[indexA][columnKey];            var valueB = rows[indexB][columnKey];            var sortVal = 0;            if (valueA > valueB) {                sortVal = 1;            }            if (valueA < valueB) {                sortVal = -1;            }            if (sortVal !== 0 && sortDir === SortTypes.ASC) {                sortVal = sortVal * -1;            }            return sortVal;        });        var newRows=[];        for(var i=0;i<sortIndexes.length;i++){            newRows.push(rows[sortIndexes[i]]);        }        this.setState({            tableData: newRows,            colSortDirs: {                [columnKey]: sortDir            }        });    }    //筛选方法    filterChange(e) {        var colName=e.target.name        if (!e.target.value) {            this.setState({                tableData: rows            });        }        var filterBy = e.target.value.toLowerCase();        var size = rows.length;        var newRows=[];        for (var index = 0; index < size; index++) {            var firstName = rows[index][colName];            if (firstName.toLowerCase().indexOf(filterBy) !== -1) {                newRows.push(rows[index]);            }        }        //debugger;        this.setState({            tableData: newRows        });    }    //fixed 冻结 用在列上    //flexGrow 列会自动扩展    //rowHeight 行高    //rowsCount 行数    //width Table宽度    //获取行ClassName 函数    //maxHeight table最大高度    //height table高度    //groupHeaderHeight 使用列分组时，列组头部的高度（需要设定，否则不显示）    //fixed 冻结（Column属性）    render (){        var columnWidths=this.state.columnWidths;        var tableData=this.state.tableData;        var colSortDirs=this.state.colSortDirs;        return (         <div>             <input onChange={this.filterChange} name='email' placeholder="搜索Email"/><br/>            <Table                rowHeight={50}                rowsCount={tableData.length}                width={800}                rowClassNameGetter={classGetter}                maxHeight={800}                height={300}                groupHeaderHeight={30}                headerHeight={50}                onColumnResizeEndCallback={this.resizeEndCallback}                isColumnResizing={false}                >                <ColumnGroup                    fixed={true}                    header={<Cell>Basic Info</Cell>}>                    <Column columnKey='name'                            header={ <SortHeaderCell                                    onSortChange={this.sortChange}                                    sortDir={colSortDirs.name}>Name</SortHeaderCell>}                            fixed={true}                            width={columnWidths.name}                            cell={<MyTextCell data={tableData}  field='name' col="name" />}                        />                    <Column header={<Cell>Email</Cell>}                            columnKey='email'                            width={columnWidths.email}                            isResizable={true}                            flexGrow={1}                            cell={<MyTextCell data={tableData} field='email' col="email"/> }                        />                    <Column header={<Cell>Sex</Cell>}                            columnKey='sex'                            width={columnWidths.sex}                            isResizable={true}                            flexGrow={2}                            cell={<MyTextCell data={tableData} col="sex"                            field='sex'/> }                        />                    <Column header={<Cell>Age</Cell>}                            columnKey='age'                            width={columnWidths.age}                            isResizable={true}                            flexGrow={3}                            cell={<MyTextCell data={tableData} field='age' col="age"/> }                        />                </ColumnGroup>                <ColumnGroup                    fixed={true}                    header={<Cell>Extra Info</Cell>}>                    <Column header={<Cell>City</Cell>}                                  columnKey='city'                                  width={columnWidths.city}                                  isResizable={true}                                  flexGrow={4}                                  cell={<MyTextCell data={tableData} field='city' col="city"/> }                    />                    <Column header={<Cell>Address</Cell>}                            columnKey='address'                            width={columnWidths.address}                            isResizable={true}                            flexGrow={5}                            cell={<MyTextCell data={tableData} field='address' col="address"/> }                        />            </ColumnGroup>            </Table>             表单数据：{JSON.stringify(this.state.tableData)}         </div>        );    }}exports.Table=myTable;

0 0