myReactdemo/excel6.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/table.css"/>
</head>
<body>
<div class="excel6"></div>
</body>
</html>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script>
    //可编辑单元格内容的表格
    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: function() {
            return {
                data: this.props.initialData,
                sortby: null,
                descending: false,
                edit: null
                 // [row index, cell index]
            };
        },
        _sort: function(e) {
            var column = e.target.cellIndex;
            var data = this.state.data.slice();
            var descending = this.state.sortby === column && !this.state.descending;
            data.sort(function(a, b) {
                return descending
                        ? (a[column] < b[column] ? 1 : -1)
                        : (a[column] > b[column] ? 1 : -1);
            });
            this.setState({
                data: data,
                sortby: column,
                descending: descending
            });
        },
        _showEditor: function(e) {
            this.setState({edit: {
                row: parseInt(e.target.dataset.row, 10),
                cell: e.target.cellIndex
            }});
        },
        _save: function(e) {
            e.preventDefault();
            var input = e.target.firstChild;
            var data = this.state.data.slice();
            data[this.state.edit.row][this.state.edit.cell] = input.value;
            this.setState({
                edit: null,
                data: data
            });
        },
        render: function() {
            return (
                    React.DOM.table(null,
                            React.DOM.thead({onClick: this._sort},
                                    React.DOM.tr(null,
                                            this.props.headers.map(function(title, idx) {
                                                if (this.state.sortby === idx) {
                                                    title += this.state.descending ? ' \u2191' : ' \u2193'
                                                }
                                                return React.DOM.th({key: idx}, title);
                                            }, this)
                                    )
                            ),
                            React.DOM.tbody({onDoubleClick: this._showEditor},
                                    this.state.data.map(function(row, rowidx) {
                                        return (
                                                React.DOM.tr({key: rowidx},
                                                        row.map(function(cell, idx) {
                                                            var content = cell;
                                                            var edit = this.state.edit;
                                                            if (edit && edit.row === rowidx && edit.cell === idx) {
                                                                content = React.DOM.form({onSubmit: this._save},
                                                                        React.DOM.input({
                                                                            type: 'text',
                                                                            defaultValue: cell
                                                                        })
                                                                );
                                                            }
                                                            return React.DOM.td({
                                                                key: idx,
                                                                'data-row': rowidx
                                                            }, content);
                                                        }, this)
                                                )
                                        );
                                    }, this)
                            )
                    )
            );
        }
    });

    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("excel6")[0]
    );
</script>