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