1. 程式人生 > 其它 >layui表單使用開關滑塊和複選框,渲染後臺資料方法

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