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

最新推荐文章于 2024-04-26 10:50:51 发布

25号底片~

最新推荐文章于 2024-04-26 10:50:51 发布

阅读量2.2k

点赞数

分类专栏： uni-app 文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/weixin_46001736/article/details/132104730

版权

uni-app 专栏收录该内容

88 篇文章 2 订阅

订阅专栏

效果

代码解析

一、标签-列表

<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);
  }