精华内容
下载资源
问答
  • 今天小编就为大家分享一篇Layui多选框表格监听事件以及按钮自动点击写法实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui数据表格多选框错位问题 因为当我们选中{ type: ‘checkbox’, fixed: “left” },开启这个多选框的时候,其实框架会自动在原来的基础上再多加一个多选框,但是主要原因是因为表头内容与宽度产生的问题,因为...

    layui数据表格多选框错位问题

    因为当我们选中{ type: ‘checkbox’, fixed: “left” },开启这个多选框的时候,其实框架会自动在原来的基础上再多加一个多选框,但是主要原因是因为表头内容与宽度产生的问题,因为表头的单元格的宽度不够显示内容,产生的换行,所以表头换行,高度变大所以就会产生错位

    解决方法:我们需找到表头换行的单元格,然后

    cols: [[
                        { type: 'checkbox', fixed: "left" },
                        { field: 'ProjectName', title: "项目名称", width: '100'},
                        { field: 'DocumentCode', title: "文档编号", width: '200'},
                        { field: 'MenuName', title: '菜单名称', width: '200' },
                        { field: 'ProblemDescription', title: '问题描述', width: '600'},
                        { field: 'State', title: '文档状态',  templet: '<div>{{ formatterState(d.State) }}</div> ', width: '100'},
                        { field: 'DevelopmentHeadName', title: '接档人', width: '80' },
                        { field: 'DevelopmentEvaluateDay', title: '预计开发时长', width: '120' },
                        { field: 'ImplementRequestCompletionDate', title: "期望完成时间", sort: true,templet: '<div>{{ formatDate(d.ImplementRequestCompletionDate,"yyyy-MM-dd") }}</div>', width: '150' },
                        { field: 'TestThroughTime', title: "分配完成时间", sort: true, templet: '<div>{{ formatDate(d.TestThroughTime,"yyyy-MM-dd") }}</div>', width: '150' },
                        { field: 'IsInsertDocument', title: "是否需要分配到本周", templet: '<div>{{ getState(d.IsInsertDocument) }}</div> ', width: '180' },
                        { field: 'AuggestDevelopmentName', title: "建议开发", width: '100' },
                        //{ field: 'IsInsertDocument', title: "是否插入", width: '100' },
                        //{ field: 'NowProgress', title: "当前完成进度", width: '120'},
                        { field: 'StaffName', title: "提交实施", width: '100' },
                        //{ field: 'DevelopmentFinishDate', title: "开发实际完成日期", templet: '<div>{{ formatDate(d.DevelopmentFinishDate,"yyyy-MM-dd") }}</div>', width: '150' },
                    ]],
    

    把对应的width设置宽点,例如{ field: ‘ImplementRequestCompletionDate’, title: “期望完成时间”, sort: true,templet: ‘

    {{ formatDate(d.ImplementRequestCompletionDate,“yyyy-MM-dd”) }}
    ’, width: ‘150’ },的宽度由120改为150之后问题解决。

    展开全文
  • 不话不说了,直接上代码吧:获取选中行数据获取选中数目验证是否全选提交选择ID运动名运动时长运动类型var msg="";...//监听表格选框选择table.on('checkbox(demo)', function(obj){});var $ = layui.$,...

    不话不多说了,直接上代码吧:

    获取选中行数据

    获取选中数目

    验证是否全选

    提交选择

    ID运动名运动时长运动类型

    var msg="";

    var idlist="";

    layui.use('table', function(){

    var table = layui.table;

    //监听表格复选框选择

    table.on('checkbox(demo)', function(obj){

    });

    var $ = layui.$, active = {

    getCheckData: function(){ //获取选中数据

    msg="";

    idlist="";

    var checkStatus = table.checkStatus('idTest')

    ,data = checkStatus.data;

    for(var i=0; i

    msg=msg+"周"+(i+1)+":"+data[i].sportName+" ";

    idlist =idlist+data[i].sportId+",";

    }

    }

    ,getCheckLength: function(){ //获取选中数目

    var checkStatus = table.checkStatus('idTest')

    ,data = checkStatus.data;

    layer.msg('选中了:'+ data.length + ' 个');

    }

    ,isAll: function(){ //验证是否全选

    var checkStatus = table.checkStatus('idTest');

    layer.msg(checkStatus.isAll ? '全选': '未全选')

    }

    };

    $('.demoTable .layui-btn').on('click', function(){

    var type = $(this).data('type');

    active[type] ? active[type].call(this) : '';

    });

    });

    function submitmychose(){

    $('#hqsj').trigger("click");

    }

    以上这篇Layui 带多选框表格监听事件以及按钮自动点击写法实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。 ad51e517755f8fd6a7ec83ced4ecfaf3.png

    展开全文
  • 关于使用layui获取表格选框选中的数据的方法

    万次阅读 热门讨论 2018-09-19 18:06:23
    使用layui获取表格选框选中的数据 今天在实现根据表格选框选中的内容进行一系列的操作,一下的内容是基于使用layui模块实现的。首先先简述比较简单的方法,在layui官方文档也是提到的方法。(本人文笔不好,很...

    使用layui获取表格选中的数据

    今天在实现根据表格选中的内容进行一系列的操作,一下的内容是基于使用layui模块实现的。首先先简述比较简单的方法,在layui官方文档也是提到的方法。(本人文笔不好,很多东西写的不好,请多多见谅哈)
    在使用方法渲染的方法实现表格头部工具栏的监听事件或者行数据的监听事件。
    以下截图是关于表格头部工工具栏的监听事件:
    在这里插入图片描述
    (其中括号里面的test为table标签里面lay-filter属性的值,变量data的数据就是选中的数据)

    二使用行工具栏获取行数据,不过该方法在这里说明一些而已,应该没有涉及表格选中与否的问题,以下截图便是关于行工具栏的获取行数据问题:
    在这里插入图片描述
    (其中test依然为table标签里面lay-filter属性的值,变量data的数据就是当前行的数据)

    咳咳,前面只是粗略地和大家说了说layui模板table的工具栏获取选中数据的问题,然后以下就是我最想和大家分享的内容。

    在页面只有一个表格的时候,我们需要对表格选中的数据进行一些增删改查的操作很容易实现。那如果一个页面加载了两个页面,然后需要通过一个按钮对两个两个表格的选中问题进行判断和获取选中的数据。首先如果还是实现table的头部工具栏肯定是不能实现该功能的。

    首先我先把自己的需求说出来,这样好理解吧。
    (项目需要对同一页面的两个表格进行操作,一、需要保证每个表格有且只能选中一条记录才能继续操作,其他情况都跳出错误提示告诉用户,二、需要获取选中的记录的数据,两个表格的选中数据都需要获取)
    其实一开始我自己听懵逼的,后来找找论坛看看,有大神提及到可以去看看table的数据结构,这样就可以一目了然了。懵逼依然,然后半信半疑去看看table的数据结构,如下图所示:
    在这里插入图片描述
    (由上图所示可以看出table的数据结构,在cache下就是我页面中两个table的id,一个为outputTestId,另一个为testId,这个根据自己的定义而定,不是唯一的。
    所示如果需要获取table的所有数据,可以这样写:
    var data = table.cache.testId;(testId为自己定义的table的id)

    看到这里 我们只是知道了怎么获取table的所有数据,可是怎么清楚这些数据中哪些数据是选中的记录呢。别急,看到以下这张图片说明你就会明白了。
    在这里插入图片描述
    (可知,其实每一条记录都有都有一个LAY_CHECKED属性来标记本条记录是不是被选中了,看到这里相信大家都明白了吧)

    只要通过判断每条记录的LAY_CHECKED属性即可获取到选中的数据了。知道了,前面提到的需求就so easy了。

    (注:不懂的,可以联系我哈。然后还有更好方法的话希望大家多多提出,我保证虚心学习!以前没有系统学习过web前端知识,所以有哪里说错了的,请大家指出哈)

    展开全文
  • 我就废话不说了,大家直接看代码吧!希望能帮助到你 如下所示: //点击选中(单选) //单击行勾选checkbox事件 $[removed]("click",".layui-table-body table.layui-table tbody tr", function () { var index = ...
  • layui数据表格获取多选框选中的值

    千次阅读 2020-01-13 11:25:11
    如图所示: 获取需要选中的项的内容 let check_box = table.checkStatus('list').data; let str = ""; for (let i =0; i<check_box.length;...这里的 list 是 你 table 的 id ,可以选择个table ...

    如图所示: 获取需要选中的项的内容

    let check_box =  table.checkStatus('list').data;
    let str = "";
    for (let i =0; i<check_box.length;i++){
        str+=check_box[i].id+",";
    }

    这里的 list 是 你 table  的 id ,可以选择多个table

    展开全文
  • layui表格多选框在翻页时会丢失其他页的选中历史数据,摸鱼等行为已经,本文以较粗浅的方式简单解决这一问题(由于公司工作量量化过于先进!摸鱼危险系数过高,只能简单实现一下现场需求,仅给大家提供参考)。 ...
  • 不是操作骚 也不是组件不够完美 总会遇到这样的需求,记录一下 分析 有点坑就是全选 返 obj.data 是空的 那就只能初始化的时候把数据带进去 取了这么ID 怎么用? ...
  • 项目需求,可以用复选框勾选项目进行提交,如下表IDID测试项标定参数标定值我们已经获取到了表中所有行的数据,全选,部分选都可行,不用选复选框遍历的方式去获取数据table.on('checkbox(test3)', function(obj){...
  • layui选框居中

    2019-09-30 15:06:48
    layui表格选框有时候会出现布局中现象,只需要把style放入页面中就可以实现复选框居中了. 作为一个年青的程序员,不敢说太的话,还是努力给大家多发些有用的文章吧! <style> .layui-table-cell .layui-form-...
  • 场景要求需要点击多选框进行选择数据,并进行导出到excel,但表格的数据并不能完全的导出到excel给用户,并且表头顺序不能乱。其中使用的插件链接如下,可以下载 https://fly.layui.com/extend/excel/#doc 引入步骤...
  • 为什么表格前面的多选框没有垂直居中显示啊? ![图片说明](https://img-ask.csdn.net/upload/201903/28/1553765411_487024.png)
  • layui表格实现多选表格行批量删除

    千次阅读 2020-10-11 20:21:01
    然后表头第一列需要type=“check”复选框。这样才能知道你选中了哪一行,接着通过循环选中行的长度,将该行的ID字段一个个添加到数组中,这样就获取到了需要删除多行的ID值了。 全程图片,完整过程!如不懂,可私聊...
  • 一、layui 实现表单中多选框的全选功能,代码如下: // 动态添加选项 $("#InfoInCardCheck").append(`<label class="layui-form-label">请选择:</label> <input lay-skin="primary" type=...
  • $(document).on("click",".layui-table-body table.layui-table tbody tr",function(){ var obj = event ? event.target : event.srcElement; var tag = obj.tagName; var checkbox =...
  • layui框架数据表格的批量...因为我们要做批量删除所以要在表格里设置多选框来进行选中的数据进行删除,其他数据就如常进行就可以了。 2.接下来就是在页面获取选中的数据,先给表格设置一个ID如下图所示 (1)获取表格
  • 设置序号{ ...开启首列多选框{ type : 'checkbox', fixed : 'left' } 隐藏列{ field : 'tsid', title : '团队关系编号', hide : true } 设置时间格式 (以下举例只显示年月){...
  • 这个是我看到的一个比较详细的,然后与我自己写的有些不同,但还给了我很大的思路。 ...在这里做一个补充,使用layui的时候,想要获取你选中的...之前我的做法是在复选框监听事件 table.on('checkbox(industrySite)', f
  • 表格加入图片之后,发现多选框有一些重复了,而且没有呆着自己该在的位置时: 只需要如下图所示,用红框框柱的地方删掉就可以了 以上是自己的经验笔记,仅供参考 ...
  • layui数据表格checkbox编辑的时候选中

    千次阅读 2018-08-23 16:51:30
    以下代码实现了编辑的时候回显,如果是新增的时候,ids为空数组,如果是编辑,则进行初始化,编辑的思路主要是js模拟复选框的click事件,配合layui监听复选框的方法,把需要的数据进行全局缓存存储,实例中主要靠 ...
  • FEBS-Shiro添加layui数据表格后端排序 ...技术选型 后端 Spring Boot 2.2.1 Mybatis-Plus MySQL 5.7.x,Hikari,Redis Shiro 1.4.2 前端 Layui 2.5.5 Nepadmin formSelects 4.x 多选框 eleTree 树组件...
  • 使用layer-ui中的table的方法即可获取 var checkStatus = layui.table.checkStatus(‘blackTable’).data;
  • div class="layui-btn-group demoTable" style="margin: 10px;"> <button class="layui-btn" id="hqsj" data-type="getCheckData">获取选中行数据</button> <button class="layui-btn" data-...
  • layui表格默认的是多出的内容省略,但是会涉及到重要的信息想全部显示出来,用下面的这个样式就可以 ...记得前面的多选框和编号要去掉fixed: true不然不能和后面的内容在一行上。希望对大家有帮助 ...
  • Layui监听事件

    万次阅读 2019-05-27 19:33:50
    Layui监听事件 开发工具与关键技术:VS MVC、SQL、JS 撰写时间:2019/5/25 表格事件监听可以实现,点击当前的数据,获取到当前的数据,赋值给想显示数据的...监听复选框选择:点击复选框时触发,回调函数返回一个ob...
  • layui基本元素2

    2021-03-28 23:37:58
    文章目录1、导航水平导航垂直/侧边导航面包屑2、选项卡3、表格4、表单1、输入框2、下拉选择框3、复选框4、开关5、单选框6、文本域7、组装行内表单8、忽略美化渲染9、方框表格 1、导航 依赖加载模块:element 水平...

空空如也

空空如也

1 2
收藏数 39
精华内容 15
关键字:

layui表格多选框