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; // 获取对应的条目idvar 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.valuethis.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; // 获取对应的条目idvar 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.valuethis.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);}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SSH 认证原理

SSH 认证原理

SSH协议登录服务器&#xff1a; $ ssh userhost 主要有两种登录方式&#xff1a;第一种为密码口令登录&#xff0c;第二种为公钥登录 密码口令登录 通过密码进行登录&#xff0c;主要流程为&#xff1a; 1、客户端连接上服务器之后&#xff0c;服务器把自己的公钥传给客户端…
阅读更多...
界面控件DevExpress.Drawing图形库早期增强功能分享

界面控件DevExpress.Drawing图形库早期增强功能分享

众所周知&#xff0c;DevExpress在v22.2发布周期中引入了全新的DevExpress.Drawing图形库&#xff08;并且已经在随后的小更新中引入了一系列增强功能&#xff09;。 在这篇博文中&#xff0c;我们将总结在DevExpress v23.1中解决的一些问题&#xff0c;以及在EAP构建中为以下…
阅读更多...
C++中点云聚类算法的实现与应用探索

C++中点云聚类算法的实现与应用探索

第一部分&#xff1a;C中点云聚类算法的实现与应用 在当今的计算机视觉领域&#xff0c;点云数据是一种重要的三维数据类型&#xff0c;它能有效表达三维物体的形状信息。然而&#xff0c;由于点云数据的无序性和稀疏性&#xff0c;对其进行分析与处理的难度较大。本文将介绍如…
阅读更多...
Android 13 Hotseat定制化修改——006 hotseat图标禁止移动到Launcher中

Android 13 Hotseat定制化修改——006 hotseat图标禁止移动到Launcher中

目录 一.背景 二.方案 三.具体实践 一.背景 客户定制需要修改让hotseat中的icon不要移动到Launcher中，所以需要进行定制 二.方案 原生的Hotseat与Launcher是可以相互移动的，然后现在的需求是Hotseat中的图标只能在Hotseat中移动，所以需要做下限制 思路：在事件拦截的地…
阅读更多...
代码随想录算法训练营day59

代码随想录算法训练营day59

文章目录 Day59 下一个更大元素II题目思路代码 接雨水题目思路代码 Day59 下一个更大元素II 503. 下一个更大元素 II - 力扣&#xff08;LeetCode&#xff09; 题目 给定一个循环数组&#xff08;最后一个元素的下一个元素是数组的第一个元素&#xff09;&#xff0c;输出每…
阅读更多...
ChatGPT“侵入”校园,教学评价体制受冲击，需作出调整

ChatGPT“侵入”校园,教学评价体制受冲击，需作出调整

北密歇根大学的教授奥曼在学生作业中发现了一篇关于世界宗教的“完美论文”。“这篇文章写得比大多数学生都要好......好到不符合我对学生的预期&#xff01;”他去问ChatGPT&#xff1a;“这是你写的吗&#xff1f;”ChatGPT回答&#xff1a;“99.9%的概率是的。” ChatGPT“侵…
阅读更多...
【Axure 教程】动态面板

【Axure 教程】动态面板

【动态面板】是 Axure 中另外一个神级的元件&#xff0c;它的江湖地位可以说跟【中继器】不相上下&#xff0c;【动态面板】提供了简单的配置&#xff0c;却可以实现非常丰富的效果&#xff0c;在实际设计中应用非常广泛。 对于刚入门的产品经理来说&#xff0c;学习【动态面板…
阅读更多...
AndroidStudio学习笔记

AndroidStudio学习笔记

