先看效果:
一般這寫什么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 + '"}') } }) }
})