React实现列表联动

目录结构

第一个文件是json数据
第二个文件是入口
第三个文件是实现主要功能
第四个文件是样式

InsertFunction.jsx
第一种方法是：集合联动

<div className={styles.tabsStyle}><div><Row><Col span={12}><p>函数类别：</p><p><List className={styles.listStyle}size="small"bordered="true"itemLayout="horizontal"dataSource={dataFunction}renderItem={item => (<List.Item className={styles.listItem}><List.Item.Meta onClick={()=>{this.setState({child : item.child,param : item.child[0].param,explain : item.child[0].explain,value:item.child[0].value,})}}title={item.name}/></List.Item>)}/></p></Col><Col span={12} ><p>选择函数：</p><p><List  className={styles.listStyle}size="small"bordered="true"itemLayout="horizontal"dataSource={this.state.child}renderItem={item => (<List.Item className={styles.listItem}><List.Item.Meta onClick={()=>{this.setState({param : item.param,explain : item.explain,value:item.value,})}}title={item.value}/></List.Item>)}/></p></Col></Row></div><div> <p className={styles.listItemStyle}>{this.state.param}</p><p className={styles.listItemStyle}>{this.state.explain}</p></div></div>

第二种方式是：select联动

import React, { Component } from 'react';
import { Col, Modal, Row } from 'antd';
import styles from './InsertFunction.module.less';
import dataFunction from './DataFunction';
import FunctionParam from './FunctionParam';export default class InsertFunction extends Component {constructor(props) {super(props);this.state = {visibleFunctionParam:false,child: dataFunction[0].child,value: dataFunction[0].child[0].value,explain:dataFunction[0].child[0].explain,param:dataFunction[0].child[0].param}this.getType  = this.getType.bind(this);this.getFunction  = this.getFunction.bind(this);}functionParamCancel = () => {this.setState({visibleFunctionParam: false,});};functionParamClick = () => {this.setState({visibleFunctionParam: true,});};renderOptions1 = () => {return dataFunction.map(element =><option key={element.name} value={element.name}>{element.name}</option>);};renderOptions2 = () => {return this.state.child.map(element =><option key={element.value} value={element.value}>{element.value}</option>);};getType(e) {dataFunction.map(element => {if (element.name == e.target.value) {this.setState({child: element.child,value: element.child[0].value,explain: element.child[0].explain,param: element.child[0].param,})}});}getFunction(e){this.state.child.map(element => {if(element.value == e.target.value){this.setState({value:element.value,explain:element.explain,param:element.param,})}});}render() {const { visible,handleCancel } = this.props;return (<Modal visible={visible} title="插入函数" width={570}bodyStyle={{ height: 380, paddingLeft: '20px'}} onOk={this.functionParamClick} onCancel={handleCancel} ><FunctionParam visibleFunctionParam={this.state.visibleFunctionParam} functionParamCancel={this.functionParamCancel}curFunction={this.state.value} curDescribe={this.state.explain}curParam={this.state.param} /><div className={styles.tabsStyle}><div><Row><Col span={12}><p>函数类别:</p><p><select className={styles.listStyle} size="5"  onClick={this.getType}>{this.renderOptions1()}</select></p></Col><Col span={12} ><p>选择函数:</p><p><select className={styles.listStyle} size="9" onClick={this.getFunction}>{this.renderOptions2()}</select></p></Col></Row></div><div> <p className={styles.listItemStyle}>{this.state.param}</p><p className={styles.listItemStyle}>{this.state.explain}</p></div></div></Modal>);}
}

