| | |
| | | |
| | | state = { |
| | | dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | tableId: '', |
| | | data: [{uuid: Utils.getuuid()}], |
| | | refresh: false, // 强制刷新 |
| | | columns: [], |
| | |
| | | UNSAFE_componentWillMount () { |
| | | const { config } = this.props |
| | | |
| | | let tableId = (() => { |
| | | let uuid = [] |
| | | let _options = 'abcdefghigklmnopqrstuv' |
| | | for (let i = 0; i < 19; i++) { |
| | | uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1)) |
| | | } |
| | | return uuid.join('') |
| | | }) () |
| | | |
| | | if (config.wrap && config.wrap.borderColor) { // 边框颜色 |
| | | let style = `#${tableId} table, #${tableId} tr, #${tableId} th, #${tableId} td {border-color: ${config.wrap.borderColor}}` |
| | | let ele = document.createElement('style') |
| | | ele.innerHTML = style |
| | | document.getElementsByTagName('head')[0].appendChild(ele) |
| | | } |
| | | |
| | | this.setState({ |
| | | tableId, |
| | | columns: fromJS(config.cols).toJS(), |
| | | fields: fromJS(config.columns).toJS(), |
| | | lineMarks: config.lineMarks ? fromJS(config.lineMarks).toJS() : [] |
| | |
| | | } |
| | | } else if (!is(fromJS(this.state.fields), fromJS(nextProps.config.columns))) { |
| | | this.setState({fields: fromJS(nextProps.config.columns).toJS()}) |
| | | } else if (this.props.config.wrap.borderColor !== nextProps.config.wrap.borderColor) { |
| | | let style = `#${this.state.tableId} table, #${this.state.tableId} tr, #${this.state.tableId} th, #${this.state.tableId} td {border-color: ${nextProps.config.wrap.borderColor}}` |
| | | let ele = document.createElement('style') |
| | | ele.innerHTML = style |
| | | document.getElementsByTagName('head')[0].appendChild(ele) |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | render() { |
| | | const { config } = this.props |
| | | const { fields, card, lineMarks, dict } = this.state |
| | | const { fields, card, lineMarks, dict, tableId } = this.state |
| | | const components = { |
| | | header: { |
| | | cell: DragableHeaderCol |
| | |
| | | const columns = this.handlecolumns(this.state.columns, fields, config) |
| | | |
| | | return ( |
| | | <div className={`normal-table-columns ${config.setting.laypage} ${config.wrap.tableType}`}> |
| | | <div className={`normal-table-columns ${config.setting.laypage} ${config.wrap.tableType}`} id={tableId}> |
| | | <div className="col-control"> |
| | | <Icon title="复制" type="copy" onClick={this.copycolumn} /> |
| | | <MarkColumn columns={fields} type="line" marks={lineMarks} onSubmit={this.updateLineMarks} /> |