layui怎么点击搜索跳转到新窗口-Layui教程-PHP中文网

必须手动构造请求并触发新窗口打开，不能依赖table.reload()；get方式用window.open()拼接编码后的url，post方式用隐藏表单提交，新开tab则需tabadd配合table.render()动态渲染。

layui怎么点击搜索跳转到新窗口

不能靠 table.reload() 实现跳转，它只刷新当前表格数据；必须手动构造请求并触发新窗口打开。

用 `window.open()` 拼接 GET 参数跳转

这是最常用、最可控的方式，适用于后端接口支持 GET 查询的场景。

获取搜索框值，用 encodeURIComponent() 编码，避免空格、&、/ 等破坏 URL 结构
拼出完整 URL，例如 '/api/list?keyword=' + encodeURIComponent(val)
调用 window.open(url, '_blank')，显式声明 _blank 可减少被拦截概率
确保按钮点击事件不绑定 table.reload()，否则会干扰原有逻辑
后端接收参数名（如 keyword）必须和你拼的字段名完全一致

示例代码：

$('#searchBtn').on('click', function() {
  var keyword = $('#keyword').val().trim();
  if (!keyword) return;
  var url = '/api/list?keyword=' + encodeURIComponent(keyword);
  window.open(url, '_blank');
});

后端只认 POST？用隐藏表单提交

当接口强制要求 POST（比如含敏感字段、或参数过长），window.open() 的 GET 方式失效，得伪造表单提交。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

动态创建 <form method="post" target="_blank"></form>，target 必须设为 _blank
每个搜索参数生成一个 <input type="hidden"> 插入表单
调用 form.submit() 后立即 form.remove()，防止 DOM 泄漏
部分浏览器对脚本触发的 submit() 开新窗口有限制，建议加 rel="noopener" 属性提升兼容性

示例片段：

$('#searchBtn').on('click', function() {
  var keyword = $('#keyword').val().trim();
  if (!keyword) return;

  var form = document.createElement('form');
  form.method = 'post';
  form.target = '_blank';
  form.rel = 'noopener';

  var input = document.createElement('input');
  input.type = 'hidden';
  input.name = 'keyword';
  input.value = keyword;
  form.appendChild(input);

  document.body.appendChild(form);
  form.submit();
  form.remove();
});

新开 Tab 页展示表格？别直接 reload，要 tabAdd + render

如果目标不是跳转到纯结果页，而是“在当前页面新开一个 Tab，里面放带搜索结果的 layui 表格”，那就不能走 URL 跳转路线，得用 element.tabAdd() 和 table.render() 配合。

tabAdd() 的 id 必须唯一，推荐用时间戳或关键词哈希，如 'search-result-' + Date.now()
Tab 内容区需提前预留空容器，且 id 与 table.render().elem 匹配
table.render() 的 url 推荐写成函数，实时读取搜索值并编码：url: function() { return '/api/list?keyword=' + encodeURIComponent($('#keyword').val()); }
务必在 tabAdd() 的回调里执行 table.render()，确保 DOM 已挂载完成
不要指望新 Tab 里还能直接访问原页面的 $('#keyword').val()——参数必须显式传进去，比如存进 Tab 的 lay-id 或自定义 data-* 属性中再解析