DataFunction.js

  let dataFunction = [{"name": "数据库","child": [{"value": "DAVERAGE","explain": "该函数返回列表或数据库中满足指定条件的记录字段（列）中的数值的平均值。","param":"DAVERAGE(database,field,criteria)"},{"value": "DCOUNT","explain": "该函数计算数据库中包含数字的单元格的数量。","param":"DCOUNT(database,field,criteria)"},{"value": "DCOUNTA","explain": "该函数计算数据库中非空单元格的数量。","param":"DCOUNTA(database,field,criteria)"},{"value": "DGET","explain": "该函数从列表或数据库的列中提取符合指定条件的单个值。","param":"DGET(database,field,criteria)"},{"value": "DMAX","explain": "该函数返回列表或数据库中满足指定条件的记录字段（列）中的最大数字。","param":"DMAX(database,field,criteria)"},{"value": "DMIN","explain": "该函数返回列表或数据库中满足指定条件的记录字段（列）中的最小数字。","param":"DMIN(database,field,criteria)"},{"value": "DPRODUCT","explain": "该函数将数据库中符合条件的记录的特定字段中的值相乘。","param":"DPRODUCT(database,field,criteria)"},{"value": "DSTDEV","explain": "该函数返回列表或数据库中满足指定条件的记录字段（列）中的数字作为一个样本估算出的样本总体标准偏差。","param":"DSTDEV(database,field,criteria)"},{"value": "DSTDEVP","explain": "该函数返回列表或数据库中满足指定条件的记录字段（列）中的数字作为样本总体计算出的总体标准偏差。","param":"DSTDEVP(database,field,criteria)"},{"value": "DSUM","explain": "该函数返回列表或数据库中满足指定条件的记录字段（列）中的数字之和。","param":"DSUM(database,field,criteria)"},{"value": "DVAR","explain": "该函数返回列表或数据库中满足指定条件的记录字段（列）中的数字作为一个样本估算出的样本总体方差。","param":"DVAR(database,field,criteria)"},{"value": "DVARP","explain": "该函数返回列表或数据库中满足指定条件的记录字段（列）中的数字作为样本总体计算出的样本总体方差。","param":"DVARP(database,field,criteria)"}]
}, {"name": "日期与时间","child": [{"value": "DATE","explain": "该函数返回DateTime对象，代表了一个独有的日期，通过定制年，月和日。","param":"DATE(year,month,day)"},{"value": "DATEDIF","explain": "该函数返回两个日期间的天，月和年的数目。","param":"DATEDIF(date1,date2,outputcode)"},{"value": "DATEVALUE","explain": "该函数将文本格式的日期转换为日期对象。","param":"DATEVALUE(date_string)"},{"value": "DAY","explain": "该函数将序列号转换为月份日期。","param":"DAY(date)"},{"value": "DAYS","explain": "此函数返回两个日期之间的天数。","param":"DAYS(startdate,enddate)"},{"value": "DAYS360","explain": "该函数以一年360天为基准计算两个日期间的天数。","param":"DAYS360(startdate,enddate,method)"},{"value": "EDATE","explain": "该函数返回用于表示开始日期之间或之后月数的日期的序列号。","param":"EDATE(startdate,months)"},{"value": "EOMONTH","explain": "该函数返回指定月数之前或之后的月份的最后一天的序列号。","param":"EOMONTH(startdate,months)"},{"value": "HOUR","explain": "返回时间值得小时数。","param":"HOUR(time)"},{"value": "ISOWEEKNUM","explain": "此函数返回给定日期在全年中的ISO周数。","param":"ISOWEEKNUM(date)"},{"value": "MINUTE","explain": "该函数返回时间值中的分钟，为一个介于0到59之间的整数。","param":"MINUTE(time)"},{"value": "MONTH","explain": "该函数返回以序列号表示的日期中的月份。","param":"MONTH(data)"},{"value": "NETWORKDAYS","explain": "此函数返回参数开始日期和结束日期之间完整的工作日数值。工作日不包括周末和专门指定的假期。","param":"NETWORKDAYS(startdate,enddate,holidays)"},{"value": "NETWORKDAYS.INTL","explain": "此函数返回两个日期之间的所有工作日数。","param":"NETWORKDAYS.INTL(startdate,enddate,weekend,holidays)"},{"value": "NOW","explain": "此函数返回当前的日期和时间。","param":"NOW()"},{"value": "SECOND","explain": "此函数返回时间值的秒数。返回的秒数为0到59之间的整数。","param":"SECOND(time)"},{"value": "TIME","explain": "此函数返回指定时间的时间间隔对象。","param":"TIME(hour,minutes,seconds)"},{"value": "TIMEVALUE","explain": "此函数返回由文本字符串所代表的时间的时间间隔对象值。","param":"TIMEVALUE(time_string)"},{"value": "TODAY","explain": "此函数返回当前的日期和时间。","param":"TODAY()"},{"value": "WEEKDAY","explain": "此函数返回某日期为星期几。默认情况下，其值为1（星期天）到7（星期六）之间的整数。","param":"WEEKDAY(date,type)"},{"value": "WEEKNUM","explain": "此函数返回一个数字，该数字代表一年中的第几周。","param":"WEEKNUM(date,weektype)"},{"value": "WORKDAY","explain": "此函数返回某日期（起始日期）之间或之后相隔指定工作日的某一日期的日期值。","param":"WORKDAY(startdate,enddate,holidays)"},{"value": "WORKDAY.INTL","explain": "此函数返回指定的若干个工作日之前或之后的日期的序列号（使用自定义周末参数）。周末参数指明周末有几天以及是哪几天。","param":"WORKDAY.INTL(startdate,numdays,weekend,holidays)"},{"value": "YEAR","explain": "此函数返回某日期对应的年份。","param":"YEAR(date)"},{"value": "YEARFRAC","explain": "此函数返回start和end之间的天数占全年天数的百分比。","param":"YEARFRAC(startdate,enddate,basis)"}]}]export default dataFunction;

