react 地区筛选_仿ant-design的react 原生初级表格组件（搜索，筛选，过滤，编辑等功能）...

import React from 'react';

import Helmet from 'react-helmet';

import { Table, Modal, Tooltip, Input, message, Button, Tabs, Upload, Popconfirm } from 'antd';

import Header from '../../core/components/breadHead';

import xian from '../../core/lib/xian.js';

import { Pagination, UploadImage, SearchForm, ShowForm } from '../../xianModules/';

import { util } from '../../../utility/';

const log = [];

const headers = [{

title: '员工号',

key: 'staffNo',

dataIndex: 'staffNo',

render: (text, record) => xian.formatMoney(text),

}, {

title:'昵称',

key: 'name',

dataIndex: 'department',

}, {

title:'姓名',

key: 'realName',

dataIndex: 'department',

render: (text, record) => {

return(

{text}

{record.role}

);

},

}, {

title:'部门',

key: 'department',

dataIndex: 'department',

}];

const obj = [{

_id: 'Xvxej5HZj72k3P6uM',

userId : 'zDWSxWYFXybQrbn93',

staffNo : '18',

name : 'kim',

realName : 'kim',

department : '运营部',

role : '工作人员',

remark : '暂无',

createdAt : '2016-11-28T03:17:59.300Z',

isRemoved : true

}, {

_id: 'Xvxej5HZj72k3P6uM',

userId : 'axCpbEN99jsmCpZER',

staffNo : '22',

name : 'leo',

realName : 'leo',

department : '运营部',

role : '工作人员',

remark : '暂无',

createdAt : '2016-11-28T03:17:59.300Z',

isRemoved : true

}, {

_id: 'Xvxej5HZj72k3P6uM',

userId : 'jfQpADo3PaMkjLfB8',

staffNo : '02',

name : '袁益琴',

realName : '袁益琴',

department : '采购部',

role : '工作人员',

remark : '暂无',

createdAt : '2016-11-28T03:17:59.300Z',

isRemoved : true

}, {

_id: 'Xvxej5HZj72k3P6uM',

userId : 'roiMQ8PHPQ8t3ERCr',

staffNo : '53',

name : 'kim',

realName : '何庆',

department : '鲜库',

role : '工作人员',

remark : '暂无',

createdAt : '2016-11-28T03:17:59.300Z',

isRemoved : true

}];

let preSearchData = [];

export default class Page extends React.Component {

constructor(props) {

super(props);

this.state = {

data: obj,

}

}

componentWillMount() {

// 加载component时执行

const self = this;

const { hasUser } = self.props;

const { router } = self.context;

if (!hasUser) {

router.push('/login');

}

this.logSetState();

}

componentDidMount() {

document.onkeydown = ((e) => {

if (e.altKey && e.keyCode === 90) {

this.replay();

}

});

}

replay() {

if (log.length === 0) {

console.warn('No State to replay');

return;

}

let idx = -1;

const interval = setInterval( function() {

idx ++;

if (idx === log.length - 1) {

clearInterval(interval);

}

this.setState(log[idx]);

}.bind(this), 2000);

}

logSetState (newState) {

if (log.length < 20 ) {

log.push( log.length === 0 ? this.state : newState );

} else {

log.splice(1, 1);

log.push(newState);

}

// this.setState(newState);

}

handleTableChange(pagination, filters, sorter) {

const { current, pageSize } = pagination;

const { condition } = this.state;

this.fetch({

current,

pageSize,

condition,

});

}

render() {

const { data = obj, sortby, edit } = this.state;

return (

name: '商品',

path: '/reshelfManage',

}, {

name: '版式管理',

}]}/>

🔍搜索

{

headers.map((colum, index) => {

return (

{colum.title}{ sortby === colum.key ? this.state.descending ? '\u2191' : '\u2193' : ''});

})

}

{

headers.map((colum, index) => {

return (

);

})

}

{

data.map((item, index) => {

return (

{

headers.map((colum, idx) => {

const value = item[colum.key];

return (

{ colum.render ? colum.render(value, item) : value }

);

})

}

);

})

}

);

}

sort(e) {

const column = headers[e.target.cellIndex].key;

const datas = this.state.data.slice();

const descending = this.state.sortby === column && !this.state.descending;

datas.sort((a, b) => {

return descending ? a[column] > b[column] : a[column] < b[column];

});

this.setState({

data: datas,

sortby: column,

descending: descending,

});

this.logSetState(this.state);

}

shorEditor(e) {

this.setState({

edit: {

row: parseInt(e.target.dataset.row, 10),

cell: e.target.cellIndex,

},

});

this.logSetState(this.state);

}

handleChange(e) {

// console.log(e.target.value);

const data = this.state.data.slice();

data[this.state.edit.row][headers[this.state.edit.cell].key] = e.target.value;

this.setState({

edit: null,

data: data,

});

}

toogleSearch(e) {

if (this.state.search) {

this.setState({

data: preSearchData,

search: false,

});

preSearchData = [];

} else {

preSearchData = this.state.data;

this.setState({

search: true,

});

}

this.logSetState(this.state);

}

search(e) {

if (this.state.search) {

const needle = e.target.value.toLowerCase();

if (!needle) {

this.setState({

data: preSearchData,

});

return;

}

const idx = e.target.dataset.idx;

// console.log(row[idx]);

const searchdata = preSearchData.filter((row) => {

// console.log(row[headers[idx].key]);

return row[headers[idx].key].toString().toLowerCase().indexOf(needle) > -1;

});

this.setState({ data: searchdata });

this.logSetState(this.state);

}

}

}

Page.contextTypes = {

router: React.PropTypes.object,

};