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

一、场景

        前端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属性，以便定位目标元素

<button type="button" id="morePeople" data-type="morePeople" class="layui-btn layui-btn-warm myDialog">
    <i class="layui-icon">&#xe608;</i>按钮
</button>

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

<div id="contentDeal">
    <div id="dealBaseInfo" style="margin-top: 10%;"></div>
</div>

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

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