layui框架及多条件查询

首先layui框架中有许多的模块比如渲染表格（table）、提示框（layer）、还有日期选择控件（laydate）等等，经常用到的也就几个方法也是很方便，那么先把layui框架将它放入项目中然后引入文件就可以使了，实列：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818115326306.png#pic_center

然后声明layui相关的模块，需要什么模块就创建什么模块如下图所示。

1.模块layer
layer是用来提示用户的窗体，可以设置提示的内容和提示的标题跟表情包。layer能巧妙的利用起来比如查看一张图图片会用layer.open(),在里面设置参数，去掉标题去掉按钮弹出显示的类容，再去设置显示的大小。layer还有其他的情况比如layer.close()关闭询问框/加载层，layer.load()打开加载，还有layer.confirm()弹出提示框用于返回用户点击确认按钮后执行的代码，可以设置提示的内容。

2.模块table
table用于渲染表格，layui框架中table模块结束了老套的布局方式。不用再table标签中写个tr标签后然后写个th标签写标题，不用写个tr标签然后写td标签写内容了。table中有elem、url和cols等等，elem指定哪个渲染表格的table标签，url是条指向控制器的路径，这条路径里面的方法查询出了渲染表格的内容，page设置分页。toolbar绑定工具条，输入绑定的对象id

cols下面又包含了很多，有title用于设置table标签中的标题，type:’numbers’属性是从序号1开始直到表格列的内容没有为止，field值是渲染表格里面的内容，templet属性值是用于设置layui表格自定义列的，在cols里面还可以设置layui表格列的宽度跟字体居中。（图3所示）

3.模块laydate
layui是种日期选择控件初始化，初始值有elem指定要日期控件的元素，type属性，btns设置日期控件按钮，还有一些不常用的值。

图（3）
4.多条件查询
多条件查询就是筛选数据，筛选出你需要的数据出来（如下图）。当我们点击搜索按钮时会筛选出输入值的相关数据，多条件查询是建立在数据之上，数据查询出来后开辟条件在用户输入的值不为空的情况下让查询出来的数据下面的某值等于用户输入的值，然后查询的数据返回到视图再重新加载渲染的表格，查询出来的数据是所筛选的出来的数据与用户输入的值相关。