正文
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 () {
varform = 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 + '"}')
}
})
}
})
