这篇博客详细总结了 layui 框架在实际应用中的各种实用技巧，包括表格显示图片、格式化日期、搜索栏添加下拉框、添加日期选择器、使用判断语句模板、下拉框回显及更新、图片和页面传值、layui 动态表格刷新、自适应响应式布局和弹窗等。通过实例代码展示了每种操作的具体实现，为 layui 开发者提供了实战指导。
----------------------------------表格显示图片----------------------------------------------------
--需要在表格页面, </head>前面添加的CSS样式代码如下
<style>
.layui-table-cell {
height: auto !important;
}
.layui-table img {
max-width: 100%;
}
</style>
--需要在表格页面, <body>后面添加的js代码如下
<script type="text/htm1" id="IMGurl">
<img src="images/{ {d.img}}" style="height: 60px;border-radius: 10px;" />
</script>
--在数据表格中需要显示图片的列添加属性代码如下
templet: "#IMGurl"
注意两条：
IMGurl => 其中IMGurl指的是表格templet: "#IMGurl"的参数。
images/{ {d.img}} => 其中images指的是图片文件夹，img指的是field: 'img'的参数
-----------------------------------格式化日期------------------------------------------------------
---在数据表格中需要显示格式化时间的列添加属性代码如下
templet: "<div>{ {layui.util.toDateString(d.data, 'yyyy-MM-dd HH:mm:ss')}}</div>"
注意：
d.data其中的data是field: 'data'的参数。
-----------------------------------搜索栏添加一个下拉框--------------------------------------------
--在需要的位置粘贴如下代码
<label class="layui-form-label">类型:</label>
<div class="layui-input-inline">
<select name="type" id="type" required lay-verify="required">
<option value="">---请选择---</option>
<
最低0.47元/天 解锁文章
扫一扫
797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
