layui问题之模拟table表格中的选中按钮选中事件的方法

一、问题

不操作页面，实现table表格中的checkbox选中功能

二、经过

刚开始的思路：

1、通过table的id，找到table渲染时生成的div，即table的下一个兄弟节点div.layui-table-view

2、由于checkbox是固定列，再通过第一步，找到div.layui-table-view的子元素.layui-table-fixed

3、紧接着，找出table的第一行的第一个td里面的input，即tr[data-index="0"] td input(注：这个input的类型就是checkbox)

4、找到input的下一个兄弟节点，即div.layui-form-checked

layui.use(['table', 'form', 'layer', 'layedit', 'laydate'], function() {
  // code

  //模拟checkbox选中功能
  var checkbox = $('#employeesTable').next().find('.layui-table-fixed tr[data-index="0"] td input');
  checkbox.next().click();
});

结果可想而知，并没有实现。在console中打印出来，找不到.layui-table-fixed，只能找到table里面的<tbody></tbody>，而且里面没有子节点。

三、结果

想一下，大概是table渲染数据时，模拟checkbox选中功能已经开始执行了。更这段code加一个延迟，这个问题解决。

setTimeout(function () {
  var td = $('#employeesTable').next().find('.layui-table-fixed tr[data-index="0"] td input');
  td.next().click();
},3000);

PS:后台在写测试，需要操作页面dom，用到了这种模拟事件。

以上这篇layui问题之模拟table表格中的选中按钮选中事件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Layui组件Table绑定行点击事件和获取行数据的方法

    一个项目里面用了layui,简直无数个坑... 这里先记录一个行点击事件的坑,后面慢慢补充. 初始化表格完成后利用事件给table(定位table需要在HTML代码中给table放入指定div)的tr绑定双击事件,然后获取Index,再从数据集里面取出行数据; done: function(res, curr, count){ $('#div').find('.layui-table-body').find("table" ).find("tbody").child

  • layui 监听表格复选框选中值的方法

    需要达到的目的: ajax()异步请求后台时,需要传入表格里复选框选中的id值 注意:在渲染form on 方法的done里面加入 done:function(res){ table_data=res.data; } 将复选框选中的值的id加入数组中,然后传递到后台作为ids参数 //自定义数组 var table_data=new Array(); var ids =new Array(); table.on('checkbox(push_port_table)', function(obj)

  • Layui Table js 模拟选中checkbox的例子

    思路,根据 data-index 找到 点击到的tr,获取tr下的 div,js 模拟点击 function iniTable() { layui.use('table', function(){ var table = layui.table; //展示已知数据 table.render({ elem: tableid ,cols: [[ //标题栏 {type:'checkbox',id:'goodsLimitSeqNo'} , {field: 'goodsLimitSeqNo', titl

  • layui的table单击行勾选checkbox功能方法

    如下所示: //单击行勾选checkbox事件 $(document).on("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents('.layui-table-box'); //存在固定列 if (tableBox.find(".l

  • layui问题之模拟table表格中的选中按钮选中事件的方法

    一.问题 不操作页面,实现table表格中的checkbox选中功能 二.经过 刚开始的思路: 1.通过table的id,找到table渲染时生成的div,即table的下一个兄弟节点div.layui-table-view 2.由于checkbox是固定列,再通过第一步,找到div.layui-table-view的子元素.layui-table-fixed 3.紧接着,找出table的第一行的第一个td里面的input,即tr[data-index="0"] td input(注:

  • layui异步加载table表中某一列数据的例子

    layui中table加载数据时 如果数据存放在不同数据表中 那样一个请求拼接每行表格数据 然后统一返回 太慢 //页面加载时请求 另一张表的数据 var slotGroup; admin.req({ url: '请求地址' , method: 'POST' , dataType: "json" , async: false , success: function (res) { slotGroup = res.data; console.log(slotGroup) } }); ta

  • bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法

    bootstrap-table下表格中增加操作的btn,如果是下拉菜单,那么在每一页最后一行点击下拉菜单,会出现滚动条,解决方法: 修改这个类,但是这个类改了会有点影响toolbar的显示,不过问题不大,加个margin就可以了 .fixed-table-body{ overflow:visible !important; } 以上所述是小编给大家介绍的bootstrap table 表格中增加下拉菜单末行出现滚动条解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的

  • vuejs+element UI table表格中实现禁用部分复选框的方法

    有时候我们构建这样带一列复选框的表格 然后希望根据条件禁用某个列表项的选择框,可以这样写 HTML: JS: 以上这篇vuejs+element UI table表格中实现禁用部分复选框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 正则表达式替换table表格中的样式与空标记(保留rowspan与colspan)

    完整测试代码 <script> var str='<p>'; str='<table id="tblSort" cellspacing="0" helvetica="" sans=""><tr id="sdf"><td style="color:red" class="ok" colspan="8&quo

  • 关于Element-UI Table 表格指定列添加点击事件

    关于Element-UI Table 表格指定列添加点击事件

    目录 Element-UI Table 表格指定列添加点击事件 element-ui table表格错位问题 问题描述 解决方案 Element-UI Table 表格指定列添加点击事件 如下图所示,这是一个ele UI库中的table,一般情况下我们只能通过tableDATA来向里面填充数据来展示,而无法对其中添加点击时间等操作.这里就来记录学习一下. 这是我们的一般使用方法,只能将数据进行展示.我们需要在el-table-column标签里面来进行处理 <el-table :data="

  • easyui datagrid 表格中操作栏 按钮图标不显示的解决方法

    jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染 解决办法: 使用解析器 Parser(解析器) $.parser.parse(); // 解析所有页面 $.parser.parse('#cc'); // 解析指定节点 以上这篇easyui datagrid 表格中操作栏 按钮图标不显示的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • angularjs中回车键触发某一事件的方法

    要求:在输入框中输入值以后,按回车键触发某一事件的执行 html: <input id="input" name="input" ng-model="querykdUser.page.pageSize" ng-keyup="myKeyup($event)" class="form-control" style="width:60px;"> js: $scope.myKeyup

  • JavaScript遍历table表格中的某行某列并打印其值

    JavaScript遍历table表格中的某行某列并打印其值

    JavaScript遍历table 1.说明 遍历表格中的某行某列,并打印其值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • vue elementUI table表格数据 滚动懒加载的实现方法

    在项目中遇到了一个性能问题 vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验, 这个时候常常有两种方法处理, 1.分页,如下 2.如果我不想分页,又想在一页显示全部数据呢?这个时候其实就可以用数据懒加载了 如下一开始表格只显示31行数据 当将滚动条拉到低的时候,就会再加载31条数据,如果剩下的数据不足31,那就加载剩下的 根据项目需求,这需要一页可以看到全部数据,所以我选择了第二中方式 那么第二种方式要怎

随机推荐