zent
Version:
一套前端设计语言和基于React的实现
107 lines (97 loc) • 2.06 kB
JavaScript
import React from 'react';
import Table from '../src/index.js';
import assign from 'zent-utils/lodash/assign';
import '../assets/index.scss';
import 'zent-pagination/assets/index.scss';
import datasets from './data/wym'; // 一个mock的数据
/*
选中功能
*/
const columns = [{
title: '标题',
width: 15,
bodyRender(data) {
return (<a>{data.title}</a>);
}
}, {
title: '创建时间',
name: 'created_time',
width: 15,
}, {
title: '商品数',
name: 'goods_num',
width: 10
}, {
title: '浏览UV/PV',
width: 12,
name: 'bro_uvpv',
needSort: true
}, {
title: '到店UV/PV',
width: 13,
name: 'shop_uvpv',
needSort: true
}, {
title: '序号',
width: 10,
name: 'order_state',
needSort: true
}, {
title: '操作',
width: 25,
bodyRender() {
let styleObj = {
display: 'inline-block',
margin: '0 5px',
color: '#cacaca',
};
function onClick(e) {
console.log(e.target.text); // eslint-disable-line
}
return (
<div className="opts">
<a onClick={onClick}>编辑</a>
<span style={styleObj}>|</span>
<a onClick={onClick}>删除</a>
<span style={styleObj}>|</span>
<a onClick={onClick}>链接</a>
<span style={styleObj}>|</span>
<a onClick={onClick}>设为主页</a>
</div>
);
}
}];
const Simple = React.createClass({
getInitialState() {
return {
limit: 10,
current: 0,
total: 101,
sortBy: 'shop_uvpv',
sortType: 'desc'
};
},
onChange(conf) {
this.setState(assign({}, this.state, conf));
},
render() {
return (
<Table
columns={columns}
datasets={datasets}
rowKey="item_id"
onChange={this.onChange}
sortBy={this.state.sortBy}
sortType={this.state.sortType}
autoStick
autoScroll
pageInfo={{
limit: this.state.limit,
current: this.state.current,
total: this.state.total
}}
/>
);
}
});
export default Simple;