zoukankan      html  css  js  c++  java
  • layui获取表格数据table的复选框checkbox的所有id

    layui获取表格数据table的复选框checkbox的所有id

    用官方的lay-event测试一直无法获取,所以用了这种方法

    <button class="layui-btn"  onclick="getIds()">
        <i class="layui-icon">�</i>获取选中ID</button>
    <table class="layui-hide" id="demo" lay-filter="test"></table>
    
    <script>
    
     //获取选中ID
        function getIds()
        {
            var checkStatus = layui.table.checkStatus('demo'); //demo 即为基础参数 id 对应的值
    
            //console.log(checkStatus.data) //获取选中行的数据即 多个行对象
            //console.log(checkStatus.data.length) //获取选中行数量,可作为是否有选中行的条件
            //console.log(checkStatus.isAll ) //表格是否全选
            if (checkStatus.data.length>0) {
                var idsArray = [];
                for (var i = 0; i < checkStatus.data.length; i++) {
                    idsArray.push(checkStatus.data[i].new_id);
                }
                var ids = idsArray.toString();
                // console.log(ids);
                layui.layer.alert(ids);
                $(".layui-form-checked").not('.header').parents('tr').remove();
            }
            else
            {
                layui.layer.alert("请至少选择一行");
            }
    
        }
    
    
    layui.use(['layer', 'table'], function(){
            var layer = layui.layer //弹层
                ,table = layui.table //表格
    
            //向世界问个好
            //layer.msg('Hello World');
    
            //执行一个 table 实例
            table.render({
                elem: '#demo'
                ,height: 420
                ,url: './list2_json' //数据接口
                ,title: '用户表'
                ,page: true //开启分页
                ,toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
                ,totalRow: true //开启合计行
                ,cols: [ [ //表头
                    {type: '', fixed: 'left'}
                    ,{field: 'new_id', title: 'ID', 80, sort: true, fixed: 'left'}
                    ,{field: 'new_title', title: '标题', 300}
                    ,{field: 'new_menu', title: '类别', 120}
                    ,{field: 'new_order', title: '排序', 80}
                    ,{field: 'new_time', title: '添加时间',  130}
                ]]
            });
    
    
    
        });
    </script>
    

      

  • 相关阅读:
    promise请求数据(all方法)
    右键的点击事件
    微信小程序的接口调用封装
    微信小程序HTTP接口请求封装
    微信小程序得路由跳转
    管理系统得操作与解决思路
    HTTP协议
    动态语言概述
    AsynclAwait
    三种跨域解决方案
  • 原文地址:https://www.cnblogs.com/zys0597/p/14074313.html
Copyright © 2011-2022 走看看