layui table中使用checkbox

最新推荐文章于 2024-08-21 19:39:31 发布

weixin_33897722

最新推荐文章于 2024-08-21 19:39:31 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tangbang/p/10142920.html

本文详细介绍使用layui框架渲染表格的具体步骤，包括HTML结构搭建、表格数据加载、自定义单元格展示及数据编辑功能实现。同时，展示了如何通过layui的table模块获取已渲染的表格数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：

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

转载于:https://www.cnblogs.com/tangbang/p/10142920.html