lyaui.treeGrid 实现搜索选中

发布于 2025-02-06  76 次阅读


       

 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);
            }
        }
ℳ๓古依博學之誌°ꦿ⁵²º᭄
最后更新于 2025-02-06