innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

修改demo中的描述

This commit is contained in:
huyueb 2017-10-25 16:41:38 +08:00
parent 67dfe113bd
commit 69d55a12e5
10 changed files with 308 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
build/render/InputRender.js
View File

@ -55,14 +55,32 @@ var InputRender = function (_Component) {
if (event.keyCode == 13) { if (event.keyCode == 13) {
_this.check(); _this.check();
} }
}, _this.formatCurrency = function (money) {
if (money && money != null && !!Number(money)) {
money = String(money);
var left = money.split(".")[0],
right = money.split(".")[1];
right = right ? right.length >= 2 ? "." + right.substr(0, 2) : "." + right + "0" : ".00";
var temp = left.split("").reverse().join("").match(/(\d{1,3})/g);
return (Number(money) < 0 ? "-" : "") + temp.join(",").split("").reverse().join("") + right;
} else if (money === 0) {
//注意===在这里的使用，如果传入的money为0,if中会将其判定为boolean类型，故而要另外做===判断
return "0.00";
} else {
return "";
}
}, _temp), _possibleConstructorReturn(_this, _ret); }, _temp), _possibleConstructorReturn(_this, _ret);
} }
//货币的格式化方法
InputRender.prototype.render = function render() { InputRender.prototype.render = function render() {
var _state = this.state, var _state = this.state,
value = _state.value, value = _state.value,
editable = _state.editable; editable = _state.editable;
var isclickTrigger = this.props.isclickTrigger; var _props = this.props,
isclickTrigger = _props.isclickTrigger,
format = _props.format;
var cellContent = ""; var cellContent = "";
if (editable) { if (editable) {
@ -91,6 +109,9 @@ var InputRender = function (_Component) {
}) })
); );
} else { } else {
if (format && format === "Currency") {
value = this.formatCurrency(value);
}
cellContent = isclickTrigger ? _react2["default"].createElement( cellContent = isclickTrigger ? _react2["default"].createElement(
"div", "div",
{ className: "editable-cell-text-wrapper", onClick: this.edit }, { className: "editable-cell-text-wrapper", onClick: this.edit },

58
demo/demolist/Demo1.js
View File

@ -5,39 +5,49 @@
* *
*/ */
import React, { Component } from 'react'; import React, { Component } from "react";
import Table from '../../src'; import Table from "../../src";
const columns = [ const columns = [
{ title: '用户名', dataIndex: 'a', key: 'a', width: 100 }, { title: "用户名", dataIndex: "a", key: "a", width: 100 },
{ id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 }, { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: '年龄', dataIndex: 'c', key: 'c', width: 200 }, { title: "年龄", dataIndex: "c", key: "c", width: 200 },
{ {
title: '操作', dataIndex: '', key: 'd', render() { title: "操作",
return <a href="#">一些操作</a>; dataIndex: "d",
}, key: "d",
}, render(text, record, index) {
return (
<a
href="#"
onClick={() => {
alert('这是第'+index+'列，内容为:'+text);
}}
>
一些操作
</a>
);
}
}
]; ];
const data = [ const data = [
{ a: '令狐冲', b: '男', c: 41, key: '1' }, { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
{ a: '杨过', b: '男', c: 67, key: '2' }, { a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
{ a: '郭靖', b: '男', c: 25, key: '3' }, { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
]; ];
class Demo1 extends Component { class Demo1 extends Component {
render () { render() {
return ( return (
<Table <Table
columns={columns} columns={columns}
data={data} data={data}
title={currentData => <div>标题: 这是一个标题</div>} title={currentData => <div>标题: 这是一个标题</div>}
footer={currentData => <div>表尾: 我是小尾巴</div>} footer={currentData => <div>表尾: 我是小尾巴</div>}
/> />
) );
} }
} }
export default Demo1; export default Demo1;

15
demo/demolist/Demo11.js
View File

@ -31,19 +31,16 @@ const columns11 = [
sorter: (a, b) => a.c - b.c sorter: (a, b) => a.c - b.c
}, },
{ {
title: "操作", title: "武功级别",
dataIndex: "", dataIndex: "d",
key: "d", key: "d"
render() {
return <a href="#">一些操作</a>;
}
} }
]; ];
const data11 = [ const data11 = [
{ a: "杨过", b: "男", c: 30, key: "2" }, { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
{ a: "令狐冲", b: "男", c: 41, key: "1" }, { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
{ a: "郭靖", b: "男", c: 25, key: "3" } { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
]; ];
const defaultProps11 = { const defaultProps11 = {

15
demo/demolist/Demo12.js
View File

@ -31,19 +31,16 @@ const columns12 = [
sorter: (a, b) => a.c - b.c sorter: (a, b) => a.c - b.c
}, },
{ {
title: "操作", title: "武功级别",
dataIndex: "", dataIndex: "d",
key: "d", key: "d"
render() {
return <a href="#">一些操作</a>;
}
} }
]; ];
const data12 = [ const data12 = [
{ a: "杨过", b: "男", c: 30, key: "2" }, { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
{ a: "令狐冲", b: "男", c: 41, key: "1" }, { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
{ a: "郭靖", b: "男", c: 25, key: "3" } { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
]; ];
const defaultProps12 = { const defaultProps12 = {

15
demo/demolist/Demo13.js
View File

@ -34,19 +34,16 @@ const columns13 = [
sorter: (a, b) => a.c - b.c sorter: (a, b) => a.c - b.c
}, },
{ {
title: "操作", title: "武功级别",
dataIndex: "", dataIndex: "d",
key: "d", key: "d"
render() {
return <a href="#">一些操作</a>;
}
} }
]; ];
const data13 = [ const data13 = [
{ a: "杨过", b: "男", c: 30, key: "2" }, { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
{ a: "令狐冲", b: "男", c: 41, key: "1" }, { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
{ a: "郭靖", b: "男", c: 25, key: "3" } { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
]; ];
class Demo13 extends Component { class Demo13 extends Component {
getSelectedDataFunc = (data) =>{ getSelectedDataFunc = (data) =>{

24
demo/demolist/Demo14.js
View File

@ -42,7 +42,6 @@ class Demo14 extends React.Component {
address: "111", address: "111",
datepicker: "2017-06-12", datepicker: "2017-06-12",
MonthPicker: "2017-02", MonthPicker: "2017-02",
TimePicker: "2017-09-14 14:24:48"
}, },
{ {
key: "1", key: "1",
@ -52,7 +51,6 @@ class Demo14 extends React.Component {
address: "lucy", address: "lucy",
datepicker: "2017-06-12", datepicker: "2017-06-12",
MonthPicker: "2017-02", MonthPicker: "2017-02",
TimePicker: "2017-09-14 14:24:48"
}, },
{ {
key: "2", key: "2",
@ -62,7 +60,6 @@ class Demo14 extends React.Component {
address: "lucy", address: "lucy",
datepicker: "2017-06-12", datepicker: "2017-06-12",
MonthPicker: "2017-02", MonthPicker: "2017-02",
TimePicker: "2017-09-14 14:24:48"
}, },
{ {
key: "3", key: "3",
@ -72,7 +69,6 @@ class Demo14 extends React.Component {
address: "lucy", address: "lucy",
datepicker: "2017-06-12", datepicker: "2017-06-12",
MonthPicker: "2017-02", MonthPicker: "2017-02",
TimePicker: "2017-09-14 14:24:48"
} }
], ],
count: 4 count: 4
@ -174,23 +170,6 @@ class Demo14 extends React.Component {
/> />
); );
} }
},
{
title: "日期",
dataIndex: "TimePicker",
key: "TimePicker",
render: (text, record, index) => {
return (
<DateRender
value={text}
format={format3}
isclickTrigger={true}
onSelect={this.onDateSelect}
onChange={this.onDateChange}
placeholder={dateInputPlaceholder}
/>
);
}
} }
]; ];
} }
@ -233,8 +212,7 @@ class Demo14 extends React.Component {
age: 32, age: 32,
address: "jack", address: "jack",
datepicker: "2017-06-12", datepicker: "2017-06-12",
MonthPicker: "2017-02", MonthPicker: "2017-02"
TimePicker: "2017-09-14 14:24:48"
}; };
this.setState({ this.setState({
dataSource: [...dataSource, newData], dataSource: [...dataSource, newData],

132
demo/demolist/Demo7.js
View File

@ -5,91 +5,81 @@
* *
*/ */
import React, { Component } from "react";
import React, {Component} from 'react'; import Table from "../../src";
import Table from '../../src';
const columns7 = [ const columns7 = [
{title: "班级", dataIndex: "a", key: "a"}, { title: "班级", dataIndex: "a", key: "a" },
{title: "人数", dataIndex: "b", key: "b"}, { title: "人数", dataIndex: "b", key: "b" },
{title: "班主任", dataIndex: "c", key: "c"}, { title: "班主任", dataIndex: "c", key: "c" },
{ {
title: "操作", title: "武功级别",
dataIndex: "", dataIndex: "d",
key: "d", key: "d"
render() { }
return <a href="#">一些操作</a>;
}
}
]; ];
const data7 = [ const data7 = [
{ a: "02级一班", b: "2", c: "欧阳锋", d: "大侠", key: "1" },
{a: "02级一班", b: "2", c: "欧阳锋", key: "1"}, { a: "03级二班", b: "3", c: "归海一刀", d: "大侠", key: "2" },
{a: "03级二班", b: "3", c: "归海一刀", key: "2"}, { a: "05级三班", b: "1", c: "一拳超人", d: "愣头青", key: "3" }
{a: "05级三班", b: "1", c: "一拳超人", key: "3"}
]; ];
const columns7_1 = [ const columns7_1 = [
{title: "姓名", dataIndex: "a", key: "a"}, { title: "姓名", dataIndex: "a", key: "a" },
{title: "班级", dataIndex: "b", key: "b"}, { title: "班级", dataIndex: "b", key: "b" },
{title: "系别", dataIndex: "c", key: "c"} { title: "系别", dataIndex: "c", key: "c" }
]; ];
class Demo7 extends Component { class Demo7 extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
children_data: [] children_data: []
} };
} }
rowclick = (record, index) => { rowclick = (record, index) => {
if (record.a === "02级一班") {
if (record.a === '02级一班') { this.setState({
this.setState({ children_data: [
children_data: [ { a: "郭靖", b: "02级一班", c: "文学系", key: "1" },
{a: "郭靖", b: "02级一班", c: '文学系', key: "1"}, { a: "黄蓉", b: "02级一班", c: "文学系", key: "2" }
{a: "黄蓉", b: "02级一班", c: '文学系', key: "2"}, ]
] });
}) } else if (record.a === "03级二班") {
} else if (record.a === '03级二班') { this.setState({
this.setState({ children_data: [
children_data: [ { a: "杨过", b: "03级二班", c: "外语系", key: "1" },
{a: "杨过", b: "03级二班", c: '外语系', key: "1"}, { a: "小龙女", b: "03级二班", c: "外语系", key: "2" },
{a: "小龙女", b: "03级二班", c: '外语系', key: "2"}, { a: "傻姑", b: "03级二班", c: "外语系", key: "3" }
{a: "傻姑", b: "03级二班", c: '外语系', key: "3"}, ]
] });
}) } else if (record.a === "05级三班") {
} else if (record.a === '05级三班') { this.setState({
this.setState({ children_data: [{ a: "金圣叹", b: "05级三班", c: "美术系", key: "1" }]
children_data: [ });
{a: "金圣叹", b: "05级三班", c: '美术系', key: "1"}
]
})
}
} }
};
render() { render() {
return ( return (
<div> <div>
<Table <Table
columns={columns7} columns={columns7}
data={data7} data={data7}
onRowClick={this.rowclick} onRowClick={this.rowclick}
title={currentData => <div>标题: 我是主表</div>} title={currentData => <div>标题: 我是主表</div>}
/> />
<Table <Table
style={{marginTop: 40}} style={{ marginTop: 40 }}
columns={columns7_1} columns={columns7_1}
data={this.state.children_data} data={this.state.children_data}
title={currentData => <div>标题: 我是子表</div>} title={currentData => <div>标题: 我是子表</div>}
/> />
</div> </div>
); );
} }
} }
export default Demo7; export default Demo7;

108
demo/demolist/Demo8.js
View File

@ -6,73 +6,67 @@
*import {Table} from 'tinper-bee'; *import {Table} from 'tinper-bee';
*/ */
import React, { Component } from "react";
import React, {Component} from 'react'; import Table from "../../src";
import Table from '../../src';
import Pagination from "bee-pagination"; import Pagination from "bee-pagination";
const columns8 = [ const columns8 = [
{title: "用户名", dataIndex: "a", key: "a", width: 100}, { title: "姓名", dataIndex: "a", key: "a", width: 100 },
{id: "123", title: "性别", dataIndex: "b", key: "b", width: 100}, { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{title: "年龄", dataIndex: "c", key: "c", width: 200}, { title: "年龄", dataIndex: "c", key: "c", width: 200 },
{ {
title: "操作", title: "武功级别",
dataIndex: "", dataIndex: "d",
key: "d", key: "d"
render() { }
return <a href="#">一些操作</a>;
}
}
]; ];
const pageData = { const pageData = {
1: [ 1: [
{a: "令狐冲", b: "男", c: 41, key: "1"}, { a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
{a: "杨过", b: "男", c: 67, key: "2"}, { a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
{a: "郭靖", b: "男", c: 25, key: "3"} { a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
], ],
2: [ 2: [
{a: "芙蓉姐姐", b: "女", c: 23, key: "1"}, { a: "芙蓉姐姐", b: "女", c: 23, d: "大侠", key: "1" },
{a: "芙蓉姐姐", b: "女", c: 23, key: "2"} { a: "芙蓉妹妹", b: "女", c: 23, d: "内行", key: "2" }
] ]
} };
class Demo8 extends Component { class Demo8 extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
data: pageData[1], data: pageData[1],
activePage: 1 activePage: 1
}; };
} }
handleSelect(eventKey) { handleSelect(eventKey) {
this.setState({ this.setState({
data: pageData[eventKey], data: pageData[eventKey],
activePage: eventKey activePage: eventKey
}) });
} }
render() { render() {
return ( return (
<div> <div>
<Table columns={columns8} data={this.state.data}/> <Table columns={columns8} data={this.state.data} />
<Pagination <Pagination
first first
last last
prev prev
next next
boundaryLinks boundaryLinks
items={2} items={2}
maxButtons={5} maxButtons={5}
activePage={this.state.activePage} activePage={this.state.activePage}
onSelect={this.handleSelect.bind(this)}/> onSelect={this.handleSelect.bind(this)}
</div> />
); </div>
} );
}
} }
export default Demo8; export default Demo8;

243
demo/demolist/Demo9.js
View File

@ -7,164 +7,157 @@
* import {Table} from 'tinper-bee'; * import {Table} from 'tinper-bee';
*/ */
import React, {Component} from 'react'; import React, { Component } from "react";
import Table from '../../src'; import Table from "../../src";
import Icon from "bee-icon"; import Icon from "bee-icon";
import InputGroup from 'bee-input-group'; import InputGroup from "bee-input-group";
import FormControl from 'bee-form-control'; import FormControl from "bee-form-control";
class Search extends Component { class Search extends Component {
state = { state = {
searchValue: "", searchValue: "",
empty: false empty: false
}; };
/** /**
* 搜索 * 搜索
*/ */
handleSearch = () => { handleSearch = () => {
let {onSearch} = this.props; let { onSearch } = this.props;
this.setState({ this.setState({
empty: true empty: true
}) });
onSearch && onSearch(this.state.searchValue); onSearch && onSearch(this.state.searchValue);
}; };
/** /**
* 捕获回车 * 捕获回车
* @param e * @param e
*/ */
handleKeyDown = e => { handleKeyDown = e => {
if (e.keyCode === 13) { if (e.keyCode === 13) {
this.handleSearch(); this.handleSearch();
} }
}; };
/** /**
* 输入框改变 * 输入框改变
* @param e * @param e
*/ */
handleChange = e => { handleChange = e => {
this.setState({ this.setState({
searchValue: e.target.value searchValue: e.target.value
}); });
}; };
/** /**
* 清空输入框 * 清空输入框
*/ */
emptySearch = () => { emptySearch = () => {
let {onEmpty} = this.props; let { onEmpty } = this.props;
this.setState({ this.setState({
searchValue: "", searchValue: "",
empty: false empty: false
}); });
onEmpty && onEmpty(); onEmpty && onEmpty();
}; };
render() { render() {
return ( return (
<InputGroup simple className="search-component"> <InputGroup simple className="search-component">
<FormControl <FormControl
onChange={this.handleChange} onChange={this.handleChange}
value={this.state.searchValue} value={this.state.searchValue}
onKeyDown={this.handleKeyDown} onKeyDown={this.handleKeyDown}
placeholder="请输入用户名" placeholder="请输入用户名"
type="text" type="text"
/> />
{this.state.empty {this.state.empty ? (
? <Icon <Icon
type="uf-close-c" type="uf-close-c"
onClick={this.emptySearch} onClick={this.emptySearch}
className="empty-search" className="empty-search"
/> />
: null} ) : null}
<InputGroup.Button onClick={this.handleSearch} shape="border"> <InputGroup.Button onClick={this.handleSearch} shape="border">
<Icon type="uf-search"/> <Icon type="uf-search" />
</InputGroup.Button> </InputGroup.Button>
</InputGroup> </InputGroup>
); );
} }
} }
const columns9 = [ const columns9 = [
{ {
title: "用户名", title: "姓名",
dataIndex: "a", dataIndex: "a",
key: "a", key: "a",
width: 100 width: 100
}, },
{ {
title: "性别", title: "性别",
dataIndex: "b", dataIndex: "b",
key: "b", key: "b",
width: 100 width: 100
}, },
{ {
title: "年龄", title: "年龄",
dataIndex: "c", dataIndex: "c",
key: "c", key: "c",
width: 200 width: 200
}, },
{ {
title: "操作", title: "武功级别",
dataIndex: "", dataIndex: "d",
key: "d", key: "d"
render() { }
return <a href="#">一些操作</a>;
}
}
]; ];
const userData = [ const userData = [
{a: "令狐冲", b: "男", c: 41, key: "1"}, { a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
{a: "杨过", b: "男", c: 67, key: "2"}, { a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
{a: "郭靖", b: "男", c: 25, key: "3"} { a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
]; ];
class Demo9 extends Component { class Demo9 extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
data: userData data: userData
}; };
} }
handleSearch = (value) => { handleSearch = value => {
if(value === ''){ if (value === "") {
return this.setState({ return this.setState({
data: userData data: userData
}) });
}
let regExp = new RegExp(value, 'ig');
let data = userData.filter((item) => regExp.test(item.a));
this.setState({
data
})
} }
let regExp = new RegExp(value, "ig");
let data = userData.filter(item => regExp.test(item.a));
this.setState({
data
});
};
handleEmpty = () => { handleEmpty = () => {
this.setState({ this.setState({
data: userData data: userData
}) });
} };
render() { render() {
return ( return (
<div> <div>
<div className="clearfix"> <div className="clearfix">
<Search <Search onSearch={this.handleSearch} onEmpty={this.handleEmpty} />
onSearch={ this.handleSearch } </div>
onEmpty={ this.handleEmpty } <Table columns={columns9} data={this.state.data} />
/> </div>
</div> );
<Table columns={columns9} data={this.state.data}/> }
</div>
);
}
} }
export default Demo9; export default Demo9;

2
demo/index.js
View File

File diff suppressed because one or more lines are too long