iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >layuitablechecked获取选中数据方式
  • 775
分享到

layuitablechecked获取选中数据方式

layuitablecheckedtable获取选中数据checked选中数据 2022-11-13 18:11:04 775人浏览 薄情痞子
摘要

目录layui table checked获取选中数据获取layui中table表选中行数据法一 table表中每一列后面存在操作按钮,点击按钮进行列操作法二 在table表中加入单

layui table checked获取选中数据

关于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'}
    });

控制台结果

Array(2)
0: {id: "112", username: "张三", mobile: "18366616666" state: "有效"}
1: {id: "56", username: "李四", mobile: "18366618888"state: "有效"}
length: 2
__proto__: Array(0)

获取layui中table表选中行数据

在使用layui来编写前端时,将数据加载到表格后,当需要对表格中某一行或几行数据进行操作时有以下两种简单方法。

法一 table表中每一列后面存在操作按钮,点击按钮进行列操作

法一的表如图所示:

当要对表中某一列进行操作时,只需要点击该列后面的按钮即可。此时使用以下语句获取选中列数据:

table.on('tool(test)',function (obj) {
          console.log(obj);
          var layEvent=obj.event,
          {#layEvent获取点击的按钮事件#}
            data=obj.data; 
            {#data表示选中列的数据#}
            {#直接判断点击的按钮事件,这里的delete是按钮中设置的lay-event的名称#}
            if(layEvent==='delete'){执行事件}
            {#这里使用data.address就可以获取选中行的某一列(此处为address列)数据#}
            layer.alert(data.address)  

法二 在table表中加入单选框和复选框

在使用单选框或复选框时可以支持选中表中一行或多行数据。在表中加载单选框或复选框的代码详见layui官网。

此时表中样式如图(此处使用复选框):

我这里实际上有两个表格,所以我代码写的是同时获取两个表格中数据,代码如下:

其中demo表示第一个表的id,deme1表示第二个表的id。

还有需要注意获取选中数据的条数时使用data.length后面没有括号,此处一定要注意后面没有括号。然后在获取选中行的某一列数据时需要指明第几个选中行的某一列,此处的data1[0].address表示输出选中的第一行的地址列数据。

var file1 = table.checkStatus('demo')  
            ,file2=table.checkStatus('demo1')
            , data = file1.data
            ,data1=file2.data
            ,length1=data.length
            ,length2=data1.length;
            if (length1<1){
                layer.alert('请至少选择一个文档');
                return false
            }
            if (length2<1) {
                layer.alert('必须选择一个模板');
                return false
            }
            layer.alert('很不');
            layer.alert(JSON.stringify(data1[0].address));

此处和方法一的区别就是一个在data后面要带[i]指明是选中的第几行,而方法一直接使用data.address就可以访问改行。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: layuitablechecked获取选中数据方式

本文链接: https://www.lsjlt.com/news/170135.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • layuitablechecked获取选中数据方式
    目录layui table checked获取选中数据获取layui中table表选中行数据法一 table表中每一列后面存在操作按钮,点击按钮进行列操作法二 在table表中加入单...
    99+
    2022-11-13
    layui table checked table获取选中数据 checked选中数据
  • vue中异步数据获取方式(确保数据被获取)
    目录vue中异步数据获取1、获取异步数据,通过async/await限制 2、将一个方法的返回值vue处理数据(同步,异步)问题简单记录情况介绍最终解决方法:new Pro...
    99+
    2024-04-02
  • gridview怎么获取选中行数据
    要获取GridView中选中行的数据,可以通过以下步骤进行操作:1. 使用GridView的`SelectedRow`属性获取选中行...
    99+
    2023-08-26
    gridview
  • 如何获取listview选中的数据
    要获取ListView选中的数据,您可以使用以下步骤:1. 在ListView的适配器中,为每个item设置一个点击事件监听器。2....
    99+
    2023-08-14
    listview
  • 怎么获取listview选中的数据
    要获取ListView选中的数据,可以通过以下步骤:1. 在布局文件中定义一个ListView控件,并设置适配器。2. 在代码中获取...
    99+
    2023-09-16
    listview
  • C sharp (#) 数据类型获取方式
    目录C sharp (#) 数据类型获取C#的五大数据类型C#类型的派生谱类C sharp (#) 数据类型获取 这里研究一下关于c#中如何获取变量类型的问题。 首先我们研究一下如何...
    99+
    2022-11-13
    C sharp数据类型 sharp数据类型获取 sharp数据类型
  • Python中parsel两种获取数据方式小结
    目录⭐️网页解析利器parsel实战🌟 parsel简介🌟发送请求🌟解析数据✨XPATH方式✨CSS方法🌟总结⭐️网页解析利器parsel实战 我们以实际的案例,来具体了解学习其功能...
    99+
    2023-05-17
    Python parsel获取 Python parsel
  • vue中异步数据获取方式是什么
    今天给大家介绍一下vue中异步数据获取方式是什么。文章的内容小编觉得不错,现在给大家分享一下,觉得有需要的朋友可以了解一下,希望对大家有所帮助,下面跟着小编的思路一起来阅读吧。vue中异步数据获取1、获取异步数据,通过async/await...
    99+
    2023-06-28
  • Vuex数据的存储与获取方式
    目录Vuex数据存储与获取以下示例引用自官网(开始 | Vuex)可以举一个实际应用的例子Vuex存值与取值(简单易懂)Vuex数据存储与获取 因为最近需要对原有项目进行改造,之前没...
    99+
    2024-04-02
  • Vue中computed计算属性和data数据获取方式
    目录computed计算属性和data数据获取解决方法一解决方法二computed计算属性取对象的值,第一次报错undefined报错和打印值解决方案computed计算属性和dat...
    99+
    2024-04-02
  • Ajax中怎么利用jsonp方式跨域获取数据
    这期内容当中小编将会给大家带来有关Ajax中怎么利用jsonp方式跨域获取数据,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。<!DOCTYPE html&...
    99+
    2024-04-02
  • SpringMVC中请求参数的获取方式
    目录SpringMVC请求参数获取方式一、通过 ServletAPI 获取二、通过控制器方法的形参获取处理多个同名的请求参数三、通过 @RequestParam 注解四、@Reque...
    99+
    2024-04-02
  • springboot中Getmapping获取参数的实现方式
    目录Getmapping获取参数的方式其他传参方式在此之外@GetMapping参数接收理解当参数为基本类型时当参数为数组时当参数为简单对象时当参数的对象中嵌套着对象Getmappi...
    99+
    2024-04-02
  • 【MyBatis】获取参数值的方式
     🍓个人主页:个人主页 🍒系列专栏:SSM框架 目录 1.单个字面量类型的参数  2.多个字面量类型的参数 3.map集合类型的参数 4.实体类类型的参数 5.使用@Param标识参数 ...
    99+
    2023-08-31
    mybatis java spring mysql spring boot
  • php如何获取数据转json数据格式
    小编给大家分享一下php如何获取数据转json数据格式,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!php获取数据转json数据格式的方法:首先连接数据库;然后执行“mysql_query($sql);”;最后通过“jso...
    99+
    2023-06-20
  • 在 PHP 中获取和读取数据
    我们在开发 PHP 应用程序时会遇到不同的内容。有时,我们需要读取文件并从用户、其他来源和应用程序获取内容。 在 PHP 和大多数编程语言中,我们可以使用不同的方式和过程来获取请求和读取内容。内置函...
    99+
    2024-02-27
  • JS获取表单中数据formdata的方法
    这篇文章主要介绍了JS获取表单中数据formdata的方法,具有一定借鉴价值,需要的朋友可以参考下。下面就和我一起来看看吧。在文章正式开始之前呢,先介绍一个知识点,那就是var和let的区别,查看了各路大佬的文章,也经过各种尝试,最终得出的...
    99+
    2023-07-06
  • React中如何获取数据
    React中如何获取数据,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。1、使用生命周期方法请求数据应用程序Employees.org做两件...
    99+
    2024-04-02
  • React 中怎么获取数据
    今天就跟大家聊聊有关React 中怎么获取数据,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1. 使用生命周期方法请求数据应用程序Employees...
    99+
    2024-04-02
  • React中怎么获取数据
    本篇内容介绍了“React中怎么获取数据”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!   在执行I/O...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作