NCC中基于CSS选择器实现前端批量勾选复选框功能

最新推荐文章于 2024-05-23 15:23:28 发布

Sillage·

最新推荐文章于 2024-05-23 15:23:28 发布

阅读量123

点赞数

分类专栏： NCC低代码平台文章标签：前端 css

本文链接：https://blog.csdn.net/qq_41855955/article/details/135059208

版权

NCC低代码平台专栏收录该内容

6 篇文章 2 订阅

订阅专栏

环境信息

版本号

2005

示例单据

价格审批单

业务需求

需求描述

客户在使用价格审批单时，存在以下场景；
一张价格审批单对应多行表体，表体过多的情况下需要客户手动勾选订货按钮，并维护价格失效时间，由于不方便使用，故希望能在表头增加价格生效时间，价格失效时间，订货字段，并在编辑时批量更新表体

需求分析

由于订货复选框勾选时涉及很多后端逻辑，研究对应后端逻辑费事费力，故采用采用css选择器命中元素,dom更新事件方式实现需求

需求实现

模版设置

在表头新增批量订货字段
名称：批量订货
编码：batch_border
数据类型：逻辑
组件类型：开关型复选框
在这里插入图片描述

增加表头编辑后事件

找到编辑前事件源码，本次示例单据为价格审批单，故源码路径如下
src\purp\pp\priceaudit\card\afterEvents\headAfterEvent.js
在afterEvent方法中增加以下代码

if ('batch_border' == key ) {
		console.log('batch_border..编辑后事件触发...')
		//add by CYQ 2023年12月18日 增加批量选择订货优化,采用css选择器命中元素,dom更新事件方式实现
		let checkboxes = document.querySelectorAll("input[type=checkbox][attrcode=border]");
		// 遍历所有复选框，并触发点击事件
		checkboxes.forEach(function(checkbox) {
			checkbox.click();
		});
		console.log('batch_border..编辑后事件触发结束...')
		return;
	}