LayUI框架应用常见问题
https://layui.itze.cn/index.html LayUI框架文档主页
获取URL参数
诸如表格中的“编辑”,“详情”工具按钮,需要在弹出层页面中获取在URL中传递的参数。
function getQueryString(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
let r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
};
return null;
}
关闭弹出层时刷新表格数据
在layer.open()
中添加回调函数:end: function()
。
// 处理表格行中的“编辑”弹出层关闭回调
table.on('tool(demoTableFilter)', function (obj) {
var data = obj.data;
if (obj.event === 'edit') {
var index = layer.open({
title: '编辑',
type: 2,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: ['100%', '100%'],
content: '../page/table/edit.html?id='+data.id, // 传递URL参数
end: function(){
// 关闭弹出层时刷新表格
table.reload('demoTableId');
}
});
$(window).on("resize", function () {
layer.full(index);
});
return false;
}
});
设置下拉框默认选项值
//根据值让option选中
$("#mySelect option[value='"+myValue+"']").attr("selected","selected");
下拉框通过接口动态赋值
页面元素:
<select name="mySelect" id="mySelect" lay-verify="required" lay-filter="xxxFilter">
<option value=""></option>
</select>
请求接口数据动态赋值:
$.ajax({
url: '/xxx/data/list',
dataType: 'json',
type: 'get',
success: function (data) {
$.each(data, function (index, item) {
// 下拉菜单里动态添加元素
$('#mySelect').append(new Option(item.xm, item.id));
});
// 重新渲染,这个操作非常重要
// 如果需要设置下拉框的默认选项,必须在这个操作之前执行
// 设置下拉菜单的默认选中项
// $("#mySelect option[value='"+myValue+"']").attr("selected","selected");
layui.form.render("select");
}
});
表格行工具栏根据数据属性动态显示
表格数据行的工具栏按钮可以根据行数据属性进行动态显示控制,如下示例:
<script type="text/html" id="tableBarDemo">
<a class="layui-btn layui-btn-xs layui-btn-normal data-count-edit" lay-event="edit">编辑</a>
{{# if(d.isDel == '0'){ }}
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
{{# } }}
{{# if(d.isDel == '1'){ }}
<a class="layui-btn layui-btn-xs layui-btn-checked data-count-recover" lay-event="recover">恢复</a>
{{# } }}
</script>
参数变量d是固定的。
获取checkbox复选框的值
<form role="form" class="select_people">
<div style="display: inline-block; margin-left: 30px; margin-top: 0">
<label for="name">应用一组</label>
{% for peopel_1 in peopels_1 %}
<div class="checkbox">
<label><input type="checkbox" value={{ peopel_1.name }} name="people_name">{{ peopel_1.name }} </label>
</div>
{% endfor %}
</div>
<div style="display: inline-block; margin-left: 40px">
<label for="name">应用二组</label>
{% for peopel_2 in peopels_2 %}
<div class="checkbox">
<label><input type="checkbox"value={{ peopel_2.name }} name="people_name">{{ peopel_2.name }} </label>
</div>
{% endfor %}
</div>
<button type="submit" style="margin-left: 40px" id="sub_people" data-dismiss="modal" class="btn btn-default">提交</button>
</form>
// 获取已选中的名字并放到数组中
var name_list = [];
$("input[name='people_name']:checked").each(function(){
name_list.push($(this).val)
});
【参考】
https://blog.csdn.net/wuyichang919/article/details/85126191 layui 弹出层关闭回调
https://www.jianshu.com/p/708c915fb905 js获取url参数值的几种方式
https://m.php.cn/layui/465464.html layui修改select的值的方法
https://www.cnblogs.com/yagamilight/p/9902093.html LAYUI下拉框后台动态赋值
https://blog.csdn.net/gzkahjl/article/details/84369993 layerui工具栏根据状态动态显示
https://www.shuzhiduo.com/A/GBJrGEKK50/ layui中对表格操作按钮集的判断
https://blog.csdn.net/weixin_30418341/article/details/98003413 前端获取checkbox复选框的值 通过数组形式传递
https://gitee.com/sun_zoro/layuiTablePlug#https://fly.layui.com/jie/43423/ table组件的功能进行一些加强和拓展
https://www.freesion.com/article/7599630461/ 解决TABLE.RENDER重新加载闪动的问题
https://blog.csdn.net/MacWx/article/details/101373635 layui 树形表格 treeTable使用详细指南,不能折叠解决办法
作者:编程随笔
出处:http://www.cnblogs.com/nuccch/
声明:本文版权归作者和博客园共有,欢迎转载,但请在文章页面明显位置给出原文连接。