layui table checked获取选中数据方法

本文介绍了一种简洁的使用layuitablechecked方法获取表格选中数据的方式。通过设置表格ID并调用layui.table.checkStatus方法,可以轻松获取到选中行的数据,示例代码展示了如何在控制台输出选中数据。

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

关于layui table checked获取选中数据方法,有一个很简洁的方式

var selectData = layui.table.checkStatus('queryList').data;
console.log(selectData);

其中“queryList”为table的id,需要设置一个id,例如

layui.use('table', function() {
    var table = layui.table;
    //监听删除及编辑按钮
    table.render({
        elem: '#myForm'
        , url: SURL + '/sys/queryUserList' + sSuffix
        , id: 'queryList'
        , data: {"uid": uid, "name": name}
        , height: 350
        , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
        , cols: [[
            {type: 'checkbox', fixed: 'left'}
            ,{field: 'id', title: '编号'}
            ,{field: 'username', title: '姓名'}
            , {field: 'mobile', title: '手机号'}
            , {field: 'state', title: '状态'}
        ]]
        , page:  {theme:'#1090d9'}
    });

控制台结果

  1. Array(2)
    1. 0: {id: "112", username: "张三", mobile: "18366616666" state: "有效"}
    2. 1: {id: "56", username: "李四", mobile: "18366618888"state: "有效"}
    3. length: 2
    4. __proto__: Array(0)
### 关于 Layui 表格组件中的 `checked` 功能 Layui 是一个基于 JavaScript 的前端 UI 框架,提供了丰富的模块化功能支持。其中表格组件(table module)是一个非常强大的工具,用于展示数据并提供交互能力[^3]。 #### 实现方式概述 在 Layui 中,`checked` 功能通常通过复选框的形式来实现。具体来说,可以通过配置项启用或禁用复选框列,并设置默认勾选项的行为。以下是主要的功能点: 1. **开启复选框列** 使用 `checkbox` 配置项可以轻松地为表格添加一列表头作为复选框区域。当此属性被设置为 `true` 或者指定其他参数时,会自动渲染出复选框列[^4]。 2. **获取选中的行** 调用 `layTable.checkStatus()` 方法能够返回当前页面以及所有分页中已被勾选的数据记录集合对象。该方法的结果包含了两个重要字段:一个是布尔类型的全选状态标志;另一个则是数组形式的具体条目详情[^5]。 3. **自定义初始选中状态** 如果希望某些特定条件下的项目一开始就处于选定状态,则可以在初始化阶段利用事件监听器完成这一目标。例如,在加载完成后遍历整个数据集并与预设标准对比匹配成功后再手动触发单击操作模拟用户行为达到效果[^6]。 #### 示例代码 以下是一段简单的例子演示如何创建带有多重选择特性的动态表单视图: ```javascript layui.use(['table'], function(){ var table = layui.table; // 渲染表格实例 table.render({ elem: '#demo' ,url:'/some/data/source' // 数据接口地址 ,cols: [[ // 定义列结构 {type:'checkbox', fixed:true} // 开启首列固定宽度的多选按钮 ,{field:'id', title:'ID'} ,{field:'username', title:'用户名'} ]] }); }); ``` #### 注意事项 尽管 Lookup Tables 和 TableGen 工具链提及的内容并非直接关联到本主题讨论范围之内,但从概念层面理解它们有助于我们更好地把握类似技术背后的设计哲学——即抽象通用模式从而降低复杂度提升可维护性和扩展性[^7]。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值