react 使用antd的多选功能做一个单选与全选效果
一个小而简单的单选全选功能，其实官网已经给出效果了，不过是我多做了些复合用法
addorupdatemodal.jsx
import React from "react";
import {Modal,Table,Button,Checkbox,Card,Popconfirm } from 'antd';
import LoadingMixin from '../../../libs/loading.common.mixin';
import RequestMixin from '../../../libs/request.mixin';
import NotificationMixin from '../../../libs/notification.mixin';
import Helper from '../../../libs/helper';
import './index.css'; const { Meta } = Card;
const CheckboxGroup = Checkbox.Group;
export default React.createClass({
mixins: [LoadingMixin, NotificationMixin, RequestMixin],
propTypes: {
onManualClose:React.PropTypes.func,
onOk: React.PropTypes.func,
onCancel: React.PropTypes.func,
title: React.PropTypes.string,
item: React.PropTypes.object
},
getInitialState() {
return {
item: this.props.item && this.props.item || {},
data: [],
userObj: {},
deleteList:[],
indeterminate: false,
checkAll: false,
checkedList:[]
};
},
componentWillMount() {
this.fetch();
},
fetch() {
// console.log("11111111111------------》",this.props.item.frameid);
this.post({
url: "Api/historyPush/module/frame/key/dac509bd90a82719a3569291e12c24a6f1af4bac",
param: {
frameid: this.props.item.frameid
// frameid:'32frame_tj1'
},
noLoading: true
}).then(result=> {
// console.log("result-----------------",result);
this.setState({data: result.result || []});
});
// this.get({
// url: "Api/lists/module/user/key/dac509bd90a82719a3569291e12c24a6f1af4bac",
// param: {
// },
// noLoading: true
// }).then(result=> {
// let userObj = {};
// result.result && result.result.map(item => {
// userObj[item.id] = item.nickname;
// });
// this.setState({userObj: userObj|| {}});
// });
},
hideModal() {
this.props.onCancel && this.props.onCancel();
},
onChange(checkedList){
// console.log('checked = ', checkedList);
this.setState({
checkedList:checkedList,
indeterminate: !!checkedList.length && (checkedList.length < this.state.data.length),
checkAll: checkedList.length === this.state.data.length,
}); },
onCheckAllChange(e){
// console.log("全选1",e.target.checked);
// console.log("全选2",this.state.data);
let dataList =[]
for(var i=0;i<this.state.data.length;i++){
dataList[i]=this.state.data[i].imgid
}
// console.log("dataList--------",dataList)
this.setState({
checkedList: e.target.checked ? dataList : [],
indeterminate: false,
checkAll: e.target.checked,
});
},
handleClose(record) {
var that = this;
if (this.state.checkedList==null||this.state.checkedList.length==0) {
that.error("请选择要删除的图片");
return false;
};
// console.log("删除的图片",this.props.item.frameid,this.state.checkedList);
this.post({
url: "Api/clearCache/module/frame/key/dac509bd90a82719a3569291e12c24a6f1af4bac",
param: {
frameid:this.props.item.frameid,
imglist: this.state.checkedList
},
noLoading: true
}).then(result=> {
if (result.result) {
that.success("操作成功");
that.fetch();
}
});
},
render() {
let isMainObj = {
1 : "是",
0 : "否"
}
let columns = [
{ title: '用户', dataIndex: 'userid', key: 'userid', width: '20%',
render: (text, record) => {
return (
this.state.userObj && this.state.userObj[text]
)
}
},
{ title: '主管理', dataIndex: 'is_main', key: 'is_main', width: '20%',
render: (text, record) => {
return (
isMainObj[record['is_main']]
)
}
},
{ title: '设备备注', dataIndex: 'remark', key: 'remark', width: '30%' },
{ title: '绑定时间', dataIndex: 'create_time', key: 'create_time', width: '25%' }
];
return (
<Modal title={this.props.title && this.props.title || '新增'} visible={true} width="700px" onCancel={this.hideModal} maskClosable={false} footer={
<Button key="back" type="ghost" size="large" onClick={this.hideModal}>关 闭</Button>
}>
<div className={'boxTitle'}>
<Checkbox
indeterminate={this.state.indeterminate}
onChange={this.onCheckAllChange}
checked={this.state.checkAll}
// checked={this.state.checked}
// disabled={this.state.disabled}
// onChange={this.onChange} //this,record
>
{'全选'}
</Checkbox>
<Popconfirm placement="topRight" title={"您确定要删除这些数据吗?"} onConfirm={this.handleClose} okText="确定" cancelText="取消">
<Button type="primary">批量删除</Button>
</Popconfirm>
</div>
<div className={'cardBox'}>
<Checkbox.Group style={{ width: '100%' }} onChange={this.onChange} value={this.state.checkedList}>
<Card title="">
{
this.state.data && this.state.data.map((item,index) => {
return (
<Card.Grid className={'gridStyle'} key={item.imgid}>
<Checkbox
className={'CheckboxStyle'}
value={item.imgid}
>
</Checkbox>
<img src={item.small_url} ></img>
</Card.Grid>
)
})
}
</Card>
</Checkbox.Group>,
</div>
</Modal>
)
}
});
index.jsx
import React from 'react';
import { Table,Form,Input,Button,Popconfirm,Select} from 'antd';
import LoadingMixin from '../../../libs/loading.common.mixin';
import RequestMixin from '../../../libs/request.mixin';
import NotificationMixin from '../../../libs/notification.mixin';
import Helper from '../../../libs/helper';
import ModalWrapper from '../../../libs/modalwrapper';
import './index.css';
import AddOrUpdateModal from './addorupdatemodal';
import BindUserModal from './bindusermodal'; const FormItem = Form.Item;
const createForm = Form.create;
const Option = Select.Option;
let equipmentList = React.createClass({
mixins: [LoadingMixin,NotificationMixin,RequestMixin],
getInitialState(){
return {
data: [],
pagination: {showQuickJumper: true,showTotal: total => `共 ${total} 条`},
loading: false,
tableCompanyName:[],
param:[]
}
},
componentWillMount() {
this.tableCompanyName();
},
tableCompanyName(){
this.get({
url:"Api/lists/module/company/key/dac509bd90a82719a3569291e12c24a6f1af4bac",
param: {
},
noLoading: true
}).then(result=> {
let companyName = result.result;
let companyMap = []
if(companyName==null||companyName.length==0){
companyMap =[]
}else {
for(var i=0;i<companyName.length;i++){
companyMap[companyName[i].id]=companyName[i].title;
}
}
this.setState({
tableCompanyName: companyMap,
},this.fetch)
});
},
fetch(pageNum = 1, pageSize = 10) {
this.get({
url: "Api/lists/module/frame/key/dac509bd90a82719a3569291e12c24a6f1af4bac",
param: {
companyid:this.state.param.companyid ? this.state.param.companyid :'',
frameid:this.state.param.frameid ? this.state.param.frameid :'',
has_kinect:this.state.param.has_kinect ? this.state.param.has_kinect :'',
p: pageNum,
n: pageSize
},
noLoading: true
}).then(result=> {
const pagination = this.state.pagination;
pagination.total = Number(result.count); const tableList = result.result;
const tableCompanyName = this.state.tableCompanyName;
const companyMap = tableCompanyName;
for (var i=0;i<tableList.length;i++){
tableList[i].has_kinect && tableList[i].has_kinect == 0 ? tableList[i].has_kinect='普通':tableList[i].has_kinect='体感'
if(tableList[i].companyid){
tableList[i].title = companyMap[tableList[i].companyid]
}else {
tableList[i].title = ''
}
} this.setState({
loading: false,
data: tableList || [],
pagination,
});
}).catch(e => {
const pagination = this.state.pagination;
pagination.total = 0;
this.setState({
loading: false,
data: [],
pagination,
})
});
},
handleSubmit(e) {
var that = this;
e && e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
let params ={}
params.companyid = values.companyid;
params.frameid = values.frameid;
params.has_kinect = values.has_kinect;
// console.log("查询条件paramsparams",params);
this.setState({param: params},this.tableCompanyName);
}
});
},
handleReset(e) {
e && e.preventDefault();
this.props.form.resetFields();
// this.searchQuery();
},
handleTableChange(pagination, filters, sorter) {
const pager = this.state.pagination;
pager.current = pagination.current;
this.setState({
pagination: pager,
});
this.fetch(pagination.current, pagination.pageSize);
},
handleClose(record) {
var that = this;
if (!record) return;
this.post({
url: "Api/batchDelete/module/frame/key/dac509bd90a82719a3569291e12c24a6f1af4bac",
param: {
ids: record.id
},
noLoading: true
}).then(result=> {
if (result.result) {
that.success("操作成功");
that.fetch();
}
});
},
// addOrUpdate(modal,e) {
// e && e.preventDefault() ;
// e && e.stopPropagation();
// console.log("this.state.tableCompanyName----------",this.state.tableCompanyName);
// new ModalWrapper(AddOrUpdateModal, "addOrUpdateModal", () => {
// this.fetch();
// }, null, {
// shopList:this.state.shopList,
// title: modal && modal.id ? '编辑设备' : '新增设备',
// item: modal && modal.id ? Helper.copyObject(modal) : {},
// isEdit: modal && modal.id ? true:false,
// tableCompanyName: modal && modal.id ? this.state.tableCompanyName:this.state.tableCompanyName,
// }).show();
// },
handleBindCache(modal,e) {
e && e.preventDefault() ;
e && e.stopPropagation();
// console.log("modal---缓存管理--",modal);
new ModalWrapper(AddOrUpdateModal, "addOrUpdateModal", () => {
this.fetch();
}, null, {shopList:this.state.shopList,title: '缓存管理',item: modal && modal.id ? Helper.copyObject(modal) : {}}).show();
}, handleBindUser(modal,e) {
e && e.preventDefault() ;
e && e.stopPropagation();
// console.log("modal---人员管理--",modal);
new ModalWrapper(BindUserModal, "bindUserModal", () => {
this.fetch();
}, null, {
shopList:this.state.shopList,
title: '人员管理',
item: modal && modal.id ? Helper.copyObject(modal) : {}
}).show();
},
render() {
const { getFieldDecorator } = this.props.form;
let columns = [
{ title: '编号',dataIndex: 'id', key: 'id', width: '5%'},
{ title: '设备编码', dataIndex: 'frameid', key: 'frameid', width: '20%' },
{ title: '公司名称', dataIndex: 'title', key: '#2', width: '25%' },
{ title: '类型', dataIndex: 'has_kinect', key: 'has_kinect', width: '5%' },
{ title: '绑定上限', dataIndex: 'bind_limit', key: 'bind_limit', width: '5%' },
{ title: '备注', dataIndex: 'mark',key: 'mark', width: '15%'},
{ title: '操作', key: '#', width: '25%',
render: (text, record) => {
return (
<div>
<Button type="primary" onClick={this.handleBindCache.bind(this,record)} style={{marginRight: "10px"}}>缓存管理</Button>
<Button type="primary" onClick={this.handleBindUser.bind(this,record)} style={{marginRight: "10px"}}>人员管理</Button>
{/*<Popconfirm placement="topRight" title={"您确定要删除该条数据吗?"} onConfirm={this.handleClose.bind(this,record)} okText="确定" cancelText="取消">*/}
{/*<Button type="primary" >删除</Button>*/}
{/*</Popconfirm>*/}
</div>
)
}
}
];
return (
<div className="modular-main">
<div className="title">
<h2>设备管理</h2>
</div>
<div className="form-search">
<Form layout="inline" onSubmit={this.handleSubmit} autoComplete="off">
<FormItem>
{
getFieldDecorator('frameid')(
<Input placeholder="请输入设备号" />
)
}
</FormItem>
<FormItem>
{
getFieldDecorator('companyid',{
initialValue: this.state.param && this.state.param.companyid || '',
})(
<Select style={{ width: '120px' }}>
<Option value=""> --公司名称-- </Option>
{
this.state.tableCompanyName && this.state.tableCompanyName.map((item,key,index) => {
// console.log("-key.toString()--------",key.toString())
return (
<Option key={index} value={key.toString()}> {item}</Option>
)
})
}
</Select>
)
}
</FormItem>
<FormItem>
{
getFieldDecorator('has_kinect',{
initialValue: this.state.param && this.state.param.has_kinect || '',
})(
<Select style={{ width: '120px' }}>
<Option value=""> --请选择类型-- </Option>
<Option value="0"> 普通 </Option>
<Option value="1"> 体感 </Option>
</Select>
)
}
</FormItem>
<Button type="primary" htmlType="submit">查询</Button>
{/*<Button type="primary" onClick={this.addOrUpdate.bind(this,'')}>添加</Button>*/}
{/*<Button onClick={this.handleReset}>重置</Button>*/}
</Form>
</div>
<div>
<Table loading={this.state.loading}
columns={columns}
dataSource={this.state.data}
onChange={this.handleTableChange}
pagination={this.state.pagination}
scroll={{ y: 600 }}
rowKey={(record) => record.id}
>
</Table>
</div>
</div>
)
}
});
equipmentList = createForm()(equipmentList);
export default equipmentList;
bindusermodal.jsx
import React from "react";
import {Modal,Table,Button,Popconfirm} from 'antd';
import LoadingMixin from '../../../libs/loading.common.mixin';
import RequestMixin from '../../../libs/request.mixin';
import NotificationMixin from '../../../libs/notification.mixin';
import Helper from '../../../libs/helper'; export default React.createClass({
mixins: [LoadingMixin, NotificationMixin, RequestMixin],
propTypes: {
onManualClose:React.PropTypes.func,
onOk: React.PropTypes.func,
onCancel: React.PropTypes.func,
title: React.PropTypes.string,
item: React.PropTypes.object
},
getInitialState() {
return {
item: this.props.item && this.props.item || {},
data: [],
userObj: {}
};
},
componentWillMount() {
this.fetch();
},
fetch() {
console.log("this.props.item.frameid",this.props.item.frameid);
this.get({
url: "Api/getFrameUser/module/userFrame/key/dac509bd90a82719a3569291e12c24a6f1af4bac",
param: {
frameid: this.props.item.frameid
},
noLoading: true
}).then(result=> {
this.setState({data: result.result || []});
});
this.get({
url: "Api/lists/module/user/key/dac509bd90a82719a3569291e12c24a6f1af4bac",
param: {
},
noLoading: true
}).then(result=> {
let userObj = {};
result.result && result.result.map(item => {
userObj[item.id] = item.nickname;
});
this.setState({userObj: userObj|| {}});
});
},
handleClose(record) { //解绑用户
console.log("222222",record)
var that = this;
if (!record) return;
this.post({
url: "Api/UnbindFrame/module/userFrame/key/dac509bd90a82719a3569291e12c24a6f1af4bac",
param: {
userid:record.userid,
frameid: this.props.item.frameid
},
noLoading: true
}).then(result=> {
if (result.result) {
that.success("操作成功");
that.fetch();
}
});
},
hideModal() {
this.props.onCancel && this.props.onCancel();
},
render() {
let isMainObj = {
1 : "是",
0 : "否"
}
let columns = [
{ title: '用户', dataIndex: 'userid', key: 'userid', width: '20%',
render: (text, record) => {
return (
this.state.userObj && this.state.userObj[text]
)
}
},
{ title: '设备备注', dataIndex: 'remark', key: 'remark', width: '30%' },
{ title: '主管理', dataIndex: 'is_main', key: 'is_main', width: '10%',
render: (text, record) => {
return (
isMainObj[record['is_main']]
)
}
},
{ title: '绑定时间', dataIndex: 'create_time', key: 'create_time', width: '25%' },
{ title: '操作', key: '#', width: '15%',
render: (text, record) => {
return (
<div>
<Popconfirm placement="topRight" title={"您确定要解绑该条用户吗?"} onConfirm={this.handleClose.bind(this,record)} okText="确定" cancelText="取消">
<Button type="primary" >删除</Button>
</Popconfirm>
</div>
)
}
}
];
return (
<Modal title={this.props.title && this.props.title || '新增'} visible={true} width="700px" onCancel={this.hideModal} maskClosable={false} footer={
<Button key="back" type="ghost" size="large" onClick={this.hideModal}>关 闭</Button>
}>
<Table columns={columns}
dataSource={this.state.data}
pagination ={false}
scroll={{ y: 600 }}
rowKey={(record) => record.id}
>
</Table>
</Modal>
)
}
});
效果图
react 使用antd的多选功能做一个单选与全选效果的更多相关文章
- php处理表单中的复选框问题以及js实现全选
做的一个项目中遇到了全选和取消全选的问题,这是一个很普遍的功能,,虽然我们经常用到,但是真正做起来却发现行不通,在网上找了些,大部分都是ie,但是谷歌内核浏览器不能正常实现,所以经过小小的调整,今天就 ...
- 用RecyclerView做一个小清新的Gallery效果 - Ryan Lee的博客
一.简介 RecyclerView现在已经是越来越强大,且不说已经被大家用到滚瓜烂熟的代替ListView的基础功能,现在RecyclerView还可以取代ViewPager实现Banner效果,当然 ...
- ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- input单选框全选与反选
input单选框全选与反选 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选
一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...
- 一个js编写全选、弹出对话框、ajax-json的案例
js功能有:全选.弹出对话框.使用json传输ajax数据:不想在写多余的文字了,直接上代码: <%@ page language="java" contentType=&q ...
- jquery如何判断checkbox（复选框）是否被选中 全选 反选
好长时间没用jq, 之前用的都是ng. 想着随便参考一下,结果被坑.因为这篇文章是09年的,也和当时jq的版本号有关,但是为什么在百度排名第一,百度果然坑人,以后还是google 给出坑人文章的链接 ...
- 用RecyclerView做一个小清新的Gallery效果
一.简介 RecyclerView现在已经是越来越强大,且不说已经被大家用到滚瓜烂熟的代替ListView的基础功能,现在RecyclerView还可以取代ViewPager实现Banner效果,当然 ...
- 转发！HTML 复选框 checkbox 的 JavaScript 的全选和全反选
checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: <html> <head> <meta http-equiv= ...
随机推荐
- 华为liteos了解（一）
我来补充一下,从@華仔答案的提供的wiki中看,随便翻了一下,内核部分和协议栈的接口部分代码风格完全不一致.协议栈和相关的代码应该是直接使用或者修改了uIP (micro IP)的实现,所以整体感觉应 ...
- FLASH、SDRAM
1.flash: 闪存,掉电之后里面的存储数据不会丢失,在嵌入式系统中用作存储Bootloader以及操作系统或者程序代码或者直接当硬盘使用(U盘).一般主要使用的FLASH有NOR flash和NA ...
- POJ3436------ACM Computer Factory
题目链接 ACM Computer Factory Description As you know, all the computers used for ACM contests must be i ...
- lua table长度解析
先来看lua table源码长度获取部分(ltable.c) j是数组部分的长度.首先判断数组长度大于0,并且数组最后一个是nil,就用二分法查找,返回长度. 如果t->node是 table的 ...
- 如何拿到半数面试公司Offer——我的Python求职之路（转）
从八月底开始找工作,短短的一星期多一些,面试了9家公司,拿到5份Offer,可能是因为我所面试的公司都是些创业性的公司吧,不过还是感触良多,因为学习Python的时间还很短,没想到还算比较容易的找到了 ...
- 【Word Break II】cpp
题目: Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where e ...
- C语言编程题002
给出两个整数,L和R,其中L<=A<=B<=R,然后求出A^B值最大的数.其中1<=L<=R<=1000. 比如说L = 1;R = 3; L 0001 R 001 ...
- [oldboy-django][2深入django]学生管理（Form）--查看（分页）
1 需求: 查看所有学生的信息,(分页功能) 2 前端:bootstrap美化前端 <!DOCTYPE html> <html lang="en"> < ...
- jquery实现跨域请求(复制)
很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了.近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多 ...
- MySQL 添加审计功能
MySQL社区版没有自带的设计功能或插件.调研发现MariaDB的audit plugin 同样适用于MySQL,支持更细粒度的审计,比如只审计DDL操作,满足我们的需求.因为最近测试环境的某表结构经 ...