table表单的修改和保存

最近在修改展示文件信息和用户信息的表单，需求是能够点击按钮来修改，同时不影响数据的展示。

最开始，我直接将可以修改的部分直接存放到输入框中，简单粗暴，可是非常影响美观，并且有严重的修改逻辑，因为采用的是react框架，并不能用id直接绑定input的节点来获取value，所以每一个可修改的节点都有一个onchange的方法来修改，但是最后的保存按钮并不能控制一整行修改的内容。

因此需要对当前的修改结果进行暂存。此时，当前模块的state中有三项数据：

this.state = {result: [],changeLine: [],temp: []}

点input框onblur或者下拉数据框onchange的时候，就会调用modify方法来更改数据并存入temp：

modify(index, type, value) {console.log(index, type, value);let _temp = JSON.parse(JSON.stringify(this.state.temp));_temp[index][type] = value;// console.log(_temp[index])this.setState({temp: _temp})}

上面参数：index为该条数据的key值，也就是数据的第几项，type指的是修改数据的项名，value指的是修改后的值。在每一项修改之后都将这些数据保存到temp暂存，点击下一个框修改的时候便在暂存的基础上修改。现在就有个问题，如果我不想修改了怎么办？

在这里，我将对输入框的内容进行判断，如果为空，那么就使用原来的数据作为value值：

<Input type='text' size='small' style={{ width: '100px' }} placeholder={val} onBlur={
(e)=>{
let v = e.target.value.trim()==''?e.target.placeholder:e.target.value;
this.modify(line.key,'username',v)}
}/>

这样，就可以完美解决如果不想修改数据但是已经改过一次的问题，只要在点击保存按钮之前都是可以撤销修改的。

同时，我又加上了修改按钮，刚获取到数据时候，是没有修改框的，需要点击右侧的修改按钮才能出现修改框：

修改之后点击保存按钮就行提交到最后的result中。

上面需求的实现需要一个changeLine的state来存放某一行是否在修改状态，如果在修改状态，就显示输入框和下拉框可进行修改，点击保存可以将修改数据提交。

changeState(key) {let line = this.state.changeLine;if (line[key]) {//保存修改line[key] = false;this.setState({result: this.state.temp})} else {line[key] = true;}this.setState({changeLine: line})}

如果changeLine的state为true则保存修改，如果为false则将其状态更改为修改状态。

最后是整个页面的代码：

import { Table, Icon, Divider, Select, Input } from 'antd';
const Option = Select.Option;
import React from 'react';
import config from '../common/config.jsx';export default class UserTable extends React.Component {constructor(props) {super(props);this.state = {result: [],changeLine: [],temp: []}}componentDidMount() {const data = [{key: '0',userid: 121,username: 'John Brown',nickname: 'John Brown',download: 32,upnum: 32,state: 1,xname: 32,mname: 32,uptime: 32,origion: 32,}, {key: '1',userid: 121,username: 'John Brown',nickname: 'John Brown',download: 32,upnum: 32,state: 1,xname: 32,mname: 32,uptime: 32,origion: 32,}, {key: '2',userid: 121,username: 'John Brown',nickname: 'John Brown',download: 32,upnum: 32,state: 1,xname: 32,mname: 32,uptime: 32,origion: 32,}, {key: '3',userid: 121,username: 'John Brown',nickname: 'John Brown',download: 32,upnum: 32,state: 1,xname: 32,mname: 32,uptime: 32,origion: 32,}, {key: '4',userid: 121,username: 'John Brown',nickname: 'John Brown',download: 32,upnum: 32,state: 1,xname: 32,mname: 32,uptime: 32,origion: 32,}];this.setState({result: data,changeLine: new Array(data.length).fill(false),temp: data})}changeState(key) {let line = this.state.changeLine;if (line[key]) {//保存修改line[key] = false;this.setState({result: this.state.temp})} else {line[key] = true;}this.setState({changeLine: line})}modify(index, type, value) {console.log(index, type, value);let _temp = JSON.parse(JSON.stringify(this.state.temp));_temp[index][type] = value;// console.log(_temp[index])this.setState({temp: _temp})}render() {const columns = [{title: '用户id',dataIndex: 'userid',key: 'userid',}, {title: '用户名',dataIndex: 'username',key: 'username',render: (val,line) => {return this.state.changeLine[line.key]?(<Input type='text' size='small' style={{ width: '100px' }} placeholder={val} onBlur={(e)=>{let v = e.target.value.trim()==''?e.target.placeholder:e.target.value;this.modify(line.key,'username',v)}}/>):(val)}}, {title: '用户昵称',dataIndex: 'nickname',key: 'nickname',render: (val,line) => {return this.state.changeLine[line.key]?(<Input type='text' size='small' style={{ width: '100px' }} placeholder={val} onBlur={(e)=>{let v = e.target.value.trim()==''?e.target.placeholder:e.target.value;this.modify(line.key,'nickname',v)}}/>):(val)}}, {title: '学院',dataIndex: 'xname',key: 'xname',render: (val,line) => {return this.state.changeLine[line.key]?(<Input type='text' size='small' style={{ width: '50px' }} placeholder={val} onBlur={(e)=>{let v = e.target.value.trim()==''?e.target.placeholder:e.target.value;this.modify(line.key,'xname',v)}}/>):(val)}}, {title: '专业',dataIndex: 'mname',key: 'mname',render: (val,line) => {return this.state.changeLine[line.key]?(<Input type='text' size='small' style={{ width: '50px' }} placeholder={val} onBlur={(e)=>{let v = e.target.value.trim()==''?e.target.placeholder:e.target.value;this.modify(line.key,'mname',v)}}/>):(val)}}, {title: '上传资源数',dataIndex: 'upnum',key: 'upnum',}, {title: '下载资源数',dataIndex: 'download',key: 'download',}, {title: '用户状态',dataIndex: 'state',key: 'state',render: (text,line) => {//0 正常 ；1 封禁return this.state.changeLine[line.key]?(<Select defaultValue={text.toString()} style={{ width: 120 }} onChange={(value)=>{this.modify(line.key,'state',value)}}><Option value="1">封禁</Option><Option value="0">正常</Option></Select>):(config.fstate[text])}}, {title: '操作',key: 'action',render: (text, record) => (<span>{this.state.changeLine[record.key]?<a href='javascript:;' onClick={()=>this.changeState(record.key)}><Icon type="save" /></a>:<a href='javascript:;' onClick={()=>this.changeState(record.key)}><Icon type="tool" /></a>}<Divider type="vertical" /><a href="javascript:;" className="ant-dropdown-link"><Icon type="close-circle-o" /></a></span>),}];return (<div><Table columns={columns} dataSource={this.state.result} pagination={{ pageSize: 6 }} /></div>)}
}

table表单的修改和保存相关推荐

Antd Vue 组件库之Table表单
Antd Vue 组件库之Table表单 Table 表格展示行列数据. 何时使用当有大量结构化的数据需要展现时: 当需要对数据进行排序.搜索.分页.自定义操作等复杂行为时. 如何使用指定表格的 ...
利用form表单上传图片，图片保存到本地，得到图片名字（后期可以将图片名字存进数据库）
利用form表单上传图片,图片保存到本地,得到图片名字(后期可以将图片名字存进数据库) html部分:enctype="multipart/form-data" 一定要加! < ...
HTML table表单colspan和rowspan行列使用方法
HTML中的table表单元素colspan和rowspan表示表格跨行或者跨列,colspan和rowspan用于将行或者列合并,码笔记分享 table表单colspan和rowspan详细用法: ...
laui框架表单大小修改两个属性改变表格提示框（layui-form-label）的大小
laui框架表单大小修改两个属性改变表格提示框(layui-form-label)的大小 (1)直接在html界面上的head中修改表格的属性就好了(2)(3)是layui框架的属性查找的方法 < ...
框架生成的HTML修改,Django框架form表单验证修改html标签的样式
经过前面的学习,我们大致可以知道CharField.EmailField等等以Field结尾的方法,只能帮助我们对用户发来的信息做验证,不能生成html标签.字段本身自己虽然只做验证,但是我们可以通过 ...
查看ie保存的表单_解决浏览器保存密码自动填充问题
解决浏览器保存密码自动填充问题问题描述话说有一天,我如往常一样打开我的开发网站进行登录操作.浏览器很平常的在我们进行登录操作之后询问我是否需要记住密码,懒惰如我点击了记住密码.一切都很正常的进行着 ...
Python+django网页设计入门（13）：表单、修改密码
前导课程: Python+django网页设计入门(12):使用Bootstrap和jQuery Python+django网页设计入门(11):在线考试与自动评分 Python+django网页设计 ...
序列化table表单
对序列化表单稍微做一个小结.序列化表单值的结果是输出以数组形式.serializeArray() 方法通过序列化表单值来创建对象数组(名称和值),返回 JSON 数据结构数据.此方法返回的是 JSON ...
flask-wtf表单验证--修改邮箱密码
一.介绍使用Flask-wtf可以很方便用户进行对应字段的验证,即验证过程自动化,使用主要包含三个步骤: 创建 Flask-wtf 表单,设置相关的属性和验证条件在前端利用form直接显示对应 ...
php table表单下载,GitHub - Zerolone/auto: 用php生成表格、表单 phh create form table
auto form 用php生成表格.表单 php create form grid 想要实现的效果通过php生成html表单表格 info use php to create form grid ...

table表单的修改和保存

table表单的修改和保存相关推荐

最新文章

热门文章