1.下载 xm-select 下拉框
下载地址:https://gitee.com/maplemei/xm-select/releases/tag/v1.2.4
下载后解压,复制 xm-select.js 到项目中。
放在 js 文件夹中。
2.使用 xm-select 下拉框
在项目 layui.js 后面引入 xm-select.js 文件。
顶部搜索中的图书分类下拉框,修改为使用 xm-select 下拉框。
加载数据,AJAX 请求获取图书分类列表,将数据展示到图书分类 xm-select 下拉框中。
运行项目,使用 Chrome 浏览器打开。 查看图书分类 xm-select 下拉框。
3.清空 xm-select 下拉框
xm-select 下拉框开启搜索模式,修改表单提交向后端发送的 name 属性名,
给清空按钮添加:id="reset"。
通过 id 获取到清空按钮,然后给清空按钮添加点击事件,事件中清空 xm-select 图书分类下拉框。
运行项目,使用 Chrome 浏览器打开。 输入搜索内容后,点击清空按钮,搜索内容都能清空了。
4.搜索
在“组件”中,选择“表格”,然后选择“外部搜索”。查看搜索按钮。
点击查看代码,复制搜索按钮提交的代码。
粘贴到代码中。
给时间范围选择框添加属性:name="time"。
修改搜索按钮的属性:lay-filter="search"。
修改时间范围的值格式。
把搜索字段的时间范围拆分为开始时间和结束时间,然后搜索的字段添加开始时间和结束时间。
运行项目,使用 Chrome 浏览器打开。 输入搜索条件,点击搜索按钮,搜索出符合条件的数据。