首页 > 其他分享 >layui - - - 回显是否上架、更新图书按钮、添加顶部搜索(图书管理系统)

layui - - - 回显是否上架、更新图书按钮、添加顶部搜索(图书管理系统)

时间:2024-09-22 22:51:58浏览次数:3  
标签:回显 layui 上架 是否 搜索 按钮 上传 图书

1.回显是否上架

是否上架 div 设置 id 属性:id="status"。

image.png

判断是否上架的值,然后拼接单选框按钮字符串,最后把拼接后的字符串设置到 id="status"的 div 中。

image.png

运行项目,使用 Chrome 浏览器打开。 点击“更新”按钮,更新图书页面回显了“图书分类”和“是否上架”。

image.png

2.更新图书按钮

更新图书按钮设置属性:lay-filter="edit"。

image.png

表单提交事件,第一个参数传:'submit(edit)',然后请求的 URL 修改为更新图书的 URL。

image.png

3.判断上传图片是否成功

判断上传图片是否成功,上传失败时提示失败消息。

image.png

当上传的图片大于 1MB 时,会提示上传失败的消息。

image.png

4.添加顶部搜索

在“组件”中,选择“表格”,然后选择“外部搜索”。查看顶部有搜索框。

image.png

点击查看代码,复制整个 form标签。

image.png

粘贴到代码中,放在表格上方。

image.png

修改样式,让搜索和清空按钮与搜索条件在一行现实。

image.png

运行项目,使用 Chrome 浏览器打开。 查看表格顶部的搜索。

image.png

添加图书名称搜索框、图书分类搜索下拉框、是否上架搜索下拉框。

image.png

添加创建时间范围搜索框。

image.png

运行项目,使用 Chrome 浏览器打开。

image.png

标签:回显,layui,上架,是否,搜索,按钮,上传,图书
From: https://blog.51cto.com/zicl/12081920

相关文章