layui表单使用开关滑块和复选框，渲染后台数据方法

<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"
style="padding: 20px 30px 0 0;"> <form action="{:request()->url()}" method="post" data-role="yd_form_submit" data-type="open">
<input type="hidden" name="id" value="{$pid}">
<div class="layui-card-body">
<table class="layui-hide" id="demo"></table> </div> <div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn">保存</button>
</div>
</div> </form>
</div>//这个是开关滑块模板
<script type="text/html" id="app_server_status"> <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="app_server_status"
{{ d.status == 1 ? 'checked' : '' }}>
</script>//这个是表单渲染数据和初始化调用后台数据（通过向接口传id获取特定数据，数组形式）
<script> var id="{$pid}"; $(document).ready(function () {
$.ajax({
type: "post",
url:'getNorm?id='+id,//这里是接口传值
data: {},
dataType: "json",
success: function (data) { layui.use('table', function(){
var table = layui.table; //展示已知数据
table.render({
elem: '#demo'
,cols: [[ //标题栏
,{type: 'checkbox'}
,{field: 'id', title: '库存ID', width: 80, sort: true}
,{field: 'pid', title: '商品id', width: 120,}
,{field: 'title', title: '类商品名', minWidth: 150}
,{field: 'norm', title: '规格属性', minWidth: 160}
,{field: 'logo', title: '积分', width: 80, sort: true,edit: 'text'}
,{field: 'price', title: '售价', width: 80, sort: true,edit: 'text'}
,{field: 'or_price', title: '原价格', width: 80, sort: true,edit: 'text'}
,{field: 'cost_price', title: '成本价', width: 80, sort: true,edit: 'text'}
,{field: 'number', title: '库存量', width: 80, sort: true,edit: 'text'}
,{field: 'weight', title: '重量（kg）', width: 80, sort: true,edit: 'text'}
,{field: 'volume', title: '体积（m³）', width: 80, sort: true,edit: 'text'}
,{field: 'sort', title: '排序', width: 100,edit: 'text'}
,{field:'status', title:'状态', width:110, templet: '#checkboxTpl', unresize: true}
,{
field: 'status',
title: '状态',
align: 'center',
templet: '#app_server_status',
unresize: true,
width: 100
},//这里是开关滑块的引用方式 ]]
,data: data.msg //这里是获取的后台数据渲染
//,skin: 'line' //表格风格
,even: true
,page: true //是否显示分页
//,limits: [5, 7, 10]
//,limit: 5 //每页默认显示的数量
}); //监听单元格编辑
table.on('edit(demo)', function(obj){
var value = obj.value //得到修改后的值
,data = obj.data //得到所在行所有键值
,field = obj.field; //得到字段
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value));
});
});
}
}); });</script>

table.render({
elem: '#js_table_reource_invite_supplier_index_table',
data:[],
cellMinWidth: 80,
maxHeight:300,
loading: true,
even: true,
method: 'POST',
cols: [
[
{type: 'numbers', title: '序号'},
{type: 'checkbox', width: 50},
{field: 'provider_name', title: '供方名称',width: 150},
{field: 'is_qualified', title: '是否合格',width: 100, align: 'center',templet:function(row){
var html = "<input type='checkbox' lay-skin='primary' lay-filter='checkboxIsSelected' table-index='"+row.LAY_TABLE_INDEX+"' class='checkboxIsSelected' value='1' ";
if(row.is_qualified == 1){
html += " checked ";
}
html += ">";
return html;
}},//这里是复选框引用
]],
done: function (obj) {
layer.closeAll();
form.on('checkbox(checkboxIsSelected)', function(data){
var _index = $(data.elem).attr('table-index')||0;
if(data.elem.checked){
obj.data[_index].is_qualified = data.value;
}else{
obj.data[_index].is_qualified = 2;
}
}); }
});