精华内容
下载资源
问答
  • 今天小编就为大家分享layui获取选中行数据的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享layui使用表格渲染获取行数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享layui table表格数据的新增,修改,删除,查询,双击获取行数据方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Layui表格获取行数据

    2021-10-11 07:59:25
    在开发项目的时候经常用的一个Layui表格,而我们要表格里的一数据来进行其他操作,这时候就需要监听到它的那行数据才行,就是说,你点击到一个表格的其中一行,你需要那行的某个信息,用那个信息来做某种操作, ...

    在开发项目的时候经常用的一个Layui表格,而我们要表格里的一数据来进行其他操作,这时候就需要监听到它的那行数据才行,就是说,你点击到一个表格的其中一行,你需要那行的某个信息,用那个信息来做某种操作,

    例如上面这张图,我要获取到徐小春的数据,来进行其他的操作,这时候要怎么办呢,我这个表格使用Layui的表格渲染出来的。

    监听到它的行可以用它的方法:

    可以在控制台行的数据来查看,有没有获取到这行数据,用console打印obj

    目前已经获取到这行的数据了,tr代表这行。

    在选中这行的时候,做了一个勾选复选框的操作。

    当然如果渲染表格的时候没有给他做复选框,在这写这一窜勾选他的代码,那么这个表格就会出错,导致数据无法使用。

    最后想用到这行数据的时候。只需获取出来,即可调用

    这个tabAchievment 代表需要获取数据的那个表格

    如果想知道有没有获取到数据,可以输出一下checkStatus

    这样就可以获取到那个行的数据了

    这样就完成了。

    展开全文
  • 今天小编就为大家分享Layui组件Table绑定行点击事件和获取行数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 此方法主要是获得Layui当前行数据的上一行数据,或者下一行数据,os旧的jquery选择器 se选择器 nse新的jquery选择器 /** * * @param obj layui-table的行数据对象 * @param number 要查找的行距离当前行距离,以...
  • 方案一layui数据表格集成了查看编辑删除等功能,但新增功能官方文档却没有提及,当业务需求需要点击新增一行时,可用如下方式实现实现的思路是:当点击新增一行时,把之前的数据保存下来,并在数据尾部增加一行空...

    方案一

    layui的数据表格集成了查看编辑删除等功能,但新增功能官方文档却没有提及,当业务需求需要点击新增一行时,可用如下方式实现

    实现的思路是:当点击新增一行时,把之前的数据保存下来,并在数据尾部增加一行空数据

    然后将新数据重新载入表格

    var dataBak = []; //定义一个空数组,用来存储之前编辑过的数据已经存放新数据

    var tableBak = table.cache.stock_add_table;

    //获取之前编辑过的全部数据,前提是编辑数据是要更新缓存,stock_add_table 为表格的id

    for (var i = 0; i < tableBak.length; i++) {

    dataBak.push(tableBak[i]); //将之前的数组备份

    }

    在尾部新增一行空数据,实现增行效果

    dataBak.push({

    "stockInCargo": ""

    ,"stockInNum": ""

    ,"stockInPrice": ""

    ,"stockCargoTime": ""

    ,"stockInCompany": ""

    });

    table.reload("stock_add_table",{

    data:dataBak // 将新数据重新载入表格

    })

    原文:https://blog.csdn.net/rj_han/article/details/80664068

    方案二

    解决方案:将table改写成静态的方式即可,即第二部分代码

    此时出现新问题:每点击一次会出现两条数据,应做如下修改:

    $(".layui-table-body .layui-table").append(tr);

    最后即可实现点击按钮新增一条数据的效果。

    展开全文
  • layui获取选中行数据的两种方法

    万次阅读 2019-06-17 22:24:46
    开发工具与关键技术:Vs 作者:Mr_恺 撰写时间:2019年6月15日 ...现在我点击一行,通过控制台输出,所选中的一行数据 第二种方法: 设置方法: 用这个方法一定要在表头设置一个单选框或者复选框,不然它是获取不...

    开发工具与关键技术:Vs
    作者:Mr_恺
    撰写时间:2019年6月15日

    用过layui中的表格模块,都知道有获取选中行的方法,通过获取行的数据,根据ID进行数据回填,修改,删除等
    先把js引进来:
    在这里插入图片描述
    第一种方法:

    监听行的点击事件的用法:
    在这里插入图片描述
    设置方法:
    在这里插入图片描述
    现在我点击一行,通过控制台输出,所选中的一行数据
    在这里插入图片描述
    第二种方法:
    在这里插入图片描述
    设置方法:
    用这个方法一定要在表头设置一个单选框或者复选框,不然它是获取不到选中行的数据的,现在我就用复选框做例子:
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    现在我点击一行,通过控制台输出,所选中的一行数据
    在这里插入图片描述

    展开全文
  • layui使用表格渲染获取行数据

    千次阅读 2018-08-28 11:03:23
    需求:使用前端框架layui生成表格,点击表格一行数据中的按钮,获取到这行数据。 解决办法: 在render中增加字段: done: function (res, curr, count) { // $('.x-body').find('.layui-table-body').find(&...

    需求:使用前端框架layui生成表格,点击表格中一行数据中的按钮,获取到这行数据。

    解决办法:

    在render中增加字段:

    done: function (res, curr, count) {
                      // $('.x-body').find('.layui-table-body').find("table").find("tbody").children("tr").on('click', function () {
                      //   var id = JSON.stringify($('.x-body').find('.layui-table-body').find("table").find("tbody").find(".layui-table-hover").data('index'));
                      //   var obj = res.data[id];
                      //   console.log(obj, 'obj')
                      //   // fun.openLayer(obj);
                      // })
                      table.on('tool(test)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
                          var data = obj.data; //获得当前行数据
                          var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
                          var tr = obj.tr; //获得当前行 tr 的DOM对象
                          if (layEvent=="invest_perfer"){
                              x_admin_show("投资偏好","/echarts1.html?mobil="+data.mobil,"",510);
                          }else{
                              x_admin_show("用户画像","/echarts4.html?mobil="+data.mobil,"",510);
                          }
                      });
                  }

    然后在按钮中一定要增加lay-event属性:

    <script type="text/html" id="userPicBtn">
        <span class="layui-btn" href="javascript:;" lay-event="invest_perfer" >投资偏好</span>
        <span class="layui-btn" href="javascript:;" lay-event="member_photo" >用户画像</span>
      </script>

    完整代码:

    <table id="userlistTable" lay-filter="test"></table>
      <script>
          layui.use('table', function(){
              var table = layui.table;
    
              //第一个实例
              table.render({
                  elem: '#userlistTable'
                  ,height: 300
                  ,url: '/userlist' //数据接口
                  ,page: true //开启分页
                  ,cols: [[ //表头
                      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left',align:'center'}
                      ,{field: 'name', title: '用户名', width:80,align:'center'}
                      ,{field: 'sex', title: '性别', width:100, sort: true,align:'center'}
                      ,{field: 'mobil', title: '手机', width:150,align:'center'}
                      ,{field: 'log_in_time', title: '加入时间', sort: true, width: 250,align:'center'}
                      ,{title: '操作', width: 300, toolbar:'#userPicBtn',align:'center'}
                  ]],
                  data: [{ id: 1, name: '张三' }, { id: 2, name: '李四' }],//没卵用
                  done: function (res, curr, count) {
                      // $('.x-body').find('.layui-table-body').find("table").find("tbody").children("tr").on('click', function () {
                      //   var id = JSON.stringify($('.x-body').find('.layui-table-body').find("table").find("tbody").find(".layui-table-hover").data('index'));
                      //   var obj = res.data[id];
                      //   console.log(obj, 'obj')
                      //   // fun.openLayer(obj);
                      // })
                      table.on('tool(test)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
                          var data = obj.data; //获得当前行数据
                          var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
                          var tr = obj.tr; //获得当前行 tr 的DOM对象
                          if (layEvent=="invest_perfer"){
                              x_admin_show("投资偏好","/echarts1.html?mobil="+data.mobil,"",510);
                          }else{
                              x_admin_show("用户画像","/echarts4.html?mobil="+data.mobil,"",510);
                          }
                      });
                  }
    
              });
    
    
    
          });
    
      </script>
      <script type="text/html" id="userPicBtn">
        <span class="layui-btn" href="javascript:;" lay-event="invest_perfer" >投资偏好</span>
        <span class="layui-btn" href="javascript:;" lay-event="member_photo" >用户画像</span>
      </script>
    

    效果展示:

    点击投资偏好或者用户画像按钮都可以获取该行的数据。

     

    展开全文
  • 如何获取layui表格选中数据

    万次阅读 2019-07-27 11:18:57
    开发工具和关键技术:Visual Studio 2015,layui插件、JavaScript 作者:金建勇 撰写时间:2019年7月26日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 在项目中有很多涉及到表格的模块,有时候当你需.....
  • {"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":5,"count":5}]},"card":[{"des":"Quick BI 是款专为云上用户和企业量身打造的新一代自助式智能BI服务平台,其简单...
  • LayUI获取数据表格当前页全部数据 在 layui v2.6.0 中或更高版本可使用 var table = layui.table; let data = table.getData(id) // 例如 let data = table.getData('Table-List'); console.log(data); 此方法可...
  • //单击勾选checkbox事件 $[removed]("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents('.layui-table-box');...
  • 引用layui插件 渲染表格 渲染成功页面 点击行获取数据 具体代码 checkStatus(表格里的ID);表格里必须有check才能使用
  • Layui表格如何获取单个数据

    千次阅读 2019-07-17 14:51:00
    因为数据查出来之后,我是要获取单个表格数据的,layui获取整个表格数据,怎样才能获取到单个里的表格数据呢?我翻烂了文档,也不知道该如何去获取,后来我想,既然是要获取到单个表格...
  • 1 2 3 4 5 Title6 7 8 9 1011 12 (function() {13 layui.use(['table','layer'],function() {14 vartable=layui.table;15 varlayer=layui.layer;16 ...
  • 今天小编就为大家分享layui异步加载table表中某数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 项目需求,可以用复选框勾选项目进行提交,如下表...<table class=layui-table lay-data={url: lay-filter=test3> <th lay-data={type:>ID <th lay-data={field:>ID 测试项 <th lay-data={field:'t2', edit:
  • layui获取数据表格中的数据并传到后台进行解析
  • layui数据表格,操作当前数据重载(刷新表格数据
  • <div class="layui-btn-container"> <button class="layui-btn la...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,133
精华内容 853
关键字:

layui获取表格一行数据