本人小白一名，第一次学习react ,该资料为本人原创，采用的是react+ant design的Tabled的一个小demo,暂时只实现了增加，删除单行，多行删除有Bug,查看详情，呕心沥血耗时一周完成，禁止抄袭，转载请先留言，
1、main.jsx
import React from 'react'; import ReactDom from 'react-dom'; import ExampleTable from './ExampleTable.jsx' ReactDom.render(, document.getElementById('AppRoot') );
2、ExampleTable.jsx, 注：记住引入antd.css， 否则Table组件无法正常显示。
import React from 'react';
import { Table,Button,Input,Icon,Popconfirm,Alert } from 'antd';
import AddUser from './AddUser.jsx'
import UserDetails from './UserDetails.jsx'
class ExampleTable extends React.Component {
constructor(props) {// 构造函数
super(props);
this.state = {
dataSource:[
{ key: 1, nid:1, name: 'tab', gender:'男' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'},
{ key: 2, nid:2, name: 'shift', gender:'男' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'},
{ key: 6, nid:6, name: 'ctrl', gender:'男' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'},
{ key: 4, nid:4, name: 'caps lock', gender:'男' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'},
{ key: 5, nid:5, name: 'enter', gender:'女' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'}
],
index : '',
PersonCount :0,
selectedRowKeys:[],
selectedRows:[],
record : 'abc'
};
this.OnDelete= this.onDelete.bind(this);//绑定this,声明该方法需要绑定this, 直接在onClick中调用
this.appendPerson = this.appendPerson.bind(this);
this.handleSelectedDelete = this.handleSelectedDelete.bind(this);
this.columns = [
{ title: '编号', dataIndex: 'nid', key: 'nid' ,width:'8%'},
{ title: '姓名', dataIndex: 'name', key: 'name' ,width:'15%'},
{ title: '性别', dataIndex: 'gender', key: 'gender' ,width:'10%'},
{ title: '年龄', dataIndex: 'age', key: 'age',width:'15%', },//render: (text, record, index) => (Math.floor(record.age/10))*10+"多岁"},
{ title: '学校', dataIndex: 'schoolname', key: 'schoolname',width:'15%' },
{ title: '在校表现', dataIndex: 'description', key: 'description' ,width:'20%'},
{ title: '操作', dataIndex: '', key: 'operation', width:'32%',render: (text,record,index)=>(
) },
];
}
appendPerson(event){//得到子元素传过来的值
let array = [];
let count = 0;
this.state.dataSource.forEach(function (element) {
Object.keys(element).some(function (key) {
if (key === 'nid') {
count++;
array[count] = element.nid
}
})
})
let sortData =array.sort();//对遍历得到的数组进行排序
let MaxData = sortData[(this.state.dataSource.length)-1]//取最后一位下标的值
event.key=MaxData+1;
event.nid = MaxData+1;
this.setState({
dataSource:[...this.state.dataSource,event]
})
}
onDelete(index){
console.log(index)
const dataSource = [...this.state.dataSource];
dataSource.splice(index, 1);//index为获取的索引，后面的 1 是删除几行
this.setState({ dataSource });
}
handleSelectedDelete(){
if(this.state.selectedRowKeys.length>0){
console.log(...this.state.selectedRowKeys)
const dataSource = [...this.state.dataSource]
dataSource.splice(this.state.selectedRows,this.state.selectedRows.length)
this.setState({ dataSource });
}
else{
}
}
render() {
//联动选择框
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
this.setState({//将选中的id和对象存入state
selectedRowKeys:selectedRowKeys,
selectedRows:selectedRows
})
console.log(selectedRows,selectedRowKeys)
},
onSelect: (record, selected, selectedRows) => {
//console.log( record, ` selected :${selected}`,`selectedRows:${selectedRows}`);
},
onSelectAll: (selected, selectedRows, changeRows) => {
//console.log(selected, selectedRows, changeRows);
},
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User', // Column configuration not to be checked
}),
}
return (
);
}
}
module.exports = ExampleTable;
3、AddUser.jsx
import React from 'react';
import {Form,Input,Button,Select,Modal} from 'antd'
const FormItem = Form.Item;
const Option = Select.Option;
class AddUser extends React.Component{//在es6中定义一个AddUser类
constructor(props){//构造函数
super(props);
this.state = {
visible:false
};
this.handleAdd = this.handleAdd.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleOk = this.handleOk.bind(this)
this.handleClear = this.handleClear.bind(this)
}
handleAdd() {
this.setState({
visible: true
});
}
handleSubmit(e){//提交表单
e.preventDefault();
this.props.form.validateFieldsAndScroll((err,values)=>{
if(!err){
//console.log('接收的值：',values);
this.setState({
visible:false
})
this.props.form.resetFields();//清空提交的表单
//当值传递到父元素后，通过回调函数触发appendPerson方法将参数values带到父元素
this.props.callback(values);
}
})
}
handleClear(){
this.props.form.resetFields();
}
handleOk() {
this.setState({
visible: false
});
}
render(){
const {getFieldDecorator} = this.props.form;
const formItemLayout = {
labelCol:{span : 6},
wrapperCol:{span: 14}
};
const tailFormItemLayout = {
wrapperCol: {
span: 14,
offset: 8
}
};
return(
{getFieldDecorator('name', {
rules:[{
required:true,message:'请输入您的 name！'
}]
})(
)}
{getFieldDecorator('gender',{
rules:[{
required:true,message:'请输入您的 gender！'
}]
})(
)}
{getFieldDecorator('age',{
rules:[{required:true,message:'请选择您的 Age'
}]
})(
)}
{getFieldDecorator('schoolname',{
rules:[{required:true,message:'请输入您的就读学校'}]
})(
)}
{getFieldDecorator('description',{
rules:[{required:true,message:'请输入您的在校表现'}]
})(
)}
)
}
}
AddUser = Form.create()(AddUser); //解决了getFieldDecorator无法定义;
export default AddUser;
4、UserDetails.jsx
import React from 'react'
import {Modal,Button} from 'antd'
/*
*/
class UserDetails extends React.Component{
constructor(props){
super(props);
this.state={
visible:false
}
this.handlePopup = this.handlePopup.bind(this);
this.handleOkOrCancel = this.handleOkOrCancel.bind(this);
}
handlePopup() {
this.setState({
visible: true
});
}
handleOkOrCancel(){
this.setState({
visible: false
});
}
render(){
return(
详情
姓名： {this.props.pass.name}
性别： {this.props.pass.gender}
年龄： {this.props.pass.age}
就读学校： {this.props.pass.schoolname}
在校表现： {this.props.pass.description}
)
}
}
export default UserDetails;
5、ExampleStyle.css
#div-right{
width:80%;
height:400px;
text-Align:center;
margin: 0 auto;
}
.div_body{
margin-top: 0.5%;
}
.table_oftop{
padding: 10px;
}
.selectedDelete{
float: left;
margin-left: 35%;
}
.add_user_btn{
margin-left: auto;
}
.user_details{
float: right;
}
ant design 官网地址：https://ant.design/components/table-cn/ 看不懂的可以参考官方示例。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
写下你的评论吧 !
推荐阅读
-
技术日志：使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告 ...
[详细]
蜡笔小新 2024-11-07 14:33:19
-
资源管理器的基础架构包括三个核心组件：1）资源池，用于将CPU和内存等资源分配给不同的容器；2）负载组，负责承载任务并将其分配到相应的资源池；3）分类函数，用于将不同的会话映射到合适的负载组。该系统提供了两种主要的资源管理策略。 ...
[详细]
蜡笔小新 2024-11-07 20:38:24
-
-
WebStorm 是一款强大的集成开发环境，支持多种现代 Web 开发技术，包括 Node.js、CoffeeScript、TypeScript、Dart、Jade、Sass、LESS 和 Stylus。它为开发者提供了丰富的功能和工具，帮助高效构建和调试复杂的 Node.js 应用程序。 ...
[详细]
蜡笔小新 2024-11-07 19:58:31
-
在特定场景下，如何实现在常数时间复杂度内高效删除单向链表中的指定节点是一个值得探讨的问题。本文详细分析了给定单向链表的头指针和目标节点指针的情况下，如何设计一个高效的算法，在O(1)时间内完成节点的删除操作。通过巧妙地调整节点之间的连接关系，该方法不仅提高了删除操作的时间效率，还确保了链表结构的完整性。此外，文章还讨论了该方法在实际应用中的优缺点及适用场景。 ...
[详细]
蜡笔小新 2024-11-07 19:32:18
-
本文全面解析了JavaScript中的DOM操作，并提供了详细的实践指南。DOM节点（Node）通常代表一个标签、文本或HTML属性，每个节点都具有一个nodeType属性，用于标识其类型。文章深入探讨了DOM节点的创建、查询、修改和删除等操作，结合实际案例，帮助读者更好地理解和掌握DOM编程技术。 ...
[详细]
蜡笔小新 2024-11-07 19:20:50
-
在Web前端开发中，HTML教程和CSS3的结合使得网页设计更加多样化。长期以来，Web设计师受限于“web-safe”字体的选择。然而，CSS3中的`@font-face`规则允许从服务器端加载自定义字体，极大地丰富了网页的视觉效果。通过这一技术，设计师可以自由选择和使用各种字体，提升用户体验和页面美观度。本文将深入解析`@font-face`的实现原理，并提供实际应用案例，帮助开发者更好地掌握这一强大工具。 ...
[详细]
蜡笔小新 2024-11-07 19:12:26
-
在本文中，我们将深入探讨 AngularJS 的指令模型，特别是 `ng-model` 指令。`ng-model` 指令用于将 HTML 元素与应用程序数据进行双向绑定，支持多种数据类型验证，如数字、电子邮件地址和必填项检查。此外，我们还将介绍如何利用该指令优化表单验证和数据处理流程，提升开发效率和用户体验。 ...
[详细]
蜡笔小新 2024-11-07 18:51:13
-
本文深入解析了Java面向对象编程的核心概念及其应用，重点探讨了面向对象的三大特性：封装、继承和多态。封装确保了数据的安全性和代码的可维护性；继承支持代码的重用和扩展；多态则增强了程序的灵活性和可扩展性。通过具体示例，文章详细阐述了这些特性在实际开发中的应用和优势。 ...
[详细]
蜡笔小新 2024-11-07 17:53:00
-
本文探讨了利用Matlab平台实现同步定位与建图（SLAM）技术的研究。通过详细分析算法原理和实验验证，展示了Matlab在SLAM应用中的强大功能和灵活性。研究结果表明，Matlab不仅能够高效处理复杂的SLAM任务，还能为研究人员提供便捷的开发环境，加速算法的测试与优化。 ...
[详细]
蜡笔小新 2024-11-07 17:50:26
-
`chkconfig` 命令主要用于管理和查询系统服务在不同运行级别中的启动状态。该命令不仅能够更新服务的启动配置，还能检查特定服务的当前状态。通过 `chkconfig`，管理员可以轻松地控制服务在系统启动时的行为，确保关键服务正常运行，同时禁用不必要的服务以提高系统性能和安全性。本文将详细介绍 `chkconfig` 的各项参数及其使用方法，帮助读者更好地理解和应用这一强大的系统管理工具。 ...
[详细]
蜡笔小新 2024-11-07 17:20:54
-
Windows环境下RabbitMQ安装详尽指南 ...
[详细]
蜡笔小新 2024-11-07 17:17:09
-
Java 5 引入了 Executor 框架，为开发人员提供了一种高效管理和构建线程池的方法。该框架通过将任务提交与任务执行分离，简化了多线程编程的复杂性。利用 Executor 框架，开发人员可以更灵活地控制线程的创建、分配和管理，从而提高服务器端应用的性能和响应能力。此外，该框架还提供了多种线程池实现，如固定线程池、缓存线程池和单线程池，以适应不同的应用场景和需求。 ...
[详细]
蜡笔小新 2024-11-07 17:05:32
-
在探讨Hibernate框架的高级特性时，缓存机制和懒加载策略是提升数据操作效率的关键要素。缓存策略能够显著减少数据库访问次数，从而提高应用性能，特别是在处理频繁访问的数据时。Hibernate提供了多层次的缓存支持，包括一级缓存和二级缓存，以满足不同场景下的需求。懒加载策略则通过按需加载关联对象，进一步优化了资源利用和响应时间。本文将深入分析这些机制的实现原理及其最佳实践。 ...
[详细]
蜡笔小新 2024-11-07 16:19:28
-
今天已经下载了 Visual Studio 2005 Beta 2 标准版，目前正在尝试安装，但似乎遇到了一些问题，安装未能成功。将进一步排查原因。该版本支持 .NET Framework 2.0.41202。 ...
[详细]
蜡笔小新 2024-11-07 15:58:37
-
![如何使用Python去除字符串中的非中文字符[Python编程技巧]](https://img1.php1.cn/3cd4a/24e5b/1c8/d2ce84b337d59f06.jpeg)
在 Python 中，可以通过正则表达式来实现去除字符串中的非中文字符。具体方法是使用 `re` 模块中的 `re.sub()` 函数，配合正则表达式 `[^u4e00-u9fa5]` 来匹配并替换掉所有非中文字符，从而保留字符串中的中文部分。这种方法简洁高效，适用于多种文本处理场景。 ...
[详细]
蜡笔小新 2024-11-07 15:30:50
-
手机用户2502904705
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
-
103-谷歌浏览器安装Sence
-
22018支付宝集五福最全攻略：福字/五福到手势/金蛋福卡
-
3我做了一个很长的梦
-
4oracle 并行 拆 分,goldengate ogg 常用调优方法 – 并行处理与进程拆分
-
5Linux c 共享内存
-
6情况不同
-
7NOIP提高组 2011
-
8kubernetes 下实现socket.io 的集群模式
-
9波卡在 ETHDenver 2023
-
10中国移动咪咕燃爆ChinaJoy，5G云游戏领衔全场景沉浸体验生态
-
11java.nio.file.attribute.BasicFileAttributes.size()方法的使用及代码示例
-
12R开发：协调过滤推荐
-
13微博故事怎么分享自己的故事？微博故事怎么参与？
-
14linux下忘记mysql root密码
-
15[Linux]vi
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有