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使用详细指南，不能折叠解决办法