uni-app: función de selección múltiple por paginación

Mobile 2023-08-18 22:01:55 views: null

Efecto

análisis de código

1. Lista de etiquetas

<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}" : Agrega un estilo marcado a la lista

:data-id="item.employee_num" : datos seleccionados

@tap="selectcustomer" : toque para seleccionar

 2. Etiqueta - paso de página

<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" : Evento de clic en la página anterior

{ { página }} : número de página actual

{ { totalPage }} : Número total de páginas

@tap="nextPage" : evento de clic en la página siguiente

3. js-datos

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: [], // 选中的员工信息列表(多选存储的数组)
        }
},

4. js- función de selección múltiple

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;: Haga clic en los datos de la lista, los datos obtenidos item.employee_num (:data-id="item.employee_num") se almacenan en la variable this_checked
  • var List = this.info; : Definir Lista como todos los datos de los empleados que se consultarán
  • var listaseleccionada = this.selectedList;:  define listaseleccionada como una variable listaseleccionada en datos
  • for (var i = 0; i < List.length; i++) { : recorrer todos los datos de los empleados
  • if (List[i].employee_num == this_checked) { : determina si toda la información de los empleados es igual al valor obtenido al hacer clic en la lista (encontrar la posición de los datos en los que se hizo clic en la matriz total)
  • if (List[i].checked) { : si está en la matriz total, se hace clic en esta fila de datos y se selecciona esta fila de datos
  • List[i].checked = false; : cambia su estado marcado a falso (desmarcado, marcado y pulsado para desmarcarse)
  • var index = selectedList.findIndex(item => item.employee_num === List[i].employee_num); : busque el elemento selectedListen la matriz cuyos employee_numatributos son iguales a la matriz total y luego devuelva su valor de índice.List[i].employee_num                
  • if (index !== -1) { : indica existenciaselectedList数组与List数组中employee_num相等的数据
  • selectedList.splice(index, 1); } } : splice(index, 1)en forma de , significa selectedListeliminar 1 elemento en la posición de índice especificada de la matriz (es decir, eliminar el elemento que cumple las condiciones encontradas).
  • else { // no seleccionado, establecer el estado seleccionado y agregar a la lista seleccionada
  • List[i].checked = true; : si no está seleccionado, establezca el estado seleccionado de estos datos en la matriz total en verdadero y déjelo seleccionar
  • selectedList.push(List[i]);  } : y selectedListagregue esta línea de datos a la matriz
  • this.info = List; : vuelve a actualizar la matriz total
  • this.selectedList = selectedList; : vuelve a actualizar la matriz seleccionada

 Cinco, botón de confirmación 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 : Indica que no hay datos seleccionados

uni.$emit('empleado', this.selectedList); : Indica que los datos seleccionados pasarán a la página anterior

Seis, consulta js-fuzzy

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

this.page = 1; : inicializa la página a 1, y la página de inicio predeterminada es la primera página
al consultar

Seven, js-get data (todos los datos de los empleados)

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,: datos entrantes de consulta difusa
  • página: esta.página,: página actual
  • pageSize: this.pageSize : Cuántos datos hay en esta página
  • var selectedList = this.selectedList.slice(); : crea una nueva matriz de this.selectedList que contiene el rango especificado de elementos en la matriz original. Al asignarlo a una variable selectedList, esta copia se puede usar en código posterior sin modificar directamente la matriz original this.selectedList.
  • this.totalPage = Math.ceil(res.data.total / this.pageSize); : número total de páginas (datos totales/datos por página)

 Ocho, paso de página js

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

 Código completo:

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

Supongo que te gusta

Origin blog.csdn.net/weixin_46001736/article/details/132104730
Recomendado
Clasificación
Diario
Más
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)
2024-05-02(0)

Code World

© 2018 codetd.com