项目笔记，bootstrap table数据进行上下移动

原创于 2021-11-09 16:20:53 发布 · 1.3k 阅读

CC 4.0 BY-SA版权

文章标签：

这段代码实现了医嘱的上移和下移功能。当用户点击按钮时，首先获取所有数据并为每条数据添加serialNo属性用于排序。接着获取选中的医嘱，判断是否已处于顶部或底部。然后通过比较和操作数据的serialNo来实现医嘱的移动，并更新数据的排序号。最后，根据新的排序号重新渲染表格。该功能涉及数据操作和用户交互，适用于医疗管理系统。

//* /上移 */
		$('#maintenanceClinic #orderUp').click(function () {
			debugger
			let data = [];
			// 获取所有数据
			var allTableData = $('#maintenanceClinic #patient-main-table').bootstrapTable('getData');
			$.each(allTableData, function (i, node) {
				// 给每一个数据上添加serialNo值，用于排序
				node.serialNo = i + 1;
				if (node.id == null) {
				// id为null时自己添加id，用于做对比
					node.id = 10000 + i
				}
			});
			// 获取到选中的数据
			var selected = $('#maintenanceClinic #patient-main-table').bootstrapTable('getSelections');
			if (selected.length == 0) {
				layer.alert("请选择医嘱！")
				return
			}
			selected.sort(maintenanceReferencePage.compare('serialNo'));
			/* 	//选中行下一个序号 ，这里可以拿到选中数据的上一个数据的序号值，下面有大用*/
			let masterNum = selected[0].serialNo - 2;
			if (masterNum < 0 ) {
				layer.alert("此医嘱已处于最顶端！");
				return
			}
			var newArr = [];
			// 这里循环全部数据，找到选中数据的上一个数据，因为要上移，所以找上一个值
			$.each(allTableData, function (id, node) {
				// 找到选中数据的上一个数据
				if (node.orderNo == allTableData[masterNum].orderNo) {
					newArr.push(node);
					//先赋无穷值，防止冲突
					// 给选中值的上一个值赋一个无穷大，下面用于判断并且给序号
					node.serialNo = node.serialNo + 10000;

				}
			});
			let selectedList = [];
			// 所有数据的flag改为false
			$.each(allTableData, function (j, node) {
				node.flag = false;
			});
			// 循环所有数据
			$.each(allTableData, function (j, node) {
				// 所有数据和选中的数据做对比，相同了在下面将flag改为ture，并且push到一个新的数组
				if (allTableData[j].id == selected[0].id) {
					for (let i = 0; i < selected.length; i++) {
						if (selected[i].id == allTableData[j].id) {
							allTableData[j].flag = true;
							selectedList.push(selected[i]);
						}
						j++;
					}
				}
			});

			let masterorder = newArr.length;
			// 循环所有数据
			$.each(allTableData, function (id, node) {
				// 循环选中的数据
				$.each(selectedList, function (id, node1) {
					if (node.id == node1.id) {
						// 给选中的数据排序号减一，向上走一位。
						node.serialNo = node.serialNo - masterorder;
					}
				});
				//无穷值还原，这个是选中数据的上一个数据，将它的排序号减一，让它向下走一位。
				if (node.serialNo > 10000) {
					node.serialNo = node.serialNo - 10000 + (selectedList.length)
				}
				if (node.id >=10000&&node.id<20000) {
					node.id= null
				}
			});

			// 根据排序号使用sort方法重新排序，重新渲染就好了
			allTableData.sort(maintenanceReferencePage.compare('serialNo'));
			console.log(allTableData)
			$('#maintenanceClinic #senyint-table-main').empty();
			let str = `<table class="table-no-border table-striped" id="patient-main-table" ></table>`
			$('#maintenanceClinic #senyint-table-main').append(str);
			maintenanceReferencePage.loadTemplateTable();
			maintenanceReferencePage.getCombination(allTableData, data);
			$("#maintenanceClinic #patient-main-table").bootstrapTable('load', data);

		})

		/*  //下移 */
		$('#maintenanceClinic #orderDown').click(function () {
			debugger
			let data = [];
			
			var allTableData = $('#maintenanceClinic #patient-main-table').bootstrapTable('getData');
			$.each(allTableData, function (i, node) {
				node.serialNo = i + 1;
				// id为null时自己添加id，用于做对比
				if (node.id == null) {
					node.id = 10000 + i
				}
			});
			// 获取到选中的数据
			var selected = $('#maintenanceClinic #patient-main-table').bootstrapTable('getSelections');
			if (selected.length == 0) {
				layer.alert("请选择医嘱！")
				return
			}
			let selectedList = [];
			// 所有数据的flag改为false
			$.each(allTableData, function (j, node) {
				node.flag = false;
			});
			// 循环所有数据
			$.each(allTableData, function (j, node) {
				// 所有数据和选中的数据做对比，相同了在下面将flag改为ture，并且push到一个新的数组
				if (allTableData[j].id == selected[0].id) {
					for (let i = 0; i < selected.length; i++) {
						if (selected[i].id == allTableData[j].id) {
							allTableData[j].flag = true;
							selectedList.push(selected[i]);
						}
						j++;
					}
				}
			});

			selectedList.sort(maintenanceReferencePage.compare('serialNo'));
			/* 	//选中行下一个序号 ，这里可以拿到选中数据的下一个数据的序号值，下面有大用*/
			let masterNum = selectedList[selectedList.length - 1].serialNo;
			if (masterNum > allTableData.length - 1) {
				layer.alert("此医嘱已处于最底端！");
				return
			}
			var newArr = [];
			// 这里循环全部数据，找到选中数据的下一个数据，因为要下移，所以找下一个值
			$.each(allTableData, function (id, node) {
				if (node.orderNo == allTableData[masterNum].orderNo) {
					newArr.push(node);
					/* //先赋无穷值，防止冲突 */
					// 给选中值的下一个值赋一个无穷大，下面用于判断并且给序号
					node.serialNo = node.serialNo + 10000;
				}
			});
			let masterorder = newArr.length;
			// 这里循环所以数据
			$.each(allTableData, function (id, node) {
				// 循环被选中的数据
				$.each(selectedList, function (id, node1) {
					// 找到被选中的数据，给他的排序号加上一，排序就向下了
					if (node.id == node1.id) {
						node.serialNo = node.serialNo + masterorder;
					}
				});
				/* //无穷值还原 */
				// 这个是选中数据的下一个数据，因为上面给这个数据赋值了无穷大
				if (node.serialNo > 10000) {
					// 给选中数据的下一个数据排序减一，让他向上走一位
					node.serialNo = node.serialNo - 10000 - (selectedList.length)
				}
				if (node.id >=10000&&node.id<20000) {
					node.id= null
				}
			});
			// 根据排序号使用sort方法重新排序，重新渲染就好了
			allTableData.sort(maintenanceReferencePage.compare('serialNo'));
			console.log(allTableData)
			$('#maintenanceClinic #senyint-table-main').empty();
			let str = `<table class="table-no-border table-striped" id="patient-main-table" ></table>`
			$('#maintenanceClinic #senyint-table-main').append(str);
			maintenanceReferencePage.loadTemplateTable();
			maintenanceReferencePage.getCombination(allTableData, data);
			$("#maintenanceClinic #patient-main-table").bootstrapTable('load', data);

		})