Skip to content

Commit b3c8bf9

Browse files
author
luqin
committed
new examples
1 parent bdff71f commit b3c8bf9

File tree

17 files changed

+300
-283
lines changed

17 files changed

+300
-283
lines changed

Diff for: ‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"stage": 0
3+
}

Diff for: ‎examples/advance.html

-56
This file was deleted.

Diff for: ‎examples/basic.html

-43
This file was deleted.

Diff for: ‎examples/js/advance/demo.js

+26-17
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,31 @@ import DataInsertTypeTable from './insert-type-table';
55
import AutoRowKeyTable from './auto-rowkey-table';
66
import ValidatorTable from './validator-table';
77

8-
React.render(
9-
<EditTypeTable />,
10-
document.getElementById("edit-type")
11-
);
8+
import {Col, Panel} from 'react-bootstrap';
129

13-
React.render(
14-
<DataInsertTypeTable />,
15-
document.getElementById("insert-type")
16-
);
10+
class Demo extends React.Component {
11+
render() {
12+
return (
13+
<Col md={8} mdOffset={1}>
14+
<Panel header={"Cell Edit Type Example(text, textarea, select, checkbox)"}>
15+
<h5>Source in /examples/js/advance/edit-type-table.js</h5>
16+
<EditTypeTable/>
17+
</Panel>
18+
<Panel header={"Data Insert Type Example(text, textarea, select, checkbox)"}>
19+
<h5>Source in /examples/js/advance/insert-type-table.js</h5>
20+
<DataInsertTypeTable/>
21+
</Panel>
22+
<Panel header={"Auto RowKey on Data Insert Example"}>
23+
<h5>Source in /examples/js/advance/auto-rowkey-table.js</h5>
24+
<AutoRowKeyTable/>
25+
</Panel>
26+
<Panel header={"Data Validator Example(Job Name length must great 10 char)"}>
27+
<h5>Source in /examples/js/advance/validator-table.js</h5>
28+
<ValidatorTable/>
29+
</Panel>
30+
</Col>
31+
);
32+
}
33+
}
1734

18-
React.render(
19-
<AutoRowKeyTable />,
20-
document.getElementById("auto-rowkey")
21-
);
22-
23-
React.render(
24-
<ValidatorTable />,
25-
document.getElementById("validator")
26-
);
35+
export default Demo;

Diff for: ‎examples/js/app.js

+35-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,39 @@
1+
import React from 'react';
12
import ReactDOM from 'react-dom';
23

3-
import routes from './routes';
4+
import { IndexRoute, Router, Route } from 'react-router';
5+
import createHistory from 'history/lib/createHashHistory';
6+
7+
const history = createHistory( { queryKey: false } );
8+
9+
import App from './components/App';
10+
import Home from './components/Home';
11+
import GettingStarted from './components/GettingStarted';
12+
import PageNotFound from './components/PageNotFound';
13+
14+
const routes = (
15+
<Router history={ history }>
16+
<Route path="/" component={App}>
17+
<IndexRoute component={GettingStarted} />
18+
<Route path="getting-started" component={GettingStarted}/>
19+
<Route path="examples">
20+
<Route path="basic" component={require('./basic/demo')} />
21+
<Route path="column" component={require('./advance/demo')} />
22+
<Route path="sort" component={require('./basic/demo')} />
23+
<Route path="column-format" component={require('./basic/demo')} />
24+
<Route path="selection" component={require('./basic/demo')} />
25+
<Route path="pagination" component={require('./basic/demo')} />
26+
<Route path="manipulation" component={require('./basic/demo')} />
27+
<Route path="cell-edit" component={require('./basic/demo')} />
28+
<Route path="pagination" component={require('./basic/demo')} />
29+
<Route path="style" component={require('./style/demo')} />
30+
<Route path="advance" component={require('./advance/demo')} />
31+
<Route path="complex" component={require('./basic/demo')} />
32+
<Route path="tableDataSet" component={require('./basic/demo')} />
33+
</Route>
34+
<Route path="*" component={PageNotFound}/>
35+
</Route>
36+
</Router>
37+
);
438

539
ReactDOM.render(routes, document.querySelector('#root'));

Diff for: ‎examples/js/basic/demo.js

+22-13
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,27 @@ import BasicTable from './basic-table';
44
import HoverStripedTable from './hover-striped-table';
55
import ScrollTable from './scroll-table';
66

7-
React.render(
8-
<BasicTable />,
9-
document.getElementById("basic")
10-
);
7+
import {Col, Panel} from 'react-bootstrap';
118

12-
React.render(
13-
<HoverStripedTable />,
14-
document.getElementById('hover-striped')
15-
);
9+
class Demo extends React.Component {
10+
render() {
11+
return (
12+
<Col md={8} mdOffset={1}>
13+
<Panel header={"A basic react-bootstrap-table"}>
14+
<h5>Source in /examples/js/basic/basic-table.js</h5>
15+
<BasicTable/>
16+
</Panel>
17+
<Panel header={"A basic react-bootstrap-table"}>
18+
<h5>Source in /examples/js/basic/basic-table.js</h5>
19+
<HoverStripedTable/>
20+
</Panel>
21+
<Panel header={"A basic react-bootstrap-table"}>
22+
<h5>Source in /examples/js/basic/basic-table.js</h5>
23+
<ScrollTable/>
24+
</Panel>
25+
</Col>
26+
);
27+
}
28+
}
1629

