1. 程式人生 > >layui table中使用checkbox

layui table中使用checkbox

invite UNC ext numbers div fun eth center attr

第一步:

1.

<div class="layui-form">
            <table class="layui-hide" lay-filter="js_table_reource_invite_supplier_index_table" id="js_table_reource_invite_supplier_index_table"></table>
        </div>

2.渲染表格

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; }}, { field:‘remark‘, title: ‘綜合評語‘, align: ‘center‘,edit: ‘text‘ } ]], 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; } }); } });

第二步,獲取表格中的數據

var supplierList = table.cache.js_table_reource_invite_supplier_index_table;

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; }}, { field:‘remark‘, title: ‘綜合評語‘, align: ‘center‘,edit: ‘text‘ } ]], 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; }}); } });

layui table中使用checkbox