uni-app:分页实现多选功能

效果

代码解析

一、标签-列表

<view class="item_all" v-for="(item, index) in info" :key="index">
    <view class="position parameter-info text-over" :class="{'checked_parameter': item.checked}" :data-id="item.employee_num" @tap="selectcustomer">
	<view class="vv_1">{{ item.num_name }}</view>
</view>

 :class="{'checked_parameter': item.checked}":给列表增加选中样式

:data-id="item.employee_num":选中得到的数据

@tap="selectcustomer":点击进行选择

 二、标签-翻页

<view class="pagination">
	<view class="page-button" @tap="prevPage">上一页</view>
	<view class="page-info">{{ page }}</view>
	<view class="page-info">/</view>
	<view class="page-info">{{ totalPage }}</view>
	<view class="page-button" @tap="nextPage">下一页</view>
</view>

@tap="prevPage":上一页点击事件

{{ page }}:当前页数

{{ totalPage }}:总共页数

@tap="nextPage":下一页点击事件

三、 js-数据

data() {
	return {
			search: getApp().globalData.icon + 'index/search.png',
			add: getApp().globalData.icon + 'index/index/add.png',
			info: [],//查询的全部员工信息
			like_employee_num: '', //模糊查询的员工工号
			page: 1, // 当前页数
			pageSize: 10, // 每页展示的数据条数
			totalPage: 0, //总页数
			selectedList: [], // 选中的员工信息列表(多选存储的数组)
        }
},

四、js- 多选功能

