LayUI模态框下拉框遮挡解决方案

发布于 2020-04-16 10:31:36

首先参考文档
https://blog.csdn.net/lmxqh/article/details/79232168
万能的吧友给出
QQ浏览器截图20200416100334.png
那么在WTM框架里怎么做呢,资料上给出的方法有个问题,当页面需要滚动时没法滚动,所以理想情况下应该是我们按需选择是否不遮挡还是遮挡(这里的遮挡只是会出现滚动条)。

1. 修改框架JS
framework_layui.js
第 306 行修改为

OpenDialog: function (url, windowid, title, width, height, para, maxed , fixed) {
        var layer = layui.layer;
        var index = layer.load(2);
        var wid = this.GetCookie("windowids");
        var owid = wid;
        var _skin = "";
        if (wid === null || wid === '') {
            wid = windowid;
        }
        else {
            wid += "," + windowid;
        }
        this.SetCookie("windowids", wid);
        this.SetCookie("windowguid", DONOTUSE_WINDOWGUID, true);
        var getpost = "GET";
        if (para !== undefined) {
            getpost = "Post";
        }
        if (fixed !== undefined && fixed)
        {
            _skin = "to-fix-select";
        }
        $.ajax({
            cache: false,
            type: getpost,
            url: url,
            data: para,
            async: true,
            error: function (request) {
                layer.close(index);
                ff.SetCookie("windowids", owid);
                if (request.responseText !== undefined && request.responseText !== "") {
                    layer.alert(request.responseText);
                }
                else {
                    layer.alert(ff.DONOTUSE_Text_LoadFailed);
                }
            },
            success: function (str, textStatus, request) {
                layer.close(index);
                max = true;
                if (request.getResponseHeader('IsScript') === 'true') {
                    ff.SetCookie("windowids", owid);
                    eval(str);
                }
                else {
                    str = "<div  id='" + $.cookie("divid") + "' class='donotuse_pdiv'>" + str + "</div>";
                    var area = 'auto';
                    if (width !== undefined && width !== null && height !== undefined && height !== null) {
                        area = [width + 'px', height + 'px'];
                    }
                    if (width !== undefined && width !== null && (height === undefined || height === null)) {
                        area = width + 'px';
                    }
                    if (title === undefined || title === null || title === '') {
                        title = false;
                        max = false;
                    }
                    var oid = layer.open({
                        type: 1
                        , title: title
                        , skin: _skin
                        , area: area
                        , maxmin: max
                        , shade: 0.8
                        , btn: []
                        , id: windowid //设定一个id,防止重复弹出
                        , content: str
                        , end: function () {
                            ff.SetCookie("windowids", owid);
                        }
                    });
                    if (maxed === true) {
                        layer.full(oid);
                    }
                }
            }
        });
    }

2. 修改表格按钮支持传入参数
GridActionExtension.cs

public static GridAction SetFix(this GridAction self, bool Fix = true)
{
    self.Fix = Fix;
    return self;
}

注:GridAction 里没有Fix 这个属性需要增加下!!
3. 使用这个设置
DataTableTagHelper.cs
第 802 行修改代码为

actionScript = $"ff.OpenDialog(tempUrl,'{Guid.NewGuid().ToNoSplitString()}','{item.DialogTitle}',{width},{height},isPost===true&&ids!==null&&ids!==undefined?{{'Ids':ids}}:undefined,{item.Max.ToString().ToLower()},{item.Fix.ToString().ToLower()});";
                                

4. 如何使用

protected override List<GridAction> InitGridAction()
{
    return new List<GridAction>
    {
        this.MakeStandardAction("Tag", GridActionStandardTypesEnum.Create, "新建","", dialogWidth: 800).SetFix(true),
        this.MakeStandardAction("Tag", GridActionStandardTypesEnum.Edit, "修改","", dialogWidth: 800).SetFix(true),
        this.MakeStandardAction("Tag", GridActionStandardTypesEnum.Delete, "删除", "",dialogWidth: 800),
        this.MakeStandardAction("Tag", GridActionStandardTypesEnum.Details, "详细","", dialogWidth: 800),
        this.MakeStandardAction("Tag", GridActionStandardTypesEnum.BatchEdit, "批量修改","", dialogWidth: 800),
        this.MakeStandardAction("Tag", GridActionStandardTypesEnum.BatchDelete, "批量删除","", dialogWidth: 800),
        this.MakeStandardAction("Tag", GridActionStandardTypesEnum.Import, "导入","", dialogWidth: 800),
        this.MakeStandardAction("Tag", GridActionStandardTypesEnum.ExportExcel, "导出",""),
    };
}

好了,有更好的方案留言~~

忘说了要加个全局样式!!!

body .to-fix-select .layui-layer-content {
    overflow: visible;
}
0 条评论

发布
问题