current position:Home>Layui framework application FAQ

Layui framework application FAQ

2022-04-29 14:19:54Programming essay

https://layui.itze.cn/index.html LayUI Frame document home page

obtain URL Parameters

Such as in a table “ edit ”,“ details ” Tool button , You need to get in the pop-up layer page URL Parameters passed in .

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

Refresh table data when closing pop-up layer

stay layer.open() Add a callback function in :end: function().

//  Process... In table rows “ edit ” Pop up layer close callback 
table.on('tool(demoTableFilter)', function (obj) {
    var data = obj.data;
    if (obj.event === 'edit') {
        var index = layer.open({
            title: ' edit ',
            type: 2,
            shade: 0.2,
            maxmin:true,
            shadeClose: true,
            area: ['100%', '100%'],
            content: '../page/table/edit.html?id='+data.id, //  Pass on URL Parameters 
            end: function(){
                //  Refresh the table when closing the pop-up layer 
                table.reload('demoTableId');
            }
        });
        $(window).on("resize", function () {
            layer.full(index);
        });
        return false;
    }
});

Set the default option value of the drop-down box

// According to the value option Choose  
$("#mySelect option[value='"+myValue+"']").attr("selected","selected"); 

The drop-down box is dynamically assigned through the interface

Page elements :

<select name="mySelect" id="mySelect" lay-verify="required" lay-filter="xxxFilter">
<option value=""></option>
</select>

Request dynamic assignment of interface data :

$.ajax({
    url: '/xxx/data/list',
    dataType: 'json',
    type: 'get',
    success: function (data) {
        $.each(data, function (index, item) {
            //  Dynamically add elements to the drop-down menu 
            $('#mySelect').append(new Option(item.xm, item.id)); 
        });
        //  To render , This operation is very important 
        //  If you need to set the default options of the drop-down box , Must be performed before this operation 
        //  Set the default selection of the drop-down menu 
        // $("#mySelect option[value='"+myValue+"']").attr("selected","selected"); 
        layui.form.render("select");
    }
});

【 Reference resources 】 https://blog.csdn.net/wuyichang919/article/details/85126191 layui Pop up layer close callback https://www.jianshu.com/p/708c915fb905 js obtain url Several ways of parameter value https://m.php.cn/layui/465464.html layui modify select The value of the method https://www.cnblogs.com/yagamilight/p/9902093.html LAYUI Drop down box background dynamic assignment

copyright notice
author[Programming essay],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291242304930.html

Random recommended