selectcustomer: function(e) {
	var this_checked = e.currentTarget.dataset.id; // 获取对应的条目id
	var List = this.info; // 获取Json数组
	var selectedList = this.selectedList; // 获取已选中的员工列表
	for (var i = 0; i < List.length; i++) {
		if (List[i].employee_num == this_checked) {
			if (List[i].checked) {
				// 已选中,取消选中状态并从已选列表中移除
				List[i].checked = false;
				var index = selectedList.findIndex(item => item.employee_num === List[i].employee_num);
				if (index !== -1) {
					selectedList.splice(index, 1);
				}
			} else {
				// 未选中,设置为选中状态并添加到已选列表中
				List[i].checked = true;
				selectedList.push(List[i]);
			}
			break;
		}
	}
	this.info = List;
	this.selectedList = selectedList;
},
  • var this_checked = e.currentTarget.dataset.id; :点击列表数据,获取的数据item.employee_num(:data-id="item.employee_num"),存于变量this_checked中
  • var List = this.info; :定义List为查询的全部员工数据
  • var selectedList = this.selectedList; :定义selectedList为data中的一个变量selectedList
  • for (var i = 0; i < List.length; i++) {:对全部员工数据进行循环
  • if (List[i].employee_num == this_checked) {:判断全部员工信息中是否有与点击列表获得的值相等(找到被点击的数据在总数组中的位置)
  • if (List[i].checked) {:如果总数组中,这行数据被点击,并且这行数据本身已被选中
  • List[i].checked = false;:将其选中状态变为false(未选中,选中的点击后变为未选中)
  • var index = selectedList.findIndex(item => item.employee_num === List[i].employee_num);:查找selectedList数组中employee_num属性与总数组List[i].employee_num相等的元素,然后返回其索引值。                
  • if (index !== -1) {:表示存在selectedList数组与List数组中employee_num相等的数据
  • selectedList.splice(index, 1);}}splice(index, 1)的形式,表示从selectedList数组中删除指定索引位置的1个元素(即删除找到的符合条件的元素)。
  • else {// 未选中,设置为选中状态并添加到已选列表中
  • List[i].checked = true;:如果未选中就给总数组中此数据的选中状态设为true,让其选中
  • selectedList.push(List[i]); }:并且给selectedList数组增加此行数据
  • this.info = List;:重新更新总数组
  • this.selectedList = selectedList;:重新更新选中数组

 五、js-确认按钮

//确认
sure() {
	if (this.selectedList.length === 0) {
		uni.showToast({
			title: '请选择员工',
			icon: 'none'
		});
	} else {
		console.log(this.selectedList)
		uni.$emit('employee', this.selectedList);
		// uni.navigateBack({
		//   delta: 1
		// });
},

this.selectedList.length === 0:表示没有选中的数据

uni.$emit('employee', this.selectedList);:表示将选中的数据传递刚给上一个页面

六、js- 模糊查询

//模糊查询
search_num(event) {
	this.page = 1;
	this.like_employee_num = event.target.value
	this.getdata()
},

this.page = 1;:将页面初始化为1,进行查询的话默认开始页为第一页
this.like_employee_num = event.target.value:获取模糊查询的数据
this.getdata():执行获取数据的函数

七、js-获取数据(全部员工数据)

getdata() {
	uni.request({
		url: getApp().globalData.position + 'Produce/select_employee',
		data: {
			like_employee_num: this.like_employee_num,
			page: this.page,
			pageSize: this.pageSize
		},
		header: {
			"Content-Type": "application/x-www-form-urlencoded"
		},
		method: 'POST',
		dataType: 'json',
		success: res => {
			// 保存已选中的数据列表到临时数组
			var selectedList = this.selectedList.slice();
			// 更新info数组
			this.info = res.data.all_info;
			this.totalPage = Math.ceil(res.data.total / this.pageSize);
			// 将已选中的数据重新添加到info数组中
			for (var i = 0; i < selectedList.length; i++) {
				var selectedItem = selectedList[i];
				var index = this.info.findIndex(item => item.employee_num === selectedItem
					.employee_num);
				if (index !== -1) {
					this.info[index].checked = true;
				}
			}
		},
		fail(res) {
			console.log("查询失败")
		}
	});
},
  • like_employee_num: this.like_employee_num,:模糊查询传入的数据
  • page: this.page,:当前页
  • pageSize: this.pageSize:本页有多少数据
  • var selectedList = this.selectedList.slice();:对this.selectedList创建一个新数组,其中包含原始数组中指定范围的元素。通过将其赋值给变量selectedList,可以在后续的代码中使用这个副本,而不会直接修改原始数组this.selectedList
  • this.totalPage = Math.ceil(res.data.total / this.pageSize);:总页数(总数据/每页数据)

 八、js-翻页

prevPage() {
		if (this.page > 1) {//只有当当前页数大于1才能进行向后翻页
			this.page--;//页码减一
			this.getdata();
		}
},
nextPage() {
		if (this.page < this.totalPage) {//只有当当前页数小于总页数才能进行向前翻页
			this.page++;//页码加一
			this.getdata();
		}
},

 完整代码:

<template>
	<view>
		<view class="top">
			<view class="search">
				<view class="search_in">
					<!-- 使用代码请更改图片路径 -->
					<image :src="search"></image>
					<input type="text" placeholder="请输入员工工号" placeholder-style="color:#CCCCCC" @confirm="search_num" />
				</view>
			</view>
		</view>
		<view class="center">
			<view class="pages_name">
				<view class="li"></view>
				<view class="li2">员工信息</view>
			</view>
		</view>
		<view class="all">
			<view class="item_all" v-for="(item, index) in info" :key="index">
				<view class="position parameter-info text-over" :class="{'checked_parameter': item.checked}" :data-id="item.employee_num" @tap="selectcustomer">
				  <view class="vv_1">{{ item.num_name }}</view>
				</view>
			</view>
			<view class="pagination">
				<view class="page-button" @tap="prevPage">上一页</view>
				<view class="page-info">{{ page }}</view>
				<view class="page-info">/</view>
				<view class="page-info">{{ totalPage }}</view>
				<view class="page-button" @tap="nextPage">下一页</view>
			</view>
		</view>
		<view class="button_sure" @tap="sure">
			<view class="sure_text">确认</view>
		</view>
		<!-- 添加按钮 -->
		<image class='img' :src='add' @tap='add'></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: getApp().globalData.icon + 'index/search.png',
				add: getApp().globalData.icon + 'index/index/add.png',
				info: [],
				parameterList: '',
				like_employee_num: '', //模糊查询的员工工号
				page: 1, // 当前页数
				pageSize: 10, // 每页展示的数据条数
				totalPage: 0, //总页数
				 selectedList: [], // 选中的员工信息列表
			}
		},
		methods: {
			// 参数点击响应事件,单选的实现
			selectcustomer: function(e) {
			  var this_checked = e.currentTarget.dataset.id; // 获取对应的条目id
			  var List = this.info; // 获取Json数组
			  var selectedList = this.selectedList; // 获取已选中的员工列表
			
			  for (var i = 0; i < List.length; i++) {
			    if (List[i].employee_num == this_checked) {
			      if (List[i].checked) {
			        // 已选中,取消选中状态并从已选列表中移除
			        List[i].checked = false;
			        var index = selectedList.findIndex(item => item.employee_num === List[i].employee_num);
			        if (index !== -1) {
			          selectedList.splice(index, 1);
			        }
			      } else {
			        // 未选中,设置为选中状态并添加到已选列表中
			        List[i].checked = true;
			        selectedList.push(List[i]);
			      }
			      break;
			    }
			  }
			
			  this.info = List;
			  this.selectedList = selectedList;
			},
			//确认
			sure() {
			  if (this.selectedList.length === 0) {
			    uni.showToast({
			      title: '请选择员工',
			      icon: 'none'
			    });
			  } else {
				console.log(this.selectedList)
			    uni.$emit('employee', this.selectedList);
			    // uni.navigateBack({
			    //   delta: 1
			    // });
			  }
			},
			//模糊查询
			search_num(event) {
				this.page = 1;
				this.like_employee_num = event.target.value
				this.getdata()
			},
			getdata() {
			  uni.request({
			    url: getApp().globalData.position + 'Produce/select_employee',
			    data: {
			      like_employee_num: this.like_employee_num,
			      page: this.page,
			      pageSize: this.pageSize
			    },
			    header: {
			      "Content-Type": "application/x-www-form-urlencoded"
			    },
			    method: 'POST',
			    dataType: 'json',
			    success: res => {
			      // 保存已选中的数据列表到临时数组
			      var selectedList = this.selectedList.slice();
			
			      // 更新info数组
			      this.info = res.data.all_info;
			      this.totalPage = Math.ceil(res.data.total / this.pageSize);
			
			      // 将已选中的数据重新添加到info数组中
			      for (var i = 0; i < selectedList.length; i++) {
			        var selectedItem = selectedList[i];
			        var index = this.info.findIndex(item => item.employee_num === selectedItem.employee_num);
			        if (index !== -1) {
			          this.info[index].checked = true;
			        }
			      }
			    },
			    fail(res) {
			      console.log("查询失败")
			    }
			  });
			},
			prevPage() {
			  if (this.page > 1) {
			    this.page--;
			    this.getdata();
			  }
			},
			nextPage() {
			  if (this.page < this.totalPage) {
			    this.page++;
			    this.getdata();
			  }
			},

		},
		onLoad() {
			this.getdata();
		}
	}
