单元格CellField扩展-Demo

[kangning1206]

CellField 扩展

uxcore-table组件提供了表格行的增加、编辑、删除，但每个列中的单元格，处理编辑模式时，其表现形式与业务关系紧密，因此大部分需要项目中实现自定义的CellField；

错误表现

表格在view模式有多行数据，当点击使每一个行处于编辑模式后，
假设此时点击第2行删除，正确的显示是当前操作行被删除，原来的第3行上移，但实际表现是，当前行删除，地点列数据仍然是第2行数据；

就表现来看，发现地点列、时间列有问题，类型列(单程、往返)却正确，出题一定处在地点和时间列上了，这两列扩展自Uxcore.Table.CellField;

需求梳理

• 结构

以地点列CellPlaceSelect的UI交互，单元格容易包含三个字元素:起点下拉框、分割线、终点下拉框

<div>
<select2 />
<span> - </span>
<select2 />
</div>

• 值来源和传递

table组件是将数据源对应的字段与列绑定，因此值来源于单元格传入，在重写render或者renderContent方法中(更应该重写renderContent)，使用this.props.value获取到列上数据；
值传递对象使用字符串，比如 ‘杭州 - 北京’

理解此处是重点

错误原因

• 删除构造中的state

//错误的

    constructor(props) {
        super(props);

        let value = props.value;
        if (typeof value == 'undefined') {
            value = ['', ' - ', ''];
        }

        this.state = {
            value: value,
            from: [],
            to: []
        };
    }

//正确的，什么都不要做

     constructor(props) {
        super(props);
    }

• 值传递问题，自定义 CellPlaceSelect 组件，在构造函数中使用了父组件值，并且将数据维护在state中，对后期视图的更新，数据是无法响应;因此删除一切state
• select 的value和select的onChange事件，不更新state，不从state获取数据

// 错误的

let me = this;
........

        let fieldProps1 = {
            onChange: (value) => {
                me.setState({
                    value:[value,' - ',me.state.value[2]]
                });
                me.handleDataChange({
                    jsxid: me.props.rowData['jsxid'],
                    column: me.props.column,
                    value: [value,' - ',me.state.value[2]]
                });

            },
            value: me.state.value[0],
            key : 'place1',
            filterOption: false,
            notFoundContent: i18n('select.notFoundContent.placeholder'),
            onSearch:(data)=>{
                me.fetchData({keyword:data,limit:10},'from');
            }
        }

// 正确的

        let fieldProps1 = {
            onChange: (result) => {
                me.handleDataChange({
                    jsxid: me.props.rowData['jsxid'],
                    column: me.props.column,
                    value: result + splitStr + (value[1] || ""),
                    text: result + splitStr + (value[1] || "") 
                });

            },
            value: value[0],
            key : 'place1',
            filterOption: false,
            notFoundContent: i18n('select.notFoundContent.placeholder'),
            onSearch:(data)=>{
                me.fetchData({keyword:data,limit:10},'from');
            }
        };

不正确的全部代码

/* 
* table 单元格金额控制
* @Author: Y
* @Date:   2015-08-28 13:24:25
* @Last Modified by:   caoke
* @Last Modified time: 2015-11-26 22:43:24
*/

require('./CellPlaceSelect.less');

let {
    Table,
    Calendar,
    Select2: Select
} = Uxcore;

let Option = Select.Option;

let CellField = Table.CellField;;
let classnames = require('classnames');
let assign = require('object-assign');
let i18n = require('i18n');
let helpers = require('../../components/common.helpers');
/**
 * 继承CellField 扩展单元格
 */
class CellPlaceSelect extends CellField {

    constructor(props) {
        super(props);

        let value = props.value;
        if (typeof value == 'undefined') {
            value = ['', ' - ', ''];
        }

        this.state = {
            value: value,
            from: [],
            to: []
        };
    }

    /**
     * 查询地点数据
     * @param  {[type]} data [请求数据]
     * @param  {[type]} kind [查询类别，起点、终点]
     * @return {[type]}      [description]
     */
    fetchData(data, kind) {
        let me = this;
        $.ajax({
            url: helpers.prefix + 'travel/searchTravelSite.jsonp',
            dataType: 'jsonp',
            data: data,
            success: function(result) {
                if (!result.hasError) {
                    if (kind == 'from') {
                        me.setState({
                            from: result.content
                        });
                    } else {
                        me.setState({
                            to: result.content
                        });
                    }

                } else {
                    console.error("responce data don't have sucess")
                }
            }
        });
    }