17-
18-
React.render(
19-
<ScrollTable />,
20-
document.getElementById('scroll')
21-
);
30+
export default Demo;

Diff for: ‎examples/js/cell-edit/demo.js

+24
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,27 @@ React.render(
3030
<CellEditHookTable />,
3131
document.getElementById('hook')
3232
);
33+
34+
35+
class Demo extends React.Component {
36+
render() {
37+
return (
38+
<Col md={8} mdOffset={1}>
39+
<Panel header={"A basic react-bootstrap-table"}>
40+
<h5>Source in /examples/js/basic/basic-table.js</h5>
41+
<BasicTable/>
42+
</Panel>
43+
<Panel header={"A basic react-bootstrap-table"}>
44+
<h5>Source in /examples/js/basic/basic-table.js</h5>
45+
<HoverStripedTable/>
46+
</Panel>
47+
<Panel header={"A basic react-bootstrap-table"}>
48+
<h5>Source in /examples/js/basic/basic-table.js</h5>
49+
<ScrollTable/>
50+
</Panel>
51+
</Col>
52+
);
53+
}
54+
}
55+
56+
export default Demo;

Diff for: ‎examples/js/components/App.js

+87-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,96 @@
11
import React from 'react';
22

3+
// import 'bootstrap/dist/css/bootstrap.css';
4+
// import 'jquery';
5+
// import 'bootstrap';
6+
import {
7+
Navbar,
8+
NavBrand,
9+
Nav,
10+
NavItem,
11+
NavDropdown,
12+
MenuItem,
13+
Grid,
14+
Row,
15+
Col,
16+
} from 'react-bootstrap';
17+
318
class App extends React.Component {
19+
20+
static propTypes = {
21+
children: React.PropTypes.node,
22+
};
23+
24+
static defaultProps = {};
25+
26+
constructor(props) {
27+
super(props);
28+
this.state = {};
29+
}
30+
31+
componentDidMount() {
32+
}
33+
434
render() {
35+
let examples = [{
36+
text: 'Basic Table',
37+
href: 'basic',
38+
}, {
39+
text: 'Work on Column',
40+
href: 'column',
41+
}, {
42+
text: 'Table Sort',
43+
href: 'sort',
44+
}, {
45+
text: 'Column Format',
46+
href: 'column-format',
47+
}, {
48+
text: 'Row Selection',
49+
href: 'selection',
50+
}, {
51+
text: 'Pagination',
52+
href: 'pagination',
53+
}, {
54+
text: 'Table Manipulation',
55+
href: 'manipulation',
56+
}, {
57+
text: 'Cell Edit',
58+
href: 'cell-edit',
59+
}, {
60+
text: 'Table Styling',
61+
href: 'style',
62+
}, {
63+
text: 'Advance data edit&insert',
64+
href: 'advance',
65+
}, {
66+
text: 'A complex demo',
67+
href: 'complex',
68+
}, {
69+
text: 'TableDataSet demo',
70+
href: 'tableDataSet',
71+
}];
72+
const exampleMenuItems = examples.map((e, i)=>{
73+
return <MenuItem eventKey={i} href={'#examples/' + e.href}>{e.text}</MenuItem>;
74+
});
575
return (
676
<div>
7-
{this.props.children}
77+
<Navbar inverse toggleNavKey={0}>
78+
<NavBrand><a href="#">react-bootstrap-table</a></NavBrand>
79+
<Nav eventKey={1}>
80+
<NavItem eventKey={1} href="#getting-started">Getting started</NavItem>
81+
<NavDropdown title="Examples" id="collapsible-navbar-dropdown">
82+
{exampleMenuItems}
83+
</NavDropdown>
84+
<NavItem eventKey={2} href="https://github.com/luqin/react-bootstrap-table" target="_blank">GitHub</NavItem>
85+
</Nav>
86+
</Navbar>
87+
<Grid fluid>
88+
<Row>
89+
<Col md={12}>
90+
{this.props.children}
91+
</Col>
92+
</Row>
93+
</Grid>
894
</div>
995
);
1096
}

Diff for: ‎examples/js/components/GettingStarted.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
3+
class GettingStarted extends React.Component {
4+
render() {
5+
return (
6+
<div>
7+
<h1>Getting started</h1>
8+
<code>npm i react-bootstrap-table --save</code>
9+
</div>
10+
);
11+
}
12+
}
13+
14+
export default GettingStarted;

Diff for: ‎examples/js/components/Home.js

-11
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,6 @@ class Home extends React.Component {
44
render() {
55
return (
66
<div>
7-
<a href="#basic">Basic Table</a><br/>
8-
<a href="#column">Work on Column</a><br/><br/>
9-
<a href="#sort">Table Sort</a><br/><br/>
10-
<a href="#column-format">Column Format</a><br/><br/>
11-
<a href="#selection">Row Selection</a><br/><br/>
12-
<a href="#pagination">Pagination</a><br/><br/>
13-
<a href="#manipulation">Table Manipulation</a><br/><br/>
14-
<a href="#cell-edit">Cell Edit</a><br/><br/>
15-
<a href="#style">Table Styling</a><br/><br/>
16-
<a href="#advance">Advance data edit&insert</a><br/><br/>
17-
<a href="#complex">A complex demo</a><br/><br/>
187
</div>
198
);
209
}

0 commit comments

Comments
 (0)