myReactdemo/excel3.html at master · recatJsObject/myReactdemo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/table.css"/>
</head>
<body>
<div class="excel3"></div>
</body>
</html>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script>
    //完整的EXCEL
    var Excel = React.createClass({
        displayName: 'Excel',

        propTypes: {
            headers: React.PropTypes.arrayOf(
                    React.PropTypes.string
            ),
            initialData: React.PropTypes.arrayOf(
                    React.PropTypes.arrayOf(
                            React.PropTypes.string
                    )
            )
        },
        getInitialState() {
        return {data: this.props.initialData}
    },

    render: function() {
        return (
                React.DOM.table(null,
                        React.DOM.thead(null,
                                React.DOM.tr(null,
                                        this.props.headers.map(function(title, idx) {
                                            return React.DOM.th({key: idx}, title);
                                        })
                                )
                        ),
                        React.DOM.tbody(null,
                                this.state.data.map(function(row, idx) {
                                    return (
                                            React.DOM.tr({key: idx},
                                                    row.map(function(cell, idx) {
                                                        return React.DOM.td({key: idx}, cell);
                                                    })
                                            )
                                    );
                                })
                        )
                )
        );
    }
    });

    var headers = [
        "Book", "Author", "Language", "Published", "Sales"
    ];

    var data = [
        ["The Lord of the Rings", "J. R. R. Tolkien", "English", "1954-1955", "150 million"],
        ["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupéry", "French", "1943", "140 million"],
        ["Harry Potter and the Philosopher's Stone", "J. K. Rowling", "English", "1997", "107 million"],
        ["And Then There Were None", "Agatha Christie", "English", "1939", "100 million"],
        ["Dream of the Red Chamber", "Cao Xueqin", "Chinese", "1754-1791", "100 million"],
        ["The Hobbit", "J. R. R. Tolkien", "English", "1937", "100 million"],
        ["She: A History of Adventure", "H. Rider Haggard", "English", "1887", "100 million"]
    ];

    ReactDOM.render(
            React.createElement(Excel, {
                headers: headers,
                initialData: data
            }),
            document.getElementsByClassName("excel3")[0]
    );
</script>