    render() {
        let me = this;
        //起点配置
        let fieldProps1 = {
            onChange: (value) => {
                me.setState({
                    value:[value,' - ',me.state.value[2]]
                });
                me.handleDataChange({
                    jsxid: me.props.rowData['jsxid'],
                    column: me.props.column,
                    value: [value,' - ',me.state.value[2]]
                });

            },
            value: me.state.value[0],
            key : 'place1',
            filterOption: false,
            notFoundContent: i18n('select.notFoundContent.placeholder'),
            onSearch:(data)=>{
                me.fetchData({keyword:data,limit:10},'from');
            }
        };

        // 终点配置
        let fieldProps2 = {
            onChange: (value) => {

                me.setState({
                    value: [me.state.value[0],' - ',value]
                });
                me.handleDataChange({
                    jsxid: me.props.rowData['jsxid'],
                    column: me.props.column,
                    value: [me.state.value[0],' - ',value]
                });

            },
            value: me.state.value[2],
            key : 'place2',
            filterOption: false,
            notFoundContent: i18n('select.notFoundContent.placeholder'),
            onSearch:(data)=>{
                me.fetchData({keyword:data,limit:10},'to');
            }
        }

        let arr = [];
        arr.push(
            <div className='city-continer'>
                <Select {...fieldProps1}>
                    {me.state.from.map(function(item,index){

                        return(
                                <Option key={item.siteName}>
                                    <span>{item.siteName}</span>
                                </Option>

                            );

                        })
                    }
                </Select>
            </div>
        );

        arr.push(<span key="split" className="kuma-uxform-split">-</span>);

        arr.push(
            <div className='city-continer'>
                <Select {...fieldProps2}>
                    {me.state.to.map(function(item,index){

                        return(
                                <Option key={item.siteName}>
                                    <span>{item.siteName}</span>
                                </Option>

                            );

                        })
                    }
                </Select>
            </div>
        );

        return (<div className='place-div'>{arr}</div>);
    }

}

CellPlaceSelect.propTypes = assign({}, CellField.propTypes);
CellPlaceSelect.defaultProps = assign({}, CellField.defaultProps);

module.exports = CellPlaceSelect;

正确的全部代码

/* 
* table 单元格金额控制
* @Author: Y
* @Date:   2015-08-28 13:24:25
* @Last Modified by:   caoke
* @Last Modified time: 2015-11-26 22:43:24
*/

require('./CellPlaceSelect.less');

let {
    Table,
    Select2: Select
} = Uxcore;

let Option = Select.Option;

let CellField = Table.CellField;;
let classnames = require('classnames');
let assign = require('object-assign');
let i18n = require('i18n');
let helpers = require('../../components/common.helpers');
// 分隔字符串
let splitStr = ' - ';
/**
 * 继承CellField 扩展单元格
 */
class CellPlaceSelect extends CellField {

    constructor(props) {
        super(props);
    }

    /**
     * 查询地点数据
     * @param  {[type]} data [请求数据]
     * @param  {[type]} kind [查询类别，起点、终点]
     * @return {[type]}      [description]
     */
    fetchData(data, kind) {
        let me = this;
        $.ajax({
            url: helpers.prefix + 'travel/searchTravelSite.jsonp',
            dataType: 'jsonp',
            data: data,
            success: function(result) {
                if (!result.hasError) {
                    if (kind == 'from') {
                        me.setState({
                            from: result.content
                        });
                    } else {
                        me.setState({
                            to: result.content
                        });
                    }

                } else {
                    console.error("responce data don't have sucess")
                }
            }
        });
    }

    renderContent() {
        let me = this;
        let {value} = me.props;
        value = value ? value.split(splitStr): [];
        //起点配置
        let fieldProps1 = {
            onChange: (result) => {
                me.handleDataChange({
                    jsxid: me.props.rowData['jsxid'],
                    column: me.props.column,
                    value: result + splitStr + (value[1] || ""),
                    text: result + splitStr + (value[1] || "") 
                });

            },
            value: value[0],
            key : 'place1',
            filterOption: false,
            notFoundContent: i18n('select.notFoundContent.placeholder'),
            onSearch:(data)=>{
                me.fetchData({keyword:data,limit:10},'from');
            }
        };

        // 终点配置
        let fieldProps2 = {
            onChange: (result) => {
                me.handleDataChange({
                    jsxid: me.props.rowData['jsxid'],
                    column: me.props.column,
                    value: (value[0] || "") + splitStr + result,
                    text: (value[0] || "") + splitStr + result
                });

            },
            value: value[1],
            key : 'place2',
            filterOption: false,
            notFoundContent: i18n('select.notFoundContent.placeholder'),
            onSearch:(data)=>{
                me.fetchData({keyword:data,limit:10},'to');
            }
        }

        let arr = [];
        arr.push(
            <div className='city-continer' key="cityFrom">
                <Select {...fieldProps1}>
                    {me.state.from && me.state.from.map(function(item,index){

                        return(
                                <Option key={item.siteName}>
                                    <span>{item.siteName}</span>
                                </Option>

                            );

                        })
                    }
                </Select>
            </div>
        );

        arr.push(<span key="split" className="kuma-uxform-split">-</span>);

        arr.push(
            <div className='city-continer' key="cityTo">
                <Select {...fieldProps2}>
                    {me.state.to && me.state.to.map(function(item,index){

                        return(
                                <Option key={item.siteName}>
                                    <span>{item.siteName}</span>
                                </Option>

                            );

                        })
                    }
                </Select>
            </div>
        );

        return (<div className='place-div'>{arr}</div>);
    }

}

CellPlaceSelect.propTypes = assign({}, CellField.propTypes);
CellPlaceSelect.defaultProps = assign({}, CellField.defaultProps);

module.exports = CellPlaceSelect;