InsertFunction.module.less

@fontSize: 14px;
.tabsStyle {font-size: @fontSize;margin-top: -10px;
}
.listStyle {overflow: auto;height: 220px;margin-left: 10px;margin-right: 10px;
}
.listItem:active {background-color: #d9edf7;
}
.listItemStyle {height: 10px;margin-left: 10px;
}

index.js

import InsertFunction from './InsertFunction';export default InsertFunction;

实现效果

React实现列表联动相关推荐

react中列表渲染的局部刷新
最近在写demo的时候遇到一个更新列表中某个的对象的某个值,最期待的结果肯定是局部刷新,但是我们往往在改变值之后会遇到全局都刷新的问题,以下为个人实验出来的一个小技巧. 首先我有以下数据需要通过rea ...
Android股票列表联动
使用ScrollerView+RecycleView实现股票列表联动效果:一个可以拿来可以直接使用的解决方案,而且滑动流畅,带标题栏悬浮功能,支持整行的点击效果,支持长安事件: 效果如下图所示: 实现 ...
Android实现平板的类股票列表联动
最近遇到了一个很恶心的问题,要实现类似于股票列表联动的问题,一般手机上基本用不着,这个效果一般用在平板上,要是手机上用这种效果那就没得聊了,我只能呵呵了... 下面开始正题部分,先上效果图,便于理解: ...
ajax的列表联动示例
ajax的列表联动示例 1. 输入域: 请选择省: <select id="sel1" onchange="return choose(this);"& ...
仿饿了么，百度外卖这些App的双ListView列表联动效果
仿饿了么,百度外卖这些App的双列表联动效果思路: 1.自定义一个悬浮条目且带移动替换效果的ListView. 2.在界面中左边是个普通的ListView,右边是我们自定义带效果的ListView. ...
GitChat · 移动开发 | 征服React Native—列表组件
GitChat 作者:Li Luo 原文:征服React Native-列表组件关注公众号:GitChat 技术杂谈,一本正经的讲技术前言移动应用往往受限于屏幕大小,而数据内容长度的不确定性,在 ...
RecyclerView双列表联动
双列表联动效果如下: 以上,是博主根据鸿洋大神的玩Android开放的API做的一个客户端,其中导航界面使用了双列表联动来展示数据. 一.前期基础知识储备 1.使用强大的开源项目BRVAH装载两个列表 ...
使用 RecyclerView 做点餐列表联动页面
使用 RecyclerView 做点餐列表联动页面版权声明:本文为博主原创文章,未经博主允许不得转载. 最近刚换了工作,来到一家做了11年餐饮软件管理的公司,开发平板端点餐安卓端原生app.因为之前 ...
native封装卡片 react_自己动手封装一个React Native多级联动
背景肯定是最近有一个项目,需要一个二级联动功能了! 本来想封装完整之后,放在github上面赚星星,但发现市面上已经有比较成熟的了,为什么我在开发之前没去搜索一下(项目很赶进度),泪崩啊,既然已经封 ...

React实现列表联动

React实现列表联动相关推荐

最新文章

热门文章