项目实战之FORM、复选框组件的实现

  一、使用描述

  对于复选框组件来说,主要的问题在于,勾选后返回的值要处理为数字,传递给接口,接口返回的值也是数字,但是在前台做回显时在table中数据格式需要转义为文字或者在form中数据格式需要回显在复选框中。

  二、功能代码

  1,转为数字1为勾选,0为未勾选

  constructor(props) {
    super(props);
    this.state = {
      checkStatus: 0
    }
  }

 //选中是true值转为1,否则就是0
  handleIsChecked = (e) => {
    this.setState({
      checkStatus: e.target.checked ? 1: 0
    })
  }
  <FormItem {...tailFormItemLayout} style={{marginBottom: 8}}>
	{getFieldDecorator(‘isHash‘, {
	  valuePropName: ‘checked‘
	})(
	  <Checkbox onChange={self.handleIsChecked.bind(this)}>是否hash存储</Checkbox>
	  )}
  </FormItem>

  最终传值时使用checkStatus

  2.在table中回显

const columns = [{
      title: ‘ID‘,
      dataIndex: ‘id‘,
      key: ‘id‘,
    }, {
      title: ‘key值‘,
      dataIndex: ‘cacheKey‘,
      key: ‘cacheKey‘,
    }, {
      title: ‘key值含义描述‘,
      dataIndex: ‘keyDesc‘,
      key: ‘keyDesc‘,
    }, {
      title: ‘所属redis集群‘,
      dataIndex: ‘belongCluster‘,
      key: ‘belongCluster‘,
    }, {
      title: ‘是否hash存储‘,
      dataIndex: ‘isHash‘,
      key: ‘isHash‘,
      render: (text, record) => (
        record.isHash == 1 ? ‘是‘:‘否‘
      ),
    }, {
      title: ‘创建时间‘,
      dataIndex: ‘created‘,
      key: ‘created‘,
      render: (text, record) => (
      moment(text).format(‘YYYY-MM-DD‘)
      ),
    }, {
      title: ‘修改时间‘,
      dataIndex: ‘modified‘,
      key: ‘modified‘,
      render: (text, record) => (
        moment(text).format(‘YYYY-MM-DD‘)
      ),
    }, {
      title: ‘操作‘,
      key: ‘action‘,
      render: (text, record) => (
        <span>
      <a href="javascript:return false;" onClick={self.onClickUpdate.bind(this, record)}>修改</a>
      <span className="ant-divider"/>
      <a href="javascript:return false;" onClick={self.onClickDelete.bind(this, record.id)}>删除</a>
    </span>
      ),
    }];

  在定义table的列时,可以添加render()方法,render: (text, record) => (record.isHash == 1 ? ‘是‘:‘否‘),就可以实现对应文字的回显。

  3.在form中回显

比如点击修改某一条记录,则需要将复选框是否勾选的状态会显出来。说到这点不得不佩服ant,封装得真是太好了。只要添加一个属性就可以实现。如下:

  <FormItem {...tailFormItemLayout} style={{marginBottom: 8}}>
		{getFieldDecorator(‘isHash‘, {
		  valuePropName: ‘checked‘
		})(
		  <Checkbox onChange={self.handleIsChecked.bind(this)}>是否hash存储</Checkbox>
		  )}
  </FormItem>

  valuePropName:‘checked‘就可以搞定。

时间: 2024-12-28 08:43:39

项目实战之FORM、复选框组件的实现的相关文章

Android实战之ListView复选框

项目中有用到复选框的例子,啊啊......在网上查找有关资料,大多都是过于繁琐,所以自己决定写个这个方面的demo... 先给个效果图: 在ListView中添加复选框主要注意以下几个问题: 1.ListView item与item中的控件抢焦点的问题(必须设置CheckBox不可点击和不能获取焦点,让ListView得到焦点) 2.ListView的setChoicMode(int choiceMode)选择模式():有choiceMode : CHOICE_MODE_NONE, CHOICE

复选框组件

package com.java.charpter12; import java.awt.BorderLayout;import java.awt.Container;import java.awt.event.ActionEvent;import java.awt.event.ActionListener; import javax.swing.JCheckBox;import javax.swing.JFrame;import javax.swing.JPanel;import javax.

项目实战之FORM、联动菜单组件的实现

联动菜单也是我们常用功能之间,下面描述一下联动菜单的一种实现. 一.功能描述:两级联动. 在选择了集群中一项后,会将该集群下的key值都关联出来.开发时在这里遇到一个问题,卡了很久.遇到的问题:在上图的状态下,更换一级联动的值,二级联动的值依然会保留上一次的值.其实这个问题挺简单的.就是在加载二级联动值时先清除.重点还是在对ant的组件不了解,不会使用. 二.功能代码 import React from 'react'; import '../index.less'; import {Form,

flutter Checkbox 复选框组件

import 'package:flutter/material.dart'; class CheckboxDemo extends StatefulWidget { @override _CheckboxDemoState createState() => _CheckboxDemoState(); } class _CheckboxDemoState extends State<CheckboxDemo> { bool _checkboxItemA = true; @override

[CSS揭秘]自定义单选框和复选框

很多Web前端工程师肯定都会遇到过,在项目中,UI设计师跑来跟你说,我这个地方的表单控件需要设计成这个样子那个样子.但是用CSS却不能够修改这些控件的默认样式,于是乎,只能通过div+javascript技术来进行模拟.特别是在如今移动端的崛起时代,更加注重用户的体验.于是就更加需要这样一种hack技术. 如果对如今的前端框架有过了解,都会知道组件这个概念.那么在这些框架中,都会提供一些单选框或复选框按钮组件.可见大家之前受到表单元素的默认样式的毒害有多深. 今天先给大家简单介绍一下如何通过CS

DOM(十)使用DOM设置单选按钮、复选框、下拉菜单

1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为ture时,其它的都变为false. 先贴沙漠化一个例子: <script type="text/javascript"> function getChoice() { var oForm = document.forms["uForm1"]; var aCh

Spring MVC-表单(Form)标签-复选框(Checkbox)示例(转载实践)

以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_checkbox.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显示如何使用Spring Web MVC框架在窗体中使用单个复选框.首先,让我们使用Eclipse IDE,并按照以下步骤使用Spring Web Framework开发基于动态窗体的Web应用程序: 步骤 描述 1 创建一个名为HelloWeb的项目,在一个包com.tutorialspoint

Jquery学习笔记:操作form表单元素之二(复选框和单选框)

在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="item" checked> 全选</label> 注意,input标签要放在label标签内,这样点击文字时也会有反映. 如果选中了,调用  $("#item").prop("checked")返回true,否则返回false 同样利用pro

关于MUI v0.18.0版本 Table组件里的复选框不能选的解决方案

前段时间在用MUI的时候,Table组件出现复选框不能选的bug(描述: 点击复选框,点击事件会触发,复选框勾选状态无变化). 解决方法: 用CheckBox组件代替Table组件自带的复选框. 解决思路: 1.将CheckBox分为两种,一种是表头里的全选框(以下称全选框),一种是列表行里普通的复选框(以下称普通框): 2.将普通框进行单独封装(原因: 1.便于单个普通框自己管理自己的勾选状态,2.当全选框的勾选状态发生变化时,可以通过props将全选框的状态赋给它,从而实现全选的功能): 关