</script>

<style>
	.pagination {
		display: flex;
		align-items: center;
		justify-content: left;
		margin-bottom: 20%;
		/* border: 1px solid black; */
	}

	.page-button {
		height: 30px;
		line-height: 30px;
		padding: 0 10px;
		border: 1px solid white;
		border-radius: 5px;
		margin: 0 5px;
		cursor: pointer;
	}

	.page-info {
		font-weight: bold;
	}

	/* 背景色 */
	page {
		background-color: #F0F4F7;
	}

	/* 搜索框 */
	.search {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 120rpx;
		background-color: #fff;
		/* border:1px solid black; */
		margin-bottom: 5%;
	}

	.search .search_in {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 70rpx;
		width: 90%;
		background-color: #F0F4F7;
		border-radius: 10rpx;
	}

	.search_in image {
		height: 45rpx;
		width: 50rpx;
		margin-right: 20rpx;
		/* border:1px solid black; */
	}

	.search input {
		/* border:1px solid black; */
		width: 100%;
	}


	/* 列表 */
	.all {
		margin-bottom: 20%;
		border: 1px solid #F0F4F7;
	}

	.item_all {
		/* border: 1px solid black; */
		margin-bottom: 3%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.position {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 160rpx;
		width: 95%;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 4rpx 4rpx 4rpx gainsboro;
	}

	.vv_1 {
		margin-left: 5%;
		word-break: break-all;
	}

	/* 选中之后的样式设置 */
	.checked_parameter {
		background: #74bfe7;
		color: #fff;
	}

	.footer button {
		width: 100%;
	}

	/* 标题信息 */
	.center {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-bottom: 3%;
	}

	.pages_name {
		/* border: 1px solid black; */
		width: 95%;
		display: flex;
		align-items: center;
	}

	.li {
		/* border: 1px solid black; */
		width: 30rpx;
		height: 30rpx;
		border-radius: 100%;
		background-color: #74bfe7;
	}

	.li2 {
		/* border: 1px solid black; */
		font-size: 110%;
		margin-left: 2%;
	}

	/* 悬浮按钮 */
	.img {
		float: right;
		position: fixed;
		bottom: 15%;
		right: 2%;
		width: 100rpx;
		height: 100rpx;
	}

	/* 确认按钮 */
	.button_sure {
		bottom: 0rpx;
		position: fixed;
		width: 100%;
		height: 8%;
		background: #74bfe7;
		color: white;
		font-size: 105%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
 //查询员工详细信息
  public function select_employee()
  {
    $like_employee_num = input('post.like_employee_num','');
    $page = input('post.page', 1); // 获取当前页数,默认为第一页
    $pageSize = input('post.pageSize', 10); // 获取每页展示的数据条数,默认为10条
    $start = ($page - 1) * $pageSize; // 计算查询的起始位置
    $count = Db::table('hr_employees')->where('employee_num', 'like', '%' . $like_employee_num . '%')->count(); // 查询符合条件的总记录数
    $data['total'] = $count; // 将总记录数返回给前端
    $data['all_info'] = db::table('hr_employees')->where(['employee_num'=>['like', '%' . $like_employee_num . '%']])->limit($start, $pageSize)->select();
    for($i=0;$i<count($data['all_info']);$i++){
         $data['all_info'][$i]['num_name'] =  $data['all_info'][$i]['employee_num'] . '-' . $data['all_info'][$i]['employee_name'];
         $data['all_info'][$i]['checked'] =  false;
    }
    echo json_encode($data);
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/60004.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

gradio创建机器学习的好工具 基本使用和示例

1.gradio介绍 Gradio: 用Python构建机器学习网页APP Gradio是一个开源的Python库,用于构建演示机器学习或数据科学,以及web应用程序。 使用Gradio,您可以基于您的机器学习模型或数据科学工作流快速创建一个漂亮的用户界面,让用户可以”尝试“拖放他们自己的图像、粘贴文本…

HTML5(H5)的前生今世

目录 概述HTML5与其他HTML的区别CSS3与其他CSS版本的区别总结 概述 HTML5是一种用于构建和呈现网页的最新标准。它是HTML&#xff08;超文本标记语言&#xff09;的第五个版本&#xff0c;于2014年由万维网联盟&#xff08;W3C&#xff09;正式推出。HTML5的前身可以追溯到互联…

java实现钉钉群机器人@机器人获取信息后,机器人回复(机器人接收消息)

1.需求 鉴于需要使用钉钉群机器人回复&#xff0c;人们提出的问题&#xff0c;需要识别提出的问题中的关键词&#xff0c;后端进行处理实现对应的业务逻辑 2.实现方式 用户群机器人&#xff0c;附带提出的问题&#xff0c;后端接收消息后识别消息内容&#xff0c;读取到关键…

无人机机巢有哪些,无人机机场/机场的主要分类

随着无人机技术的飞速发展&#xff0c;无人机已经渗透到了物流、农业、救援、公共安全等多个领域。而为了使这些无人机能更加高效、灵活地运行&#xff0c;一个新的概念应运而生&#xff0c;那就是无人机机巢&#xff08;UAV Nest&#xff09;。复亚智能无人机机巢是一种供无人…

MIT 6.824 -- MapReduce -- 01

MIT 6.824 -- MapReduce -- 01 引言抽象和实现可扩展性可用性(容错性)一致性MapReduceMap函数和Reduce函数疑问 课程b站视频地址: MIT 6.824 Distributed Systems Spring 2020 分布式系统 推荐伴读读物: 极客时间 – 大数据经典论文解读DDIA – 数据密集型应用大数据相关论文…

RabbitMQ(一) - 基本结构、SpringBoot整合RabbitMQ、工作队列、发布订阅、直接、主题交换机模式

RabbitMQ结构 Publisher &#xff1a; 生产者 Queue: 存储消息的容器队列&#xff1b; Consumer:消费者 Connection&#xff1a;消费者与消息服务的TCP连接 Channel:信道&#xff0c;是TCP里面的虚拟连接。例如&#xff1a;电缆相当于TCP&#xff0c;信道是一条独立光纤束&…

【JavaEE】Spring Boot - 项目的创建和使用

【JavaEE】Spring Boot 开发要点总结&#xff08;1&#xff09; 文章目录 【JavaEE】Spring Boot 开发要点总结&#xff08;1&#xff09;1. Spring Boot 的优点2. Spring Boot 项目创建2.1 下载安装插件2.2 创建项目过程2.3 加载项目2.4 启动项目2.5 删除一些没用的文件 3. Sp…

python 连接oracle pandas以简化excel的编写和数据操作

python代码 Author: liukai 2810248865qq.com Date: 2022-08-18 04:28:52 LastEditors: liukai 2810248865qq.com LastEditTime: 2023-07-06 22:12:56 FilePath: \PythonProject02\pandas以简化excel的编写和数据操作.py Description: 这是默认设置,请设置customMade, 打开koro…

大厂架构笔记 暂记 :Airbnb,可汗学院,来福车

Airbnb的架构 https://quastor.substack.com/p/airbnbs-architecturehttps://www.youtube.com/watch?vyGOtTd-l_3E我们将介绍每个体系结构&#xff0c;并讨论其优缺点以及迁移Airbnb原因。我们将介绍每个体系结构&#xff0c;并讨论其优缺点以及迁移Airbnb原因。我们将介绍每…

无涯教程-Perl - Subroutines(子例程)

定义子程序 Perl编程语言中 Subroutine子程序定义的一般形式如下: sub subroutine_name {body of the subroutine } 调用该Perl Subroutine的典型方式如下- subroutine_name( list of arguments ); 在Perl 5.0之前的版本中&#xff0c;调用 Subroutine的语法略有不同&…

过去几十年来,主要湖泊遭受了严重的水流失

一项新的研究表明&#xff0c;干旱和潮湿地区的损失是全球性的&#xff0c;可能对地球四分之一的人口产生重大影响。 美国宇航局的地表水和海洋地形任务&#xff08;如图所示&#xff09;在轨道上运行&#xff0c;将扫描湖泊和水库&#xff0c;为全球湖泊水储存估计提供新数据…

【Python机器学习】实验08 决策树

文章目录 决策树1 创建数据2 定义香农信息熵3 条件熵4 信息增益5 计算所有特征的信息增益&#xff0c;选择最优最大信息增益的特征返回6 利用ID3算法生成决策树7 利用数据构造一颗决策树Scikit-learn实例决策树分类决策树回归Scikit-learn 的决策树参数决策树调参 实验1 通过sk…

weblogic XML反序列化分析——CVE-2017-10271

环境 https://vulhub.org/#/environments/weblogic/CVE-2017-10271/ 启动环境 docker-compose up -d代码审计 传入参数 中间跟进函数 最后的出口 没有限制&#xff0c;直接包参数传入xmlDecoder public String readLine() throws IOException {return (String)this.xml…

css实现卡片的左上角有一个三角形的遮盖效果

需求: 卡片的左上角有一个绿色的三角形标签,用来区分状态 实现: .vCard{position: relative;overflow: hidden; } .vCard::before {content: "";position: absolute;top: 0;left: 0;width: 0;height: 0;border-bottom: 20px solid transparent;border-left: 20px …

OPENCV C++(四)形态学操作+连通域统计

形态学操作 先得到一个卷积核 Mat kernel getStructuringElement(MORPH_RECT,Size(5,5)); 第一个是形状 第二个是卷积核大小 依次为腐蚀 膨胀 开运算 闭运算 Mat erodemat,dilatemat,openmat,closemat;morphologyEx(result1, erodemat, MORPH_ERODE, kernel);morphologyEx…

R语言中数据重塑(长宽表的转化)

学习笔记&#xff0c;仅供学习使用。 目录 1-什么是整洁的数据&#xff1f; 2-宽表变成长表 示例1&#xff1a; 示例2&#xff1a; 示例3&#xff1a; 3-长表变宽表 示例1&#xff1a; 示例2&#xff1a; 1-什么是整洁的数据&#xff1f; 按照Hadley的表述&#xf…

利用abapGit的离线模式导出、导入开发对象

1. 背景 abapGit是为ABAP服务器开发的开源Git客户端&#xff0c;用于在ABAP系统之间导入和导出ABAP对象。 使用abapGit&#xff0c;可以将ABAP对象从任何系统导出到另一个系统&#xff0c;通常是从本地系统导出到云&#xff0c;或者从一个云系统导出到另一个云系统。 当然从…

使用Vscode编辑keil工程

一、需要安装的插件 1. Keil Assistant 2. C/C 3. 中文配置&#xff1a; 二、插件配置 1. Keil Assistant 添加Keil的安装路径 接下来就可以使用vscode编辑Keil的工程了&#xff0c;调试编译和下载程序需要返回到Keil中进行操作。 三、Vscode常用快捷键 可以自定义进行配置…

设计模式行为型——中介者模式

目录 什么是中介者模式 中介者模式的实现 中介者模式角色 中介者模式类图 中介者模式代码实现 中介者模式的特点 优点 缺点 使用场景 注意事项 实际应用 什么是中介者模式 中介者模式&#xff08;Mediator Pattern&#xff09;属于行为型模式&#xff0c;是用来降低…

软件为什么要进行性能压力测试?

软件为什么要进行性能压力测试&#xff1f;随着软件应用的不断增多和复杂度的提高&#xff0c;软件的性能对用户体验和业务成功至关重要。性能问题可能导致软件运行缓慢、崩溃或无响应&#xff0c;给用户带来不便甚至损失。为了确保软件能够在高负载和压力下正常运行&#xff0…