layui表單使用開關滑塊和複選框,渲染後臺資料方法
阿新 • • 發佈:2022-03-11
提示:整個表格要在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; } }); } });