table.render({ // ... toolbar: '<div class="layui-inline"> <input class="layui-input" name="search" placeholder="输入关键字搜索"> </div>', done: function() { layui.form.render(); } }); input 无法被聚焦

可能是因为在渲染表格时，input元素还没有被DOM加载完毕，所以无法聚焦。尝试在done回调函数中加入以下代码：

done: function() {
  layui.form.render();
  var inputElem = document.querySelector('input[name="search"]');
  inputElem.focus();
}

这样就可以在渲染完毕后立即聚焦到input元素了。如果还有问题，请提供更详细的代码和场景描述，我可以帮您进一步排查问题。

相关问题

layui-table 表头添加筛选

在 layui-table 中添加表头筛选的方法如下：

1.设置表头筛选的数据

可以通过设置`toolbar`属性来设置表头的筛选数据，例如：

var tableIns = table.render({
    elem: '#test'
    ,url:'/demo/table/user/'
    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    ,cols: [[
        {type: 'checkbox', fixed: 'left'}
        ,{field:'id', title:'ID', width:80, sort: true}
        ,{field:'username', title:'用户名', width:120}
        ,{field:'email', title:'邮箱', width:150}
        ,{field:'sign', title:'签名'}
        ,{field:'sex', title:'性别', width:80}
        ,{field:'city', title:'城市', width:100}
        ,{field:'experience', title:'积分', width:80, sort: true}
        ,{field:'logins', title:'登入次数', width:100, sort: true}
        ,{field:'status', title:'状态', width:100, sort: true}
        ,{field:'ip', title:'IP', width:120}
        ,{field:'create_time', title:'创建时间', width:150, sort: true}
        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
    ,page: true
});

在上面的代码中，`toolbar`属性绑定了一个左侧模板（即下面代码中的`#toolbarDemo`），在该模板中可以设置表头的筛选数据，例如：

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-inline">
            <select name="city">
                <option value="">全部</option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">杭州</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <select name="status">
                <option value="">全部</option>
                <option value="0">正常</option>
                <option value="1">禁用</option>
            </select>
        </div>
    </div>
</script>

在上面的代码中，我们设置了两个下拉框，分别用于筛选城市和状态。

2.监听表头筛选事件并重新加载表格数据

在表头筛选数据改变时，我们需要监听表头的`lay-filter`属性，并重新加载表格数据。在下面的示例中，我们监听了两个下拉框的`select`事件，并重新加载了表格数据：

//监听表头筛选数据改变事件
table.on('toolbar(test)', function(obj){
    var city = $('select[name="city"]').val();
    var status = $('select[name="status"]').val();
    table.reload('test', {
        where: { //设定异步数据接口的额外参数，任意设
            city: city,
            status: status
        }
        ,page: {
            curr: 1 //重新从第 1 页开始
        }
    });
});

在上面的代码中，我们通过`$('select[name="city"]').val()`和`$('select[name="status"]').val()`获取了两个下拉框的值，并重新加载了表格数据。其中，`table.reload()`方法中的`test`参数表示表格的ID，可以根据实际情况进行修改。

layui table 工具栏添加文本输入框

要在 layui table 的工具栏中添加文本输入框，可以使用 layui 的 form 模块中的 input 输入框组件。具体实现步骤如下：

1. 在 layui table 的 toolbar 中添加一个 div 元素，用于容纳输入框。

toolbar: '<div class="layui-inline">
             <input class="layui-input" name="search" placeholder="输入关键字搜索">
          </div>'

2. 在表格渲染完成后，通过 layui 的 form 模块渲染输入框组件。

table.render({
  // ...
  toolbar: '<div class="layui-inline">
             <input class="layui-input" name="search" placeholder="输入关键字搜索">
           </div>',
  done: function() {
    layui.form.render();
  }
});

这样就可以在 layui table 的工具栏中添加一个文本输入框了。需要注意的是，输入框的样式需要自己调整。