AndroidStudio学习笔记/踩坑 webview组件和其他组件起冲突问题解决方法原因 webview组件和其他组件起冲突 问题 webview和NestedScrollView组件一起使用时,会出现webview无法滑动的问题 解决方法 NestedScrollView nestedScrollView getView().findViewById(R.id.mine_scro…
阅读更多...
Bootload U-Boot分析

Bootload U-Boot分析

Bootloader是在操作系统运行之前执行的一段小程序。通过这段小程序可以初始化硬件设备、建立内存空间的映射表&#xff0c;从而建立适当的系统软硬件环境&#xff0c;为最终调用操作系统内核做好准备。 对于嵌入式系统&#xff0c;Bootloader是基于特定硬件平台来实现的。因此…
阅读更多...
C++11之右值引用

C++11之右值引用

C11之右值引用 传统的C语法中就有引用的语法&#xff0c;而C11中新增了的 右值引用&#xff08;rvalue reference&#xff09;语法特性&#xff0c;所以从现在开始我们之前学习的引用就叫做左值引用&#xff08;lvalue reference&#xff09;。无论左值引用还是右值引用&#…
阅读更多...
题目：2293.极大极小游戏

题目：2293.极大极小游戏

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;2293. 极大极小游戏 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 按要求模拟即可。 解题代码&#xff1a; class Solution {public int minMaxGame(int[] nums) {int nnums.length;whi…
阅读更多...
BIO 阻塞式IO

BIO 阻塞式IO

BIO 阻塞式IO Java BIO 就是传统的 Java I/O 编程&#xff0c;其相关的类和接口在 java.io。 BIO(BlockingI/O)&#xff1a;同步阻塞&#xff0c;服务器实现模式为一个连接一个线程&#xff0c;即客户端有连接请求时服务器端就需要启动一个线程进行处理&#xff0c;如果这个连…
阅读更多...
面试热题（滑动窗口最大值）

面试热题（滑动窗口最大值）

给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 输入&#xff1a;nums [1,3,-1,-3,5,3,6,7], k 3 输出&#xff1a;[3,3,5,…
阅读更多...
【数据分析】pandas 一

【数据分析】pandas 一

目录 一&#xff0c;pandas简介&#xff1a; 二&#xff0c;pandas数据结构Series简介&#xff1a; 2.1 data为ndarray 2.2 data为字典 三&#xff0c;Serise切片操作&#xff1a; 四&#xff0c;Series性质&#xff1a; 4.1 Series类似于numpy,字典 4.2 矢量化操作和标…
阅读更多...
Flask进阶：构建RESTful API和数据库交互

Flask进阶：构建RESTful API和数据库交互

在初级教程中&#xff0c;我们已经介绍了如何使用Flask构建基础的Web应用。在本篇中级教程中&#xff0c;我们将学习如何用Flask构建RESTful API&#xff0c;以及如何使用Flask-SQLAlchemy进行数据库操作。 一、构建RESTful API REST&#xff08;Representational State Tran…
阅读更多...
【LeetCode】88. 合并两个有序数组 - 双指针

【LeetCode】88. 合并两个有序数组 - 双指针

这里写自定义目录标题 2023-8-7 22:35:41 88. 合并两个有序数组 双指针 2023-8-7 22:35:41 class Solution {public void merge(int[] nums1, int m, int[] nums2, int n) {int last m n ;while(n > 0){if(m > 0 && nums2[n-1] > nums1[m-1]){nums1[las…
阅读更多...
objectMapper.getTypeFactory().constructParametricType 方法的作用和使用

objectMapper.getTypeFactory().constructParametricType 方法的作用和使用

在使用 Jackson 库进行 JSON 数据的序列化和反序列化时&#xff0c;经常会使用到 ObjectMapper 类。其中&#xff0c;objectMapper.getTypeFactory().constructParametricType 方法用于构造泛型类型。 具体作用和使用如下&#xff1a; 作用&#xff1a; 构造泛型类型&#x…
阅读更多...
Linux软件包管理

Linux软件包管理

Linux软件包管理 一.软件运行环境基础 1.gcc编译程序的大致过程 gcc 编译程序主要经过四个过程&#xff1a; 处理&#xff08;Pre-Processing&#xff09; 译 &#xff08;Compiling&#xff09; 编 &#xff08;Assembling&#xff09; 接 &#xff08;Linking&#xff09; …
阅读更多...
CentOS下ZLMediaKit的可视化管理网站MediaServerUI使用

CentOS下ZLMediaKit的可视化管理网站MediaServerUI使用

一、简介 按照 ZLMediaKit快速开始 编译运行ZLMediaKit成功后&#xff0c;我们可以运行其合作开源项目MediaServerUI&#xff0c;来对ZLMediaKit进行可视化管理。通过MediaServerUI&#xff0c;我们可以实现在浏览器查看ZLMediaKit的延迟率、负载率、正在进行的推拉流、服务器…
阅读更多...
并发——线程与进程的关系,区别及优缺点？

并发——线程与进程的关系,区别及优缺点？

文章目录 1. 图解进程和线程的关系2.程序计数器为什么是私有的?3. 虚拟机栈和本地方法栈为什么是私有的?4. 一句话简单了解堆和方法区5. 说说并发与并行的区别? 从 JVM 角度说进程和线程之间的关系 1. 图解进程和线程的关系 下图是 Java 内存区域&#xff0c;通过下图我们…
阅读更多...
最新文章

Copyright @ 2022~2023