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

//* /上移 */
		$('#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);

		})
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BootstrapTable是一个基于Bootstrap的可扩展表格插件,用于展示和操作数据。它提供了丰富的功能和样式,以简化开发者对表格数据的交互操作。 BootstrapTable数据交互主要涉及以下几个方面: 1. 数据加载:通过设置数据源,可以从服务器端或本地加载数据。可以通过URL、JSON、对象数组等方式来加载数据数据加载完成后,BootstrapTable会将数据展示在表格中。 2. 分页功能:BootstrapTable提供了分页功能,可以通过设置每页显示的行数、当前页码等参数来控制分页效果。可以实现翻页,快速定位到指定页码等功能。 3. 排序功能:可以通过设置sortable属性来启用列排序功能。用户可以点击表头来进行升序或降序排序,方便快速查找和筛选数据。 4. 搜索功能:可以通过设置search属性来启用搜索功能。用户可以通过输入关键词来搜索表格数据,只显示包含该关键词的行数据,方便数据的查找和筛选。 5. 编辑功能:BootstrapTable提供了编辑功能,允许用户对表格中的数据进行修改。可以通过设置editable属性来启用编辑功能,用户可以双击单元格进行编辑,并将修改后的数据提交到服务器端或本地保存。 6. 删除功能:可以通过设置deleteRow方法来删除表格中指定的行数据。用户可以选择一行或多行进行删除操作,并将删除的数据表格中移除。 7. 增加功能:可以通过设置addRow方法来添加新的行数据。用户可以通过填写表格中的空白行,将新的数据添加到表格中。 总而言之,BootstrapTable通过提供丰富的功能和样式,简化了开发者的数据交互操作。无论是数据加载、分页、排序、搜索、编辑、删除还是增加功能,都可以通过简单的配置和调用方法来实现,提高了开发效率和用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值