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

84 阅读 0 评论 56 点赞

我是靠谱客的博主暴躁钢笔，最近开发中收集的这篇文章主要介绍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++;
}
}
});
}
});

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