layui之普通數據表格顯示switch選擇表單組件


先看效果:

一般這寫什么switch組件,下拉框組件只在表單顯示,如果要在其他地方顯示就要注意一下細節

默默跳槽一下這個layui,真的蛋疼,每次用它東西都要各種設置東西,無語

接下來看下代碼:

HTML代碼

<table class="layui-table layui-form" id="" >注意!!!這邊的樣式,要用表單的那些組件一定要有這個class樣式:layui-form,要不然會調試的頭皮發麻
        <thead>
            <tr>
                <th>序號</th>
                <th>緯度</th>
                <th>預算kpi</th>
                <th>項目說明</th>
                <th>選擇模板項目</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

js代碼

//你要用layui的form組件就要在use里面加個form,這個use你可以理解為初始化

layui.use(["element", "laypage", "layer","form"], function () {

 var form = layui.form;
  form.render();//細節!!!和下面那個一樣,

function render(curr) {
    currentPage = curr;
    $.ajax({
        type: "get",
        url: "/xx/xx/xx/findPage",
        data: {
            type: type,
            currentPage: currentPage, 
            pageSize: pageSize},
        success: function (result) {
            if (result.status == 0) {
                $(".layui-table tbody").html("");
          
                $.each(result.data.pageContent, function (index, obj) {
                   var objStr = "\"" + obj.code + "\"";
                   var i= parseInt(index)+1+(parseInt(currentPage)-1)*parseInt(pageSize);
                    var str = "<tr>" +
                        "<td>" + i + "</td>" +
                        "<td>" + obj.groupName + "</td>" +
                        "<td>" + obj.kpiName + "</td>" +
                        "<td>" + obj.remark + "</td>" +
                        "<td>" +" <input type='checkbox' name='check' "+obj.check+"  title='模板項目'  value="+objStr+">" +                    
                        "</td></tr>";//這一句就是拼接起來的組件
                    $(".layui-table tbody").append(str)
                });
                form.render();//細節!這個好像要渲染一下!
            }
            if (result.message != null) {
                layer.msg(result.message)
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            layer.msg('{"status":"' + XMLHttpRequest.status + '","readyState":"' + XMLHttpRequest.readyState + '","textStatus":"' + textStatus + '","errorThrown":"' + errorThrown + '"}')
        }
    })
}
 })
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM