在表格中内联编辑

时间:2016-08-18 09:55:24

标签: javascript jquery reactjs

我有2个表格,我可以在其中添加和删除元素..元素有2个日期和1个数字字段..所以你可以给出一个简单的方法,使它们可以内联编辑,但它们不仅是文本或当我点击日期它需要我显示自定义日期选择器...但我需要编辑只有一个日期或数字我不想编辑所有行当我双击它..只是那个字段什么我点击了。谢谢:)顺便说一句,这是所有反应指令。 我需要类似的东西

 render: function () {
        var itemMap = this.state.items.map(function (item, i) {
            return (
                <tr key={i}>
                    <td><input type="checkbox" checked={item.selected} onClick={this.handleChange.bind(this,i)} /></td>
This i want to change with inline edit ->  <td ><FormattedDate value={item.startDate}/></td>
This i want to change with inline edit ->  <td><FormattedDate value={item.endDate}/></td>
This i want to change with inline edit ->  <td>{item.workInHours}</td>
                    <td><label type="button" onClick={this.handleShowModal.bind(this,i)}><img height="30px" src="moliv.jpg"/></label>
                    </td>
                </tr>
            );

        }.bind(this));
        return (
            <div>
                <button className="btn btn-primary center-block" onClick={this.addElem}>Add</button>
                {this.state.list.theList.length > 0 ?  <button className="btn btn-primary" onClick={this.putResult}>Put result</button> :null}
                <table className="table scroll2">
                    <thead>
                    <tr className="danger">
                        <th><input  type="checkbox" checked={this.state.allChecked} onClick={this.toggleAll}/></th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Hours</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    {itemMap}

                    </tbody>

                </table>
                {this.state.items.length > 0 ? <button  type="button" className="btn btn-danger" onClick={this.deleteItems}>Remove</button> : null}
                <Modal parentState={this.state} modalPropsId={this.props.theProps.id} handleHideModal={this.handleHideModal}/>
            </div>
        );

0 个答案:

没有答案