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

原文地址:https://www.cnblogs.com/tangbang/p/10142920.html

时间: 2024-08-30 11:12:29

layui table中使用checkbox的相关文章

layui table中固定表头,弹框缩放之后,表头对不齐问题

问题描述: 在弹框中的表格,表格设置height属性 如果表格数据太多,表头会固定,只有表内容会滚动 拖动弹框右下角缩放弹框时,表格的头部对不齐 正常显示如图: 缩放之后如图: 解决办法: layer有一个resizing属性,是弹框缩放结束的回调放方法 在回调之后重新根据数据列设置表头的宽度. resizing: function (layero) { var tableDom = layero.find('.layui-table-box'); var theadTable = tableD

layui table中添加一列序号列

页面文件在相应的位置上添加下面两个模块的代码: 第一模块:在render table 时添加: { field: 'rank', title: '序号', width: 80, sort: true, fixed: 'left', templet: '#rank' } 第二模块:在<script></script>一对标签外面添加: <script type="text/html" id="rank"> {{d.LAY_TABLE

layui table指定某一行样式

想指定layui table中某一行的样式,找了这个资源可行.转自: https://blog.csdn.net/weixin_44729896/article/details/100524824 table.render({ elem: "#test", // id: "table_cell_data", url: "http://localhost:3000/all", toolbar: "#toolbarDemo", /

jQuery_review之table中根据行选中,进行背景变色和checkbox选中

继续复习jQuery,对table来说,上面除了单选之外,还有多选的一个控制.对于多选来说,需要对多选的内容进行高亮显示,还应该在页面加载的时候,对已经默认选中的内容进行高亮.这些小功能也是复习jQuery选择器的一个很好地素材,有非常多的实现方式,不仅仅拘泥于一种,只要能将功能健壮的实现了,就是比较不错的了. 在一本资料上,看到了这样的一种jQuery的写法,还是非常的惊艳! element[hasClassName?"removeClass":"addClass"

实现前端table中checkbox全选功能,并将选中的数据发送到后端

一.需求 1. 点击这个checkbox按钮,会选中下面所用checkbox,当然在选中的情况下点击,会将下面所有选中的checkbox取消: 2. 当下面使用submit的提交按钮时,会将所有checkbox选中的数据提交给后端: 二.实现 1.实现全选checkbox功能 技术分析:其实这里可以使用js活着jquery两种方式,我暂时使用的是js中的dom实现的,具体代码如下: <!DOCTYPE html> <html> <head> <title>实

第一个table根据checkbox选择tr,在另一个table中显示对应索引的tr(jq遍历的运用)

1 $('#form_1 table tbody').find(':checkbox:checked').each(function(){//查找处于checked状态的checkbox 2 var val = $(this).parent().parent().index(); //找到这个checkbox所在的tr的索引3 $('#form_2 table tbody tr').eq(val).show(); //在form_2中显示对应索引的tr 4 })

实现table中checkbox复选框、以及判断checked是否被选中、js操作checkedbox选中

上图是实现效果. 下面贴代码 表的第一行也就是<th>中的代码,onclick事件是实现全选或者全不选效果. <th> <input id="allboxs" onclick="allcheck()" type="checkbox"/> </th> td中的代码 <td> <input name="boxs" type="checkbox"/

layui table 跨页记忆选择

layui 表格功能目前默认不支持跨页记忆选择 下面来实现layui table跨页记忆选择实现 基于layui版本 1.4.5 表格跨页通用方法 //表格分页复选框 layui.define(['jquery', 'table'], function (exports) { var $ = layui.jquery , table = layui.table; //记录选中表格记录编号http://www.1994july.club/seo/?p=2797 var checkedList =

在jsp中选中checkbox后 将该记录的多个数据获取,然后传到Action类中进行后台处理 双主键情况下 *.hbm.xml中的写法

在jsp中选中checkbox后 将该记录的多个数据获取,然后传到Action类中进行后台处理 双主键情况下 *.hbm.xml中的写法 ==========方法1: --------1. 选相应的checkbox后  点删除按钮------------- <!-- *******************删除******************* -->     <input type="image" alt="delete"      src=&