![在这里插入图片描述](https://img-blog.csdnimg.cn/aa91100ff6e548b8a029ac2e93e937c8.png
先引入需要的js css
如果没有 formSelects-v4.css 这个引入 样式无法出来 这个应该很好下载 实在找不到再来找我
HTML代码
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-md2">
<div class="layui-form-item" class="col-sm-2">
<label class="layui-form-label">公司名称</label>
<div class="layui-input-block">
<select name="companys" xm-select="select1" id="companys">
{foreach $list as $vo}
<option value=" {$vo.id}"> {$vo.shortCompanyName}</option>
{/foreach}
</select>
</div>
</div>
</div>
<div class="layui-col-md2">
<div class="layui-form-item" class="col-sm-2">
<label class="layui-form-label">月份</label>
<div class="layui-input-block">
<input type="text" class="layui-input" name="month" id="test1">
</div>
</div>
</div>
<div class="layui-col-md3">
<button class="layui-btn" id="sousuo">搜索</button>
</div>
</div>
</div>
js代码
//全局定义一次, 加载formSelects
layui.config({
base: '/newLayui/' //此处路径请自行处理, 可以使用绝对路径
}).extend({
formSelects: 'formSelects-v4'
});
layui.use(['layer', 'form', 'table', 'formSelects', 'laydate'], function () {
var layer = layui.layer,
form = layui.form,
table = layui.table,
formSelects = layui.formSelects,
laydate = layui.laydate;
// var index = layer.load(1);
var loading = layer.load(0, {
shade: false,
});
laydate.render({
elem: '#test1', //指定元素
type: 'month'
});
//第一个实例
table.render({
elem: '#demo',
limit: 20,
size: 'lg',
method: 'POST',
url: '/***************', //数据接口
page: true, //开启分页
where: {
},
totalRow: true,
toolbar: '#toolbarDemo', //开启头部工具栏,并为其绑定左侧模板
limits: [20, 40, 60, 80, 100],
limit: 20,
cols: [
[ //表头 第一行
// { type: 'checkbox', fixed: 'left',rowspan: 2, },
{
field: 'id',
title: 'ID',
align: 'center',
rowspan: 2,
// style: 'background-color: #5FB878; color: #fff',
totalRowText: "合计"
},
此处省略***********
]
],
id: 'testReload',
parseData: function (res) { //res 即为原始返回的数据
// console.log(res.data)
}, done: function (res) { //返回数据执行回调函数
layer.close(loading); //返回数据关闭loading
}
});
//筛选条件
var $ = layui.$,
active = {
reload: function () {
//获取多选
var companys = formSelects.value('select1', 'valStr');
// console.log($('#start').val())
table.reload('testReload', {
page: {
curr: 1 //重新从第 1 页开始
},
where: {
},
});
}
};
// 监听搜索按钮
$("#sousuo").on('click', function () {
var type = 'reload';
active[type] ? active[type].call(this) : '';
});
})