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

提示：整个表格要在form标签内

定义开关模板

<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;
                        }
                    });   
                    
                }
        });