layui table 表格折叠自定义(这个思路可以适用所有table组件)

image.png

列表横向滚动也能自适应根据截图操作,首页有联系方式

第一步:
image.png

添加图标并绑定事件

第二步:
image.png

使用监听行工具事件拿到obj里面的tr对象
第三步:
image.png

根据当前this对象给父级tr加一个统计tr并在当前位置之后

总结


image.png
LoinsInsertAfter(newElement, targetElement) {
        var parent = targetElement.parentNode;
        if (parent.lastChild == targetElement) {
            parent.appendChild(newElement);
        } else {
            parent.insertBefore(newElement, targetElement.nextSibling);
        }
    }
    LoinsContent(event, newNo, $, obj) { // event 当前this指向对象,newNo展示的对象,$,jquery,obj  行监听状态的obj对象
        if ($(event)[0].classList.value.indexOf('layui-icon-plus-square') > -1) {
            $(event)[0].classList.add('layui-icon-minus-square');
            $(event)[0].classList.remove('layui-icon-plus-square');
            var oTest = $(event).parent().parent().parent();
            var newNode = document.createElement("tr");
            newNode.setAttribute('loinsContent', $(obj.tr).attr('data-index'))
                // var reforeNode = $(event).parent().parent().parent();`He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
                // var _html = `<td colspan=${cols.length+1}><div>40614124728974281479247982478924789247902740189247829749827</div></td>`
            newNode.innerHTML = newNo;
            new Utils().LoinsInsertAfter(newNode, oTest[0]);
        } else {
            $(event)[0].classList.add('layui-icon-plus-square');
            $(event)[0].classList.remove('layui-icon-minus-square');
            $(event).parent().parent().parent().parent().find('tr[loinscontent="' + $(obj.tr).attr('data-index') + '"]').remove();
        }
    }

根据实际项目修改,这只是个思路
demo:https://libai-icon.github.io/views/tilAdmin/index.html#/test/contentTable

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 有的单位,春节期间,放假, 有的单位,没有假期,只有轮休, 我所在的企业,越是节假日,管理越严格 因为,我们的化工...
    桐雪晶莹阅读 3,122评论 0 4
  • 我一直觉的人在面对苦难和挫折的时候最好的处理方法是一直向前,因为在路上会让你学到跟多战胜苦难的方法,而不是停留...
    不争无忧阅读 3,192评论 0 1
  • 姓名:吴艺琳 公司:无锡宏广电容器有限公司 组别:第519期六项精进利他一组组员 【日精进打卡第8天】 【知—学习...
    1530b0c2e3a1阅读 1,400评论 0 0
  • 穿过旷野的风,你慢些走,我用沉默告诉你我醉了酒。 飘向天边的云,你慢些走,我用奔跑告诉你我不回头。 《乌兰巴托的夜...
    章鱼闲话阅读 4,125评论 2 3
  • 近期读了刘润老师的《互联网+小米案例版》,分享一点读书心得。 互联网+的时代导致市场的主权已经交给了用户。 一开始...
    朱团辉阅读 4,093评论 1 21

友情链接更多精彩内容