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= ...
随机推荐
- Redis实现之数据库（二）
设置键的生存时间或过期时间 通过EXPIRE或PEXPIRE命令,客户端可以以秒或者毫秒精度为数据库中的某个键设置生存时间(Time To Live,TTL),在经过指定的秒数或者毫秒数之后,服务器就 ...
- tomcat缓存
问题描述: 一个用到struts2框架的web项目,由于在struts.xml中少配置了一个action,导致项目运行时报异常.将原本好的代码复旧,重启tomcat服务,第一次加载程序没问题,再刷新时 ...
- hdu3374 String Problem 最小最大表示法 最小循环节出现次数
#include <iostream> #include <cstring> #include <cstdio> using namespace std; int ...
- IOS笔记048-数据存储
IOS数据存储的几种方式 XML属性列表(plist) 归档 Preference(偏好设置) NSKeyedArchiver归档(NSCodin ...
- IOS架构
iPhone OS(现在叫iOS)是iPhone, iPod touch 和 iPad 设备的操作系统. 1,Core OS: 是用FreeBSD和Mach所改写的Darwin, 是开源.符合POSI ...
- jdk -version could not open jvm.cfg 的解决办法
java 时出现 could not open jvm.cfg 的解决办法 问题描述: 重装JDK并更变目录后,出现JAVA -VERSION 出现could not open jvm.cf ...
- sqlserver创建存储过程返回table
--创建存储过程test create procedure [dbo].[test] ( @I_MTR NVARCHAR (MAX), @I_TYPE NVARCHAR (MAX), @I_FAC N ...
- Ethernet，token ring，FDDI，ATM，WLAN
局域网(Local Area Network:LAN) 通常我们常见的"LAN"就是指局域网,这是我们最常见.应用最广的一种网络.现在局域网随着整个计算机网络技术的发展和提高得到充 ...
- 【转】lightmap
Shader "Diffuse Lightmap" { Properties { _MainTex ("Texture 1", 2D) = "whit ...
- IIS8 不能在此路径中使用此配置节。如果在父级别上锁定了该节
问题: 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的(overrideModeDefault="Deny"),或者是通过包含 overr ...