Layui动态添加节点以及后加载样式问题解决

男娘i 2021-10-19 02:28 707阅读 0赞

一、场景

前端html需要点击增加按钮之后在原有的div元素后增加多个元素。

二、问题

1、js控制添加元素

2、添加后样式后加载渲染问题

三、实现

1、js动态控制添加元素

步骤一：拼写字符串

以html已有的div为基础，js循环拼写，动态控制写入html页面进行展示。

（1）获取html页面中已有的div代码

此处的div代码我就不赘述了，就是你前台自己html页面中自己写的，接下来你要重复出现的目标代码。

（2）js拼写

因为要重复出现，此处最好写一个公共方法。例如此处小编的写法如下：

function dealInfo(参数){
        var str = "拼接的目标div代码";
        return str
    }

步骤二：拼接写入html页面

然后是点击事件拼写，插入到页面（此处为了规范，我是调用的按钮监听组，观摩到该偏的同志们大可以使用$("id").click(function\{...\})来进行使用，效果都一样的），这里都很也没什么多强调的，这一步需要注意的两个技巧就是：页面插入用html()方法，在插入完之后在已插入的元素后面拼接需要插入的目标元素用after()方法，append()方法是在插入的元素内拼接，所以此处不用append而使用after。

addDeal:function () {
        if(0==cla){
            var str = dealInfo(cla);
            var nextNode =  "<div id=\"dealBaseInfo"+(cla+1)+"\" style=\"margin-top: 10%;\"></div>";
            $("#dealBaseInfo").html(str);
            $("#dealBaseInfo").after(nextNode);
            form.render();
            cla++;
        }else{
            var str = dealInfo(cla);
            var nextNode = "<div id=\"dealBaseInfo"+(cla+1)+"\" style=\"margin-top: 10%;\"></div>";
            $("#dealBaseInfo"+cla).html(str);
            $("#dealBaseInfo"+cla).after(nextNode);
            form.render();
            cla++;
        }
    }

略提一下，也是为了总结之后方便自己使用

①js按钮监听代码，如下易得，是根据myDlog来统一获取所有该样式的元素，若用该方式的话加上这个样式即可监听

//按钮监听组
        $('.myDialog').on('click', function() {
            var type = $(this).data('type'),
                url = $(this).data('url'),
                tit = $(this).children('cite').text();
            panelaction[type] ? panelaction[type].call(this) : '';
        });

②页面代码配合使用按钮监听组，上面已经介绍一点了，还需要增加的便是data-type属性，以便定位目标元素

③页面插入的html代码，加上该句就有插入的目标代码啦

2、添加后样式后加载渲染问题

这个问题很恶心啊，细心的小伙伴应该发现上面的代码中我在插入页面代码之后又form.render()了一下，这个主要是为了解决css样式后加载问题，因为用的人家的框架，你在打开页面的时候就已经加载完一次这个样式了，所以你得全面或者局部后加载一下css样式。此处，小编是写到表单form中的，除此之外还有table。所以就可以使用form.render()来将页面中所有的form样式再重新加载一遍了。代码如下（可以看上也可以看下），

layui.define(['jquery', 'table','form'], function(exports) {
        $ = layui.$;
        form = layui.form;
        table = layui.table;
        
            //按钮监听组
        $('.myDialog').on('click', function() {
            var type = $(this).data('type'),
                url = $(this).data('url'),
                tit = $(this).children('cite').text();
            panelaction[type] ? panelaction[type].call(this) : '';
        });
    
        var panelaction = {
            addDeal:function () {
                if(0==cla){
                    var str = dealInfo(cla);
                    var nextNode =  "<div id=\"dealBaseInfo"+(cla+1)+"\" style=\"margin-top: 10%;\"></div>";
                    $("#dealBaseInfo").html(str);
                    $("#dealBaseInfo").after(nextNode);
                    form.render();
                    cla++;
                }else{
                    var str = dealInfo(cla);
                    var nextNode = "<div id=\"dealBaseInfo"+(cla+1)+"\" style=\"margin-top: 10%;\"></div>";
                    $("#dealBaseInfo"+cla).html(str);
                    $("#dealBaseInfo"+cla).after(nextNode);
                    form.render();
                    cla++;
                }
            }
            });
        }
    });

以上便是所有的经验总结啦。