单元格合并后实现内容的--模糊查询

单元格合并之后，对某一内容进行查询时，怎样展示

效果：

思路:

在进行前端开发时，特别是在处理包含单元格合并的复杂表格以及实现模糊查询功能时，我们采取不影响后端数据库的方法。当用户触发搜索功能时，首先执行的操作是对当前展示的表格数据进行清空，以确保每次查询结果的独立性和准确性。

具体步骤如下：

1. 前端清空表格：在用户输入关键词并点击搜索按钮时，前端首先将表格的内容全部清除，以便重新加载匹配查询条件的新数据。

2. 执行模糊查询：前端根据用户输入的关键字实时发起 AJAX 请求，向后端发送模糊查询请求。

3. 接收并渲染数据：后端接收到模糊查询请求后，在数据库中进行检索，并返回符合查询条件的数据列表。前端接收到响应后，将这些数据按照表格结构和合并规则重新插入到前端表格中。

4. 保持单元格合并状态：在插入新数据的同时，前端需特别注意维持原有的单元格合并状态，对于查询结果中原本隐藏的单元格，做临时显示处理。

通过这样的设计思路，我们能够在保证用户体验的基础上，减少后端数据库的压力。

前端代码：

<ul class="input-group" style="list-style-type: none;padding-top: 10px;display: flex">
	<li>
		<input type="search" id="biangeNeirong"  class="form-control" style="border:solid 1px #c40000;height: 40px;width: 240px" th:if="${BGneirong == '' }" value="" placeholder="请输入需要搜索的内容">
		<input type="search" id="biangeNeirong"  class="form-control" style="border:solid 1px #c40000;height: 40px;width: 240px" th:if="${BGneirong != '' }" th:value="${BGneirong}" placeholder="请输入需要搜索的内容">
	</li>
	<li>
		<button type="button" class="button" id="searchBtn" style="height: 40px;" th:onclick="searchNR([[${area.getId()}]])">搜索<sapn class="fas fa-search" /></button>
	</li>
</ul>

function searchNR(regionID) {
	var BGneirong = document.getElementById("biangeNeirong").value;
	$.ajax({
		type: "POST",
		dataType: "json",
		url: "../PatentAPI/searchNR",
		data: {
			"BGneirong" : BGneirong,
			"regionID" : regionID,
		},
		success: function (data) {
			if (data.code==200){
				// console.log(JSON.stringify(data.data, null, 2)); // 带有缩进以便于阅读
				renderTable(data.data);
			}else if (data.code==400){
				layer.alert(data.message)
			}
		},
		error: function(data) {
			layer.alert("错误:"+data.responseText);
		}
	});
}
function renderTable(data) {
	var tableBody = document.getElementById("BGtbody");
	tableBody.innerHTML = '';
	
    console.log("已清空表格，开始遍历！")
	data.forEach(function(rowData, rowIndex) {
		var row = document.createElement('tr');
		rowData.forEach(function(cellData) {
			var cell = document.createElement('td');
			// 根据cellData的内容和属性决定是否隐藏或合并单元格
			if (cellData.main_bank === 1) {
				var content = document.createElement('a');
				content.style.cursor = 'pointer';
				content.style.color = '#595959';
				content.style.textdecoration = 'none';
				var span = document.createElement('span');
				if (cellData.hideorshow === 1) {
					span.textContent = cellData.neirong;
				} else {
					span.textContent = '****';
				}
				content.appendChild(span);
				cell.appendChild(content);
			} else if (cellData.main_bank === 0 && cellData.hideorshow === 1) {
				// 显示原本隐藏的单元格内容
				var hiddenContent = document.createElement('span');
				hiddenContent.textContent = cellData.neirong;
				cell.appendChild(hiddenContent);
			}
			row.appendChild(cell);
		});
		tableBody.appendChild(row);
	});
}

 以上只是平时的一些代码记录，有问题可以直接指出~~~