精华内容
下载资源
问答
  • 1.layui 删除 或多行 实例代码;(这个是删除表名的数据,后台并没有删除,自己去实现很好实现的哟) var DeleteData = []; var FilterArray = function (DataIndex) { DeleteData = filter_array(Delete...

    1.layui  删除一行 或多行  实例代码;(这个是删除表名的行数据,后台并没有删除,自己去实现很好实现的哟)

     var DeleteData = [];
            var FilterArray = function (DataIndex) {
                DeleteData = filter_array(DeleteData);
                for (var i = 0; i < DeleteData.length; i++) {
                    if (DeleteData[i] == DataIndex) {
                        delete DeleteData[i];
                    }
                    DeleteData = filter_array(DeleteData);
                }
                return DeleteData;
            }
            function filter_array(array) {
                return array.filter(item => item);
            }
    

     

     //单击行勾选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(".layui-table-fixed.layui-table-fixed-l").length > 0) {
                        tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
                    } else {
                        tableDiv = tableBox.find(".layui-table-body.layui-table-main");
                    }
                    var CheckLength = tableDiv.find("tr[data-index=" + index + "]").find(
                        "td div.layui-form-checked").length;
                    //删除的代码如下
                    if (CheckLength == 0) {
                        DeleteData.push(index);
                    } else {
                        FilterArray(index);
                    }
                    ///
                    var checkCell = tableDiv.find("tr[data-index=" + index + "]").find(
                        "td div.laytable-cell-checkbox div.layui-form-checkbox I");
                    if (checkCell.length > 0) {
                        checkCell.click();
                    }
                });
    
                $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
                    e.stopPropagation();
                });
    
       //无刷新删除
        for (var i = 0; i < DeleteData.length; i++) {
             $("tr[data-index='" + DeleteData[i] + "']").remove();
         }

    1.阿里云米店:https://mi.aliyun.com/shop/36078 

    扫一扫 谢谢

    展开全文
  • 删除所有选中</button> js: table.on('checkbox(table)', function(obj){ var data = obj.data; }); layui.jquery, active = { getid: function () { var arr = []; var checkStatus = table.check...
  • 所以在删除表格的某一时既要删除dom结构的又要移除Table内缓存的。 根据官方网站提供的文档中可以监听表格,监听自定义列事件(event事件),然后可以获取到当前事件的数据,使用obj.del()即可。但是这种...

    Table里面数据可以存放在两个地方,一个是dom结构,一个是Table内的缓存。所以在删除表格的某一行时既要删除dom结构的行又要移除Table内缓存的行。

    根据官方网站提供的文档中可以监听表格,监听自定义列事件(event事件),然后可以获取到当前事件行的数据,使用obj.del()即可。不过这种方式存在一个问题,页面上的行确实删除了,但是会留下空数据,可以看一下图片

    如果不提交表格数据或者不新增行的情况下,直接删除dom结构的行是没有问题的,但是提交表格数据或者新增行就会存在影响了,这里主要说明提交表格数据解决办法。

    移除表格缓存的行可以通过循环的方式来实现,通过图可以看出初始行数是7,删除一行之后是6

    也可以通过获取当前行的索引来实现移除

    删除行之后要重新加载表格的数据,不然从删除第二笔数据开始,Table缓存数据不对,如下图所示结果

    来看看重新加载表格之后所示的数据

    展开全文
  • 纯html+js+css ,只要实现其中ajax接口,可以和任何后端语言无缝对接 附demo:http://www.shagua.wiki/project/3?p=123

    纯html+js+css ,只要实现其中ajax接口,可以和任何后端语言无缝对接
    在这里插入图片描述
    附demo:http://www.shagua.wiki/project/3?p=123

    展开全文
  • layui table 多行删除(id获取)

    千次阅读 2018-04-19 15:31:09
    &lt;button class="layui-btn layui-btn-danger"...删除所有选中&lt;/button&gt;js:table.on('checkbox(table)', function(obj){ var data = obj.data; }); layui.jquery, act...

    <button class="layui-btn layui-btn-danger" data-type="getid" οnclick="delAll()">删除所有选中行</button>

    js:

    table.on('checkbox(table)', function(obj){
        var data = obj.data;
    });
    layui.jquery, active = {
        getid: function () {
            var arr = [];
            var checkStatus = table.checkStatus('tableid')
                , data = checkStatus.data;
            for (var i = 0; i < data.length; i++) {    //循环筛选出id
                arr.push(data[i].id);
            }
            $("#ids").val(arr);
        }
    }
    $('.layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    function delAll(){
            layer.confirm('确定删除吗?', {btn: ['确定删除', '取消']}, function (index) {
                var a1 = $("#ids").val(); //取得已获取的ids
                $.ajax({  
            .......       
                });
            });
    
    }

    展开全文
  • Layui(table删除行)

    千次阅读 2019-07-27 09:16:51
    LayuiTable里面数据可以存放在两个地方,一个是dom结构,一个是Table内的缓存。Dom结构的数据用来显示在视图层方便观看,缓存则是用来修改等操作。通常要保存的数据都是获取换存里面的数据。视图层的数据删除很容易...
  • layui table点击按钮添加、删除

    万次阅读 2018-10-21 15:31:05
    layui table点击按钮添加、删除 好久没发东西了,今天说一下最近学到的东西吧。 首先这一篇是layui table点击按钮动态添加、删除的实现。 当然别的也可以,比如添加div之类的,只是这里以layui table来举例...
  • 1.layui 删除 或多行 实例代码;(这个是删除表名的数据,后台并没有删除,自己去实现很好实现的哟)var DeleteData = [];var FilterArray = function (DataIndex) {DeleteData = filter_array(DeleteData);for ...
  • layui table利用参数新增,修改,删除,查询,双击数据获取本行数据等。模块化使用layui table表格,通过二次封装实现语法上的解耦使用layui table,使用参数就可以以及外部的方法调用即可实现对layui table表格的操作...
  • tablelayui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定、固定列左...下边整理了一个例子:layer学习编辑删除layui.use(['table'...
  • layui table点击按钮添加、删除 今天学习别人的方法渲染表格动态添加、修改、删除行。 //表格渲染 var tableId = "dataTable"; var tableIns = table.render({ elem: "#" + tableId, id: tableId, data: ...
  • 记录:layui table.render动态追加(删除)一数据,并对原有数据进行渲染 场景:修改商品入库任务时: 首先进行对客户已选择的入库商品进行遍历渲染 可追加入库商品,点击新增商品按钮时,弹出此客户名下的商品列表...
  • layui table利用参数对表格数据新增,编辑修改,删除,查询,模块功能扩展-双击数据获取本行数据等。模块化使用layui table表格,通过二次封装实现语法...
  • Layui表格添加编辑删除操作和保存数据代码,基于layui table添加一并实现在编辑记录后保存数据的方法,可用于对表格数据快速维护,展示修改功能,灵活自如。
  • 不过我在使用layui的动态表格组件时遇到了一个问题,更新一条数据时,对应的每的toolbar(就是右边编辑/查看/删除这类按钮区)没有根据数据进行重新动态更新。我通过源码阅读,了解到了为什么没有更新了,并完美修复...
  • Layui表格删除行

    千次阅读 2019-06-18 08:06:20
    Layui表格删除行 开发工具与关键技术:MVC 作者:盘洪源 撰写时间:2019年6月17日星期一 在这里我要实现的一个删除行的效果就是通过点击键盘上的delete按钮来删除表格的选中,想要...ShopID = layuiTable.render(...
  • (1)操作栏按钮事件监听 table.on('tool(zongdi_extra_table)', function (obj) { if (obj.event == 'del') {//绑定的...//删除表格元素样式 tableData.splice(index, 1);//删除表格数据缓存 } } (2)单元
  • 今天改了一个bug,layui table关闭了分页,但是只默认显示前10条的数据,看了官方也说这是一个bug,目前的解决办法就是在page为false的...新增、修改、删除行数据的时候 var oldData = table.cache["indiTab...
  • 1、CSS代码,用于table里的下拉框不被....layui-table-cell,.layui-table-box ,.layui-table-body{ overflow: visible !important; } td .layui-form-select { margin-top: -10px; margin-left: -15px; margin-...

空空如也

空空如也

1 2 3 4 5
收藏数 100
精华内容 40
关键字:

layuitable行删除