Layui中的table模块数据表格,笔者没有找到增加搜索框的方法
最终的效果就是如图这样的
主要修改了1个地方:
1、页面上,toolbar中加上了一个input输入框(你要去掉<div class="layui-btn-container">这个class,不然输入框无法输入)
<script type="text/html" id="toolbar">
<button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
<button class="layui-btn layui-btn-sm" lay-event="generate">生成静态页面</button>
<div class="layui-inline" style="float:right;height:29px;" title="搜索" lay-event="LAYTABLE_SEARCH"><i class="layui-icon layui-icon-search"></i></div>
<input type="text" id="title" style="width:200px;float:right;height:30px;" placeholder="请输入标题" autocomplete="off" class="layui-input">
</script>
2、监听头工具栏事件 加上对搜索的监听,方法即官方提供的表格重载方法
case 'LAYTABLE_SEARCH':
tableIns.reload(
{
where: {
title: $("#title").val()
}
,page: {
curr: 1 //重新从第 1 页开始
}
}
);
break;