react+ant design實現Table的增、刪、改
本人小白一名,第一次學習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( <ExampleTable/>, 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)=>( <span> <Popconfirm title="刪除不可恢復,你確定要刪除嗎?" > <a title="使用者刪除" className="mgl10"onClick={this.onDelete.bind(this,index)}> <Icon type="delete"/></a> </Popconfirm> <span className="ant-divider"/> <UserDetails className="user_details" pass={record}/> </span> ) }, ]; } 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 ( <div className="div_body"> <div id="div_left"></div> <div id="div-right"> <div className="table_oftop"> <Button type="primary" icon="search" style={{float:"right",marginLeft:10}}>查詢</Button> <Input placeholder="input search text" style ={{width:300,float:"right"}}/> <div id="add_delete"> <Button type="primary" className="selectedDelete" onClick={this.handleSelectedDelete}>刪除所選</Button> <AddUser className="add_user_btn" callback={this.appendPerson}/> </div> </div> <Table columns={this.columns} dataSource={this.state.dataSource} className="table" rowSelection={rowSelection} scroll ={{y:400}}/> </div> </div> ); } } 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( <div> <Button type="primary" onClick={this.handleAdd}>新增使用者</Button> <Modal title="新建使用者" visible={this.state.visible} onCancel={this.handleOk} onOk={this.handleOk}> <Form onSubmit={this.handleSubmit}> <FormItem {...formItemLayout} label = "使用者名稱" hasFeedback> {getFieldDecorator('name', { rules:[{ required:true,message:'請輸入您的 name!' }] })( <Input placeholder="請輸入您的使用者名稱!"/> )} </FormItem> <FormItem {...formItemLayout} label="性別" hasFeedback> {getFieldDecorator('gender',{ rules:[{ required:true,message:'請輸入您的 gender!' }] })( <Select placeholder="請選擇您的性別"> <Option value="男">男</Option> <Option value="女">女</Option> </Select> )} </FormItem> <FormItem {...formItemLayout} label="年齡" hasFeedback> {getFieldDecorator('age',{ rules:[{required:true,message:'請選擇您的 Age' }] })( <Select placeholder="請選擇你您的年齡"> <Option value="26">26</Option> <Option value="27">27</Option> <Option value="28">28</Option> </Select> )} </FormItem> <FormItem {...formItemLayout} label="就讀學校" hasFeedback> {getFieldDecorator('schoolname',{ rules:[{required:true,message:'請輸入您的就讀學校'}] })( <Input placeholder="請輸入您的就讀學校!"/> )} </FormItem> <FormItem {...formItemLayout} label="在校表現" hasFeedback> {getFieldDecorator('description',{ rules:[{required:true,message:'請輸入您的在校表現'}] })( <Input type="textarea" rows={3} placeholder="請輸入您的在校表現!"/> )} </FormItem> <FormItem {...tailFormItemLayout} style={{padding:10}}> <Button type="primary" htmlType="submit" size="large">提交</Button> <Button type="primary" size="large" onClick={this.handleClear}>重置</Button> </FormItem> </Form> </Modal> </div> ) } } 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(
<div>
<a onClick={this.handlePopup}>詳情</a>
<Modal title={this.props.pass.name} visible={this.state.visible}
onOk= {this.handleOkOrCancel} onCancel={this.handleOkOrCancel}>
<p>姓名: {this.props.pass.name}</p>
<p>性別: {this.props.pass.gender}</p>
<p>年齡: {this.props.pass.age}</p>
<p>就讀學校: {this.props.pass.schoolname}</p>
<p>在校表現: {this.props.pass.description}</p>
</Modal>
</div>
)
}
}
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/ 看不懂的可以參考官方示例。
相關推薦
react+ant design實現Table的增、刪、改
本人小白一名,第一次學習react ,該資料為本人原創,採用的是react+ant design的Tabled的一個小demo,暫時只實現了增加,刪除單行,多行刪除有Bug,檢視詳情,嘔心瀝血耗時一週完成,禁止抄襲,轉載請先留言, 1、main.jsx import Re
PHP、MYSQLI實現簡單的增、刪、改、查功能(初學者)
php mysqli <title>index.php</title> <?php #連接數據庫 $conn = mysqli_connect("localhost","root","");
shell實現對mysql數據庫的增、刪、改、查操作
shell實現對mysql的增、刪、改、shell實現對mysql數據庫的增、刪、改、查操作 #!/bin/bash #數據庫信息 HOSTNAME="192.168.111.84" PORT="3306" USERNAM
ant design 的table元件實現全選功能
需求:ant design 的table元件中,點選表頭的選擇框可以實現全選的效果,但有時根據業務需求,需要在表格外面新增一個選擇框,點選實現全選的效果,如圖所示。 實現方法: 1、新增一個checkbox 2、 在table元件中新增 rowSelection
Django+MySQL:同步已存在的表 實現增、刪、改、查
一、建立連線開啟專案settings.py,找到DATABASES字典。default預設使用的是sqlplite3,修改驅動為mysql。mysql預設埠號是3306,可通過命令檢視。name是要匯入的資料庫名稱mysql> show global variables
qt之mysql增、刪、改、查、基本操作--------實現一個註冊登陸功能。
專案描述:實現一個登入介面,登入成功後切換到另一個介面。 登入介面實現的功能有: 1. qt連線mysql建立表.2。註冊賬號,往mysql表裡面新增賬號和密碼。實現登入功能。 另外一個介面實現的功能有: 1.刪除mysql資料庫的資料.2。查詢資料庫內容。
qt實現一個登陸介面-------------------qt之mysql增、刪、改、查、基本操作。
https://www.cnblogs.com/baimt/p/5688517.html安裝的MySQL的的步驟可以參考該博主的文章。 專案描述:實現一個登入介面,登入成功後切換到另一個介面。 登入介面實現的功能有: 1. qt連線mysql建立表.2。註冊賬號,往mysql表裡面新增賬
【資料結構】二叉搜尋樹(增、刪、查)的遞迴與非遞迴實現
前言: 二叉搜尋樹是二叉樹中的一種特殊結構,具有如下的性質: ➢每個節點都有一個作為搜尋依據的關鍵碼(key),所有節點的關鍵碼互不相同。 ➢左子樹上所有節點的關鍵碼(key)都小於根節點的關鍵碼(key)。 ➢右子樹上所有節點的關鍵碼(key)都大於根節點的關鍵碼
【SRH】------node連接mongodb,實現增、刪、改、查功能
get 準備工作 升序 toarray update move demo ole 完成 node連接mongodb 準備工作 1.在項目根目錄下 初始化倉庫,形成node包 npm init -y 2.下載mongodb包 cnpm inst
【SRH】------node連線mongodb,實現增、刪、改、查功能
node連線mongodb 準備工作 1.在專案根目錄下 初始化倉庫,形成node包 npm init -y 2.下載mongodb包
【react自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react專案
前言 一、React是Facebook推出的一個前端框架,之前被用於著名的社交媒體Instagram中,後來由於取得了不錯的反響,於是Facebook決定將其開源。出身名門的React也不負眾望,成功成為當前最火熱的三大前端框架之一。相比於Angular,React更加輕量
開發你的第一個React + Ant Design網頁(一、配置+編寫主頁)
前言 React是Facebook推出的一個前端框架,之前被用於著名的社交媒體Instagram中,後來由於取得了不錯的反響,於是Facebook決定將其開源。出身名門的React也不負眾望,成功成為當前最火熱的三大前端框架之一。相比於Angular,Reac
IDEA搭建SSM實現增、刪、改、查及登入判斷、註冊功能
Maven搭建SSM專案使用Intellij idea 搭建基本的maven專案 new->project最後Finish,Maven專案搭建完成配置Maven構建專案基本目錄結構如下圖:controller:http(GET和POST等)請求的入口,呼叫Service
spring quartz實現定時任務、延時任務的動態增、刪、改、查
配置見前面兩篇部落格 首先我需要的quartz相關的資訊包括任務名稱、任務組名稱、作業開始時間、作業結束時間等,定義一個類UniQuartzBean用於儲存這些屬性: import java.util.Date; public class UniQuartzBean {
Java網頁應用之實現對資料庫的增、刪、改、查。
模擬資訊管理系統 通過eclipse實現網頁、資料庫的連線,實現對資料庫的增、刪、改、查。 登陸頁面: 登陸成功介面: 新增資訊介面: 修改資訊介面: 刪除資訊介面: package com.lq.pro_user.da
Hibernate實現資料庫增、刪、改、查
1.匯入hibernate jar包和mysql jar包,修改配置檔案hibernate.cfg.xml <?xml version="1.0" encoding="gbk"?> <!DOCTYPE hibernate-configuration PUB
JDBC---DAO經典模式 實現對資料庫的增、刪、改、查
JDBC(Java Data Base Connection)的作用是連線資料庫 先看下jdbc連線SQLServer資料庫的簡單例子 程式碼實現(FirstJDBC): package com.jdbc; import java.sql.Connection; im
1、鏈表之增、刪、查實現(C語言)
pan 沒有 null [] src ase 找到 調用 strlen 一、功能描述: 可以創建節點並添加到鏈表中、查看鏈表中的所有節點、並可以刪除特定的節點 二、代碼實現 1、主函數main主要實現的是從後臺鍵入不同的字符,執行對應的函數來實現特定的操作代碼如下:
PHP 增、刪、改、查介面實現
1.首先把常用的php增、刪、改、查進行封裝. 由於增、刪、改的執行語句和查的不一樣,我們把它們分開寫. 上傳的檔案需要通過iconv()進行編碼轉換,不然儲存的檔名是亂碼 $key: 鍵
使用PHP製作 簡易員工管理系統之七(MVC實現使用者資訊增、刪、改、查)
一、專案目錄結構: 二、檔案Admin.class.php管理員類 <?php class Admin{ private $id; private $name; private $pass