layui動態添加的表單元素顯示異常

這種問題發生的原因:layui會對錶單內的元素進行二次渲染,動態添加的代碼沒有經過再次渲染,所以顯示異常。

官方文檔其實也有提及這個問題和解決方法

https://www.layui.com/doc/modules/form.html#render

解決方法:動態添加元素後,使用form.render()手動觸發渲染,如下代碼所示:

layui.use(['form'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        //監聽radio選中事件,與本文無關
        form.on('radio(test)', function (obj) {
            //動態添加元素
            addThing(obj.value)
            //執行渲染
            form.render('radio')
        });
    });

另外附上layui動態添加radio元素的方法:

 function addThing(radioGroup, data) {
        radioGroup[0].innerHTML = ""
        if (data.length == 0) return;

        var tt = "<input type=\"radio\" name=\"thing\" value=\""+data[0].tname+"\" title=\""+data[0].tname+"\" checked=\"\"><div class=\"layui-unselect layui-form-radio layui-form-radioed\"><i class=\"layui-anim layui-icon\">&#xe643</i><div>"+data[0].tname+"</div></div>"
        radioGroup[0].innerHTML += tt
        for (var i = 1; i < data.length; i++) {
            var temp = data[i].tname
            tt = "<input type=\"radio\" name=\"thing\" value=\""+data[i].tname+"\" title=\""+data[i].tname+"\"><div class=\"layui-unselect layui-form-radio\"><i class=\"layui-anim layui-icon\">&#xe63f</i><div>"+data[i].tname+"</div></div>";
            radioGroup[0].innerHTML += tt
        }
    }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章