精华内容
下载资源
问答
  • Layui表格添加操作列电脑版发表于:2020/6/11 14:44html:获取选中行数据获取选中数目验证是否全选编辑更新删除js:layui.use('table',function(){vartable=layui.table;table.render({elem:'#test',url:'/home/get...

    Layui表格添加操作列

    电脑版发表于:2020/6/11 14:44

    html:

    获取选中行数据

    获取选中数目

    验证是否全选

    编辑

    更新

    删除

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

    var table = layui.table;

    table.render({

    elem: '#test'

    , url: '/home/getdata'

    , limit: 5

    , limits: [5, 10, 15, 20]

    , toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板

    , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增

    , cols: [[

    { type: 'checkbox', fixed: 'left' }

    , { field: 'Id', width: 80, title: 'ID', sort: true }

    , { field: 'UserName', title: '用户名' }

    , { field: 'Number', title: '学号', sort: true }

    , { field: 'UClass', title: '班级' }

    , { field: 'CheckType', title: '状态' } //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增

    , { field: 'IDCard', title: '积分', sort: true }

    , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }

    ]], page: true

    });

    //头工具栏事件

    table.on('toolbar(test)', function (obj) {

    var checkStatus = table.checkStatus(obj.config.id);

    switch (obj.event) {

    case 'getCheckData':

    var data = checkStatus.data;

    layer.alert(JSON.stringify(data));

    break;

    case 'getCheckLength':

    var data = checkStatus.data;

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

    break;

    case 'isAll':

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

    break;

    //自定义头工具栏右侧图标 - 提示

    case 'LAYTABLE_TIPS':

    layer.alert('这是工具栏右侧自定义的一个图标按钮');

    break;

    };

    });

    //监听行工具事件

    table.on('tool(test)', function (obj) {

    var data = obj.data;

    console.log(obj)

    if (obj.event === 'del') {

    layer.confirm('真的删除行么', function (index) {

    obj.del();

    layer.close(index);

    });

    }

    else if ("update" == obj.event) {

    alert("你点击了更新");

    }

    else if (obj.event === 'edit') {

    layer.prompt({

    formType: 2

    , value: data.email

    }, function (value, index) {

    obj.update({

    email: value

    });

    layer.close(index);

    });

    }

    });

    });

    注意:table.on('tool(test)'

    layui绑定事件的时候这里的test并不是表格的id,而是lay-filter="test",所以这里如果没有写lay-filter熟悉事件是绑定不了的。其实可以看到如果是用的id的情况,layui前面也是会加#井号的

    展开全文
  • 效果如下: 1、找到layui中的table.js文件,在变量table中加入属性,如图红框中内容: fiexdRowHeight:是否开启固定行高,默认是falsefiexdRowHeight_rows:表格中显示条数,默认是10条以上两个参数都可以通过自己...

    实现效果:表头和底部分页固定,鼠标滚动只会滚顶body中数据。效果如下:

    1、找到layui中的table.js文件,在变量table中加入属性,如图红框中内容:

    fiexdRowHeight:是否开启固定行高,默认是false

    fiexdRowHeight_rows:表格中显示条数,默认是10条

    以上两个参数都可以通过自己传入参数值

    2、找到pullData函数:

    在此函数中ajax异步请求成功回调的success函数中最后添加如下代码:

    //固定行高、表头处理

    if(Object.prototype.toString.call(options.fiexdRowHeight).slice(8, -1) === 'Boolean' && options.fiexdRowHeight) {

    var div_ = $("[lay-id='" + options.id +  "']")

    var tr_len = div_.find(ELEM_MAIN).find("tr").length

    if(tr_len > 10){

    if(Object.prototype.toString.call(options.fiexdRowHeight_rows).slice(8, -1) !== 'Number') {

    options.fiexdRowHeight_rows = 10

    }

    var height_main = (options.fiexdRowHeight_rows * 39) + 'px'

    var height_fixed = (options.fiexdRowHeight_rows * 39) + 'px'

    //如果出现横向滚动条时

    if(div_[0].parentNode.clientWidth < document.getElementsByClassName('layui-table-main')[0].getElementsByClassName('layui-table')[0].clientWidth) {

    height_main = ((options.fiexdRowHeight_rows * 39) + 18) + 'px'

    }

    div_.find(ELEM_MAIN).css("height", height_main);

    div_.find(ELEM_FIXL).find(ELEM_BODY).css("height", height_fixed);

    div_.find(ELEM_FIXR).find(ELEM_BODY).css("height", height_fixed);

    }else {

    div_.find(ELEM_MAIN).css("height", "auto");

    div_.find(ELEM_FIXL).find(ELEM_BODY).css("height", "auto");

    div_.find(ELEM_FIXR).find(ELEM_BODY).css("height", "auto");

    }

    }

    3、应用:如图:

    展开全文
  • a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i> 编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-...
    {{# if(d.isShow==false){ }}
    	<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i> 编辑</a>
    	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
    {{# } }}
    
    展开全文
  • 这个功能layui 本身可能没直接提供给我们相关的功能 ,需要自己写出来了 有几个疑点 可能要...在全局中定义一个数据对象, 然后赋值到 layui表格的数据 中 然后我们查看每次勾选 之后 我们的数据 在 经过layui处理之...

    这个功能layui 本身可能没直接提供给我们相关的功能  ,需要自己写出来了  有几个疑点  可能要一一排查出来

    核心点: 能不能有一个状态值 能判断当前行的数据 是否是勾选状态

    然后就可以 一步一步跟踪判断 来获取我们想要的答案了

    首选获取一个状态值 去判断layui 如何判断用户是否勾选呢  我们这个可以利用 js的引用变量的特性追踪变量的变化

    开始书写代码

    在全局中定义一个数据对象,  然后赋值到 layui表格的数据 中  然后我们查看每次勾选 之后 我们的数据  在 经过layui处理之后发生了什么变化

    layui.use(['table'], function() {
                var table = layui.table;
                var data = [
                    { id: 1, name: "张三"},
                    { id: 2, name: "张三" },
                    { id: 3, name: "张三" },
                    { id: 4, name: "张三" },
                    { id: 5, name: "张三" },
                    { id: 6, name: "张三" },
                    { id: 7, name: "张三" },
                    { id: 8, name: "张三" },
                    { id: 9, name: "张三" },
                    { id: 10, name: "张三" },
                    { id: 11, name: "张三"},
                    { id: 12, name: "张三"},
                    { id: 13, name: "张三" },
                    { id: 14, name: "张三" },
                    { id: 15, name: "张三" },
                    { id: 16, name: "张三" },
    
                ]
                table.render({
                    elem: "#test",
                    page: true,
                    cols: [[ //表头
                        { type: 'checkbox', fixed: 'left' }
                        , { field: 'id', title: '编号', width: 80 }
                        , { field: 'name', title: '姓名', width: 80 },
                    ]],
                    data
                })
                // 监听复选框勾选状态
                table.on('checkbox(test)', function (obj) {
                    console.log(data)
                });
            })

    点击一次 我们看下控制台

    看到图中知道了 layui 原来是 在 变量中 加入了属性  LAY_CHECKED  来判断是否选中  那我们可以提前加上  让他初始渲染的时候 就勾住 不知道可不可以 我们去试试看

    { id: 1, name: "张三", LAY_CHECKED: true},   在data中 手动加上一个属性看下页面中表格的状态

    确实  渲染的时候 就勾中了   我们的猜想是正确的  那么这下 我们的问题  好像都可以解决 了  

    2. 首先我们在上面加一个 勾选的数量的展示  元素   追踪用户跨页勾选的个数  同时设置一个 获取勾选数据的按钮

        <div>勾选的数量: <span id="num">0</span> <button id="getData" class="layui-btn layui-btn-normal">获取勾选的数据</button> </div>
    

     

    根据  我们之前定义的 全局变量 data 数据中  每次  LAY_CHECKED = true 的 个数来判断勾选的 个数   这下 我们想要的 结果 就浮出水面了

    1. 先提前把我们要赋值的变量全部加上 LAY_CHECKED = false;

    data.forEach(item => (item.LAY_CHECKED = false))

    监听复选框点击事件

    // 监听复选框勾选状态
                table.on('checkbox(test)', function (obj) {
                    var count = 0;
                    for(var item of data) {
                        item.LAY_CHECKED == true && count ++;
                    }
                    $('#num').text(count); 
                });
    // 获取勾选的数据
                $('#getData').click(function() {
                    var checkData = data.filter( item => item.LAY_CHECKED == true)
                    console.log(checkData)
                })

     

    然后 就大功告成了 就是这样简单了  我们看下 实际的效果吧

     

    关注我 持续更新 前端 知识     好像bug 就没有在我手上存活超过两天的(本人现在还是个菜鸟前端, 连vue都不会的小白)    嘻嘻   加油

    展开全文
  • table.on('checkbox(table-id)', ... //当前是否选中状态 console.log(obj.data); //选中行的相关数据 console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one console.log(ta...
  • html如下:获取选中行数据获取选中数目验证是否全选JavaScript:layui.use('table', function(){var table = layui.table;//监听表格复选框选择table.on('checkbox(user)', function(obj){});var $ = layui.$, ...
  • 想必用过layui渲染表格的朋友都知道,从数据库直接查询出来的二进制图片数据,不仅传不到页面,也无法通过layui表格渲染出来。 二、查询图片执行渲染 1、 既然不能传二进制数据,那就用其他的东西代替一下它是否...
  • 效果如下: 1、找到layui中的table.js文件,在变量table中加入属性,如图红框中内容: fiexdRowHeight:是否开启固定行高,默认是falsefiexdRowHeight_rows:表格中显示条数,默认是10条以上两个参数都可以通过自己...
  • 判断表格数据的是否可编辑;2.判断每一行数据是否能被选中提交;可编辑性idEdit是标识字段:1为可编辑,0为不可编辑。{field: 'itemValue', title: '数据',edit:"text",editFn:function (data) {return data["isEdit...
  • 因为使用了不分页的表格,但是请求数据的时候加了page和limit参数,导致layui表格内的数据闪烁。 解决方法: 检查请求数据接口的方法,根据是否需要分页来判断是否传参 ...
  • 这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格。1、创建一个作用域合适的JS对象数组用来保存数据表格中的原始数据。2、将上一步创建的JS对象数组也就是原始...
  • 解决Layui表格需表头固定悬浮的问题

    千次阅读 2020-06-30 16:16:39
    当表格过长,表头离开页面可视范围时把表头固定悬浮在上面,如下: ...先在Layui表格渲染完成的回调函数里写: done: function () {//表格渲染完成的回调函数 var headertop = $(".layui-table-header").offset().to
  • Layui表格内图片渲染以及上传图片到数据库(下) 文献种类:专题技术文献; 开发工具与关键技术:VS 上篇是指layui表格内图片渲染,那么这里是将图上在layui表格内上传到数据库中 一样的先看最终实现效果 1.没有...
  • 实现这个功能,参考了layui官方文档实例 官方发布了工具栏插件,筛选所需列,经过操作得知,选中的列会被添加layui-hide的类 需求:当系统未设置培训费,则不展示培训费列,反之展示 代码如下 table.render({ elem: '#...
  • 今天早上想将后台中的表格部分使用layui的动态表格模块来实现,早上简单的看了下手册,晚上回家详细的看了手册,写了代码,实现了功能。下面直接上代码及效果图:一、效果图描述:实现可表头宽度自动适应,对关键...
  • 获取选中行数据获取选中数目验证是否全选提交选择ID运动名运动时长运动类型var msg="";var idlist="";layui.use('table', function(){var table = layui.table;//监听表格复选框选择table.on('checkbox(demo)', ...
  • layui表格中监听开关并拿到该行id和开关状态 - Fly社区​fly.layui.comHTML: table - 数据表格 和 templet - 自定义列模板<js: 配置‘开关’,{js: 开关监听//监听'是否设置新生注册显示'操作 ...
  • LayUI表格数据显示问题

    千次阅读 2018-10-10 15:55:40
    解决一: 直接在浏览器中查询数据是否正确 使用JSON JavaScriptSerializer 进行序列化或反序列化时出错。字符串的长度超过了为 maxJsonLength属性 解决方法一: 解决办法是在web.config增加如下节点到&amp;lt...
  • 1 // 批量删除功能 2 // 1.得到table选中行内容 3 // 2.得到删除需要的唯一值,一般是id; 4 // 3.将所要删除的项加入到数组中; 5 // 4.判断是否选中;... 6 // 5.... 7 var $=layui.$,active={ 8 deLink:...
  • layui表格复选框回显

    千次阅读 2019-06-27 11:31:17
    是否全选状态(默认:false)。必须复选框列开启后才有效,如果设置 true,则表示复选框默认全部选中。 true 从文档中我们看到,当数据中,增加一个字段LAY_CHECKED,并且为true,就会勾选上。我们就可以按照规则...
  • layui表格复选框动态显示

    千次阅读 2019-09-18 13:39:36
    1.判断表格数据的是否可编辑; 2.判断每一行数据是否能被选中提交; 可编辑性 idEdit是标识字段:1为可编辑,0为不可编辑。 {field: 'itemValue', title: '数据', edit:"text",editFn:function (data) { return ...
  • 静态表格:价格操作添加删除//因为动态添加的元素class属性是无效的,所以不能用$('.add').click(function(){});$('body').on('click', '.add', function() {//你要添加的htmlvar html = ''+''+''+'添加'+'删除'+''+...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 142
精华内容 56
关键字:

layui表格是否