form.on('submit(webform)', function(data){
setTimeout(function(){
select();
},200);//延迟搜索,因为树状列表展开与查询渲染存在冲突
});
function select() {
var keyword = $('#edt-search').val().trim();
var searchCount = 0;
var $tbody = $('.layui-table-main tbody');
var $rows = $tbody.find('tr');
if (keyword === '') {
layer.msg("请输入搜索内容", { icon: 5 });
$rows.show(); // 显示所有行
$rows.find('td').css('background-color', 'transparent'); // 清除所有单元格背景色
return;
}
var firstMatch = null;
// 遍历每一行
$rows.each(function() {
var $row = $(this);
var uid = $row.attr('u_id')
var $cells = $row.find('td');
var rowHasMatch = false; // 标记当前行是否匹配
// 遍历当前行的每个单元格
$cells.each(function() {
var $cell = $(this);
var text = $cell.text();
if (text.indexOf(keyword) >= 0) {
rowHasMatch = true; // 当前行有匹配
$cell.css('background-color', 'rgba(250,230,160,0.5)'); // 高亮匹配单元格
searchCount++;
if (!firstMatch) firstMatch = $cell;
// 将data-index = uid-1 的 也显示出来
var uid = $row.attr('u_id');
var targetDataIndex = uid - 1;
var $relatedRow = $tbody.find('tr[data-index="' + targetDataIndex + '"]');
if ($relatedRow.length > 0) { // 确保找到了相关行
$relatedRow.show(); // 显示相关行
}
return false; // 相当于 break; 退出 .each() 循环
} else {
$cell.css('background-color', 'transparent'); // 清除不匹配单元格背景色
}
});
// 根据当前行是否有匹配来显示或隐藏整行
if (rowHasMatch) {
$row.show();
} else {
$row.hide();
}
});
// 处理结果提示及滚动
if (searchCount === 0) {
layer.msg("无匹配", { icon: 4 });
} else if (firstMatch) {
var scrollContainer = $("#scrolldiv");
var scrollPosition = firstMatch.offset().top - scrollContainer.offset().top + scrollContainer.scrollTop() - 50;
scrollContainer.animate({ scrollTop: scrollPosition }, 500);
}
}
lyaui.treeGrid 实现搜索选中
发布于 2025-02-06 76 次阅读
Comments NOTHING