LayUI框架应用常见问题

编程随笔

发布于 2022-04-29 12:25:12

1.5K0

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");
    }
});

【参考】 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下拉框后台动态赋值

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-03-25，如有侵权请联系 cloudcommunity@tencent.com 删除

https