zoukankan      html  css  js  c++  java
  • layui table中使用checkbox

    第一步:

    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',  50},
                        {field: 'provider_name', title: '供方名称', 150},
                        {field: 'is_qualified', title: '是否合格', 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;

     

  • 相关阅读:
    GitHub 实现多人协同提交代码并且权限分组管理
    前端第一篇文章-http标准
    介绍Android电量
    音频编码格式
    PPT
    Word
    HTML 之 JavaScript
    HTML 之 CSS
    HTML 之 HTTP 协议(请求协议以及响应协议)
    HTML 之 标签
  • 原文地址:https://www.cnblogs.com/tangbang/p/10142920.html
Copyright © 2011-2022 走看看