使用layui-soul-table实现嵌套表格

最新推荐文章于 2024-05-21 09:32:29 发布
最新推荐文章于 2024-05-21 09:32:29 发布
阅读量3.2k 收藏 6
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38313984/article/details/124839478
版权

 官网:示例文档 | layui-soul-table 

前端代码:

@{ Layout = "~/Views/Shared/_Index.cshtml"; }
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<link href="~/lib/layui-soul-table/soulTable.css" rel="stylesheet" />
<link href="~/lib/layui-soul-table/soulTable.js" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script> 
<div class="tabs-container">
    <ul class="nav nav-tabs">
        <li class="active">
            <a data-toggle="tab" lay-submit="" lay-filter="switch1" aria-expanded="true"> 未审核</a>
        </li>
        <li class="">
            <a data-toggle="tab" lay-submit="" lay-filter="switch2" aria-expanded="false">已审核</a>
        </li>
        <li class="">
            <a data-toggle="tab" lay-submit="" lay-filter="switch3" aria-expanded="false">已拒绝</a>
        </li>
    </ul>
</div>
<div class="layui-row layui-form">
    <div class="layui-col-md3">
        <div class="layui-inline">
            <label class="layui-form-label">表单编码</label>
            <div class="layui-input-inline">
                <input type="text" name="MasterBillNo"
                       class="layui-input" placeholder="请输入表单编码关键字">
            </div>
        </div>
    </div>
    <div class="layui-col-md3">
        <div class="layui-inline">
            <label class="layui-form-label">物料名称</label>
            <div class="layui-input-inline">
                <input type="text" name="MaterialName"
                       class="layui-input" placeholder="请输入物料名称关键字">
            </div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-inline">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input id="startTime" name="StartTime"
                       type="text" class="layui-input time-input" placeholder="开始时间" />
            </div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-inline">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input id="endTime" name="EndTime"
                       type="text" class="layui-input time-input" placeholder="结束时间" />
            </div>
        </div>
    </div>
    <div class="layui-col-md2">
        <button class="layui-btn mgl-20" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i>查询</button>
    </div>
</div>
<table id="myTable2" lay-filter="myTable2"></table>
<script>
    var clickTab = 0;
    $(function () {
    });
    var bodyHeight = $('body').height();
    var souTableHeight = bodyHeight - 100;
    var param = {};
    var checkStatus = 0;
    var allowRows = [];
    var rejectRows = [];
    var cancelRows = [];
    laydate.render({ elem: '#startTime', format: 'yyyy-MM-dd', value: new Date() });
    laydate.render({ elem: '#endTime', format: 'yyyy-MM-dd', value: new Date() });
    param.MasterBillNo = "";
    // 自定义模块
    layui.config({
        base: '/lib/layui-soul-table/',   // 模块目录
    }).extend({// 模块别名
        soulTable: 'soulTable'
    });
    //function soulTable_init(){
        layui.use(['form', 'table', 'soulTable'], function () {
            var table = layui.table,
                form = layui.form,
                soulTable = layui.soulTable;
            table.render({
                elem: '#myTable2',
                url: '@Url.Content("~/MaintainManage/Stock/GetPageListJson")',
                height: souTableHeight,
                toolbar: '<div class="check-btn"><a class="layui-btn layui-btn-sm allow-btn" lay-event="allow">审核通过</a><a class="layui-btn layui-btn-sm  reject-btn" lay-event="reject">审核未通过</a><a class="layui-btn layui-btn-sm  cancel-btn" lay-event="cancel">取消审核</a></div>',
                page: true,
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    {
                        title: '#', width: 50, children: function (row) {
                            console.log(row)
                            return [
                                {
                                    title: '出(入)库详情表',
                                    url: '@Url.Content("~/MaintainManage/Stock/GetDetailList")',
                                    height: 300,
                                    page: false,
                                    where: function (row) {
                                        //row 为当前行数据
                                        console.log(row);
                                        return { BillNo: row.BillNo }
                                    },
                                    cols: [[
                                        { type: 'checkbox', fixed: 'left' },
                                        { field: 'MaterialCode', title: '物料编码', sort: true, filter: true },
                                        { field: 'MaterialName', title: '物料名称', sort: true, filter: true },
                                        { field: 'Qty', title: '数量', filter: true },
                                        { field: 'Unit', title: '单位', sort: true, filter: true },
                                        { field: 'DeviceNo', title: '设备编码', sort: true, filter: true },
                                        { field: 'StockDate', title: '出(入)库日期', sort: true },
                                        { field: 'OutInv', title: '出库仓库', sort: true, filter: true },
                                        { field: 'InInv', title: '入库仓库', sort: true, filter: true },
                                        { field: 'Type', title: '单据类型', filter: true },
                                        { field: 'Remark', title: '备注', filter: true },
                                        { field: 'CreateTime', title: '创建时间', sort: true }
                                    ]]
                                    , done: function () {
                                        soulTable.render(this);
                                    }
                                    , filter: {
                                        bottom: false
                                    }
                                }
                            ]
                        }
                    },
                    { field: 'BillNo', title: '表单编码', sort: true, filter: true },
                    { field: 'WareHouser', title: '入库人', filter: true },
                    { field: 'WarehouseManager', title: '仓管员', filter: true },
                    { field: 'Duty', title: '负责人', filter: { split: ',' }, sort: true },
                    { field: 'BillDate', title: '单据日期', sort: true },
                    { field: 'StatusStr', title: '状态', filter: true, sort: true },
                    { field: 'Remark', title: '备注', filter: true, sort: true },
                ]],
                done: function () {
                    soulTable.render(this);
                    openTab(clickTab);
                }, filter: {
                    bottom: false
                }
            });
            form.on('submit(search)', function (data) {
                debugger;
                var param = {};
                data.field.Status = checkStatus;
                param = data.field;
                table.reload('myTable2', {
                    where: param
                })
                openTab(clickTab);
            }),
            form.on('submit(switch1)', function (data) {
                var param = {};
                param.Status = 0;
                checkStatus = 0;
                table.reload('myTable2', {
                    where: param
                })
                clickTab = 0;
                openTab(clickTab);
            }),
            form.on('submit(switch2)', function (data) {
                var param = {};
                param.Status = 1;
                checkStatus = 1;
                table.reload('myTable2', {
                    where: param
                })
                clickTab = 1;
                openTab(clickTab);
            }) ,
            form.on('submit(switch3)', function (data) {
                var param = {};
                param.Status = 2;
                checkStatus = 2;
                table.reload('myTable2', {
                    where: param
                })
                clickTab = 2;
                openTab(clickTab);
            })
            table.on('toolbar(myTable2)', function (obj) {
                debugger;
                var type = 1;
                if (obj.event === 'allow') {
                    allowRows = soulTable.cache['myTable2'].filter(item => item.LAY_CHECKED)
                }
                if (obj.event === 'reject') {
                    type = 2;
                    rejectRows = soulTable.cache['myTable2'].filter(item => item.LAY_CHECKED)
                }
                if (obj.event === 'cancel') {
                    type = 0;
                    cancelRows = soulTable.cache['myTable2'].filter(item => item.LAY_CHECKED)
                }
                var list=allowRows.length > 0 ? allowRows:(rejectRows.length > 0 ? rejectRows:cancelRows);
                 zz.ajax({
                    url: '@Url.Content("~/MaintainManage/Stock/UpdateStatus")',
                    type: "post",
                     data: { "type":type,"list": list},
                        success: function (obj) {
                            if (obj.Tag == 1) {
                                zz.msgSuccess(obj.Message);
                                allowRows = [];
                                rejectRows = [];
                                cancelRows = [];
                                table.reload('myTable2', {});
                                openTab(clickTab);
                            }
                            else {
                                zz.msgError(obj.Message);
                            }
                        }
                    });
            });
        })
    //}
    function statusChoose(statusId) {
        alert(statusId);
    }
    function checkPass() {
    }
    function openTab(clickTab) {
        switch (clickTab) {
            case 0:
                $(".allow-btn").show();
                $(".reject-btn").show();
                $(".cancel-btn").hide();
                break;
            default:
                $(".allow-btn").hide();
                $(".reject-btn").hide();
                $(".cancel-btn").show();
                break;
        }
    }
</script>

 数据格式

父数据格式
"data":[{"Id":186,"BillNo":"STI2207290002","WareHouser":null,"WarehouseManager":null,"Duty":null,"BillDate":"2022-07-29","OnUse":null,"Status":0,"StatusStr":"0.未审核","Remark":null}

孩子数据格式
"data":[{"Id":378,"MasterBillNo":null,"MaterialCode":"xxxxxx","MaterialName":"xxxxxx","Qty":1,"Type":"xxxxxx","Remark":"xxxxxx","StockDate":"2022-01-01","CreateTime":"2022-07-29 13:07:40","OutInv":null,"InInv":"xxxxxx","OutInvName":null,"InInvName":"xxxxxx","DeviceNo":"xxxxxx","Unit":"个"}]
qq_38313984
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui根据条件显示列_layui-soul-table
weixin_39835321的博客
12-19 1578
给 layui-table 注入点灵魂扩展功能表头筛选、自定义条件(支持前端筛选、后台筛选介绍请看 三、后台筛选)拖动列调整顺序、隐藏显示列excel导出(根据筛选条件和列顺序导出)子表(表中表、无限层级、子表同样支持前3个功能)5.拖动行6.右击快捷菜单7.合计栏支持固定列8.双击自适应列宽9.右侧固定列 列宽拖动改到单元格左侧效果1.表头筛选效果2.编辑筛选效果筛选明代姓张的 或 唐代姓李的的...
layui-高级表格-soul-table.rar
12-06
layui的插件效果，优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，...
提升layui-table体验：layui-soul-table，赋予表格新灵魂
最新发布
gitblog_00093的博客
05-21 521
提升layui-table体验：layui-soul-table，赋予表格新灵魂 项目地址:https://gitcode.com/yelog/layui-soul-table layui-soul-table 是一个针对 layui v2.6.7 版本的增强插件，它带来了丰富的交互功能和灵活的定制选项，旨在提升你的表格应用体验。如果你正在寻找一个既强大又易于集成的表格解决方案，那么这将是你的理想...
layui soulTable文档
月来better
07-07 1054
layui soulTable文档地址：https://www.layuicdn.com/extend/layui-soul-table/1.5.3/index.html#/zh-CN/component/filter/header
layui扩展组件—— soulTable之编辑筛选条件隐藏
qq_36636312的博客
10-30 2925
这是官网的效果图 但是在使用的使用根本不需要下面的编辑筛选条件，因为标题中漏斗的编辑筛选条件等同于这个操作，所以我要实现的目标就是隐藏下面的图表，操作后效果如图 jsp代码： <style> .soul-bottom-contion { height: 31px; /*line-height: 29px;*/ border-top: solid 1px #e6e6e6; dis
layui 数据表格 sort排序，filter过滤——soulTable
qq_36636312的博客
09-04 3428
1，效果图 2，页面代码 <div class="fp-table" style="margin-left:0.5%;width: 86%"> <table id="fapztable" lay-filter="faptool" style="margin-bottom: 0px;"></table> </div> 3，js代码 //引入扩展组件 layui.config({ base: '/static
layui数据表格实现表格中嵌套表格，并且可以折叠展开（小小修正）
ylens的博客
03-27 1060
因项目需要layui数据表格实现表格嵌套，且要可以折叠。,也许没有正经学过^^的原因，无法完全复现。3、最后监听箭头显示和隐藏对应的表格处的改动。改成了自己可以使用的状态。2、与原博主不同的地方。经过2日努力，终于在。
layui-高级表格-soul-table功能-HTML源码
10-02
在以上代码中，我们首先引入layui和soul-table的相关资源，然后在JavaScript中使用`layui.use()`加载模块，初始化表格并应用soulTable的配置。`table.render()`方法用于定义表格结构和数据源，而`soulTable.config`...
layui-soul-table:layui-table 表头筛选、列顺序调整、列快速隐藏、excel导出等
05-05
给 layui-table 注入点灵魂 当前layui版本 v2.5.6 在线demo及文档： 国内下载地址: 扩展功能 表头筛选、自定义条件（支持前端筛选、后台筛选介绍请看 ） 拖动列调整顺序、隐藏显示列 excel导出（根据筛选条件和列...
layui-soul-table.zip
11-02
layui-soul-table.zip 是一个包含layui插件的压缩包，主要关注的是表格功能的增强，提供了Excel导入导出、JavaScript操作、CSS样式以及表格拖动排序等特性。layui是一款轻量级的前端UI框架，其设计简洁、模块化，...
soulTable.js
07-08
layui表格自适应宽度所需要的js　　
layui-soul-table-java:layui-soul-table 后台java版
04-28
layui-soul-table 后台java版 当前soul-table版本 v1.0, layui版本：v2.5.4 mybatis版: master分支 mybatis-plus版: mybatis-plus分支 hibernate版: hibernate分支 所有筛选demo： 仅后台java版demo： 当然你也可以下载此项目运行查看。 soulTable的前台使用方法跳转到 查看，这里就不赘述了。 这里只讲如何使用后台筛选，喜欢的点个 start， 谢谢:folded_hands: 快速上手 1.环境基础 由于插件是基于 mybatis 的，所以项目要引用 mybatis, 由于引用 mybatis 不是本文重点，所以有需要自行网上查找，或参考本项目代码。 2.将插件引入项目 1）前端插件（js、css）的引入参考 2) 将文件 FilterSo SoulTableInterceptor Reflect
同一网页多重嵌套的TAB选项卡.rar
07-10
在网页上显示多个选项卡，多重嵌套的网页TAB标签特效，点击触发和鼠标滑过触发的都包括在内，根据自己的需要可选用不同的触发版本。其实通过点击的那种，也就是大家熟悉的选项卡特效，鼠标滑上去就触发的就是滑动门效果，个人认为。本例中，有tab、news两组标签：tab-[日记][民间][知识][娱乐]、news-[资讯][科技][E-file][站内][乐][新闻][评论]。
layui框架学习（36：数据表格_复杂表头）
gc_2299的博客
07-31 1515
学习并记录layui框架中内置模块的数据表格模块中复杂表头的设置方式。
Layui数据表格嵌套文件上传按钮
我的博客
04-22 1035
Layui数据表格嵌套文件上传按钮，根据行数据id上传文件。JS初始化并渲染成文件上传按钮。
layui多个tab加载数据并在标题显示每个tab的数据条数
ITSM/ITIL/网络安全/IT运维
04-28 933
能描述 在页面中有多个tab需要切换，页面加载或点击搜索按钮时异步获取全部tab的数据，并在tab的表头中显示每个tab的数据条数。 效果如图所示： 关键的html代码： <div class="layui-card-body"> <div class="layui-tab layui-tab-card"> <ul class="layui-tab-title" style="padding-right: 30px;height: ...
使用X-admin(Layui)前端框架实现新Tab页面内刷新其他Tab页面的解决方案
奇妙的Bug之旅
10-23 460
在Web开发中，我们经常会遇到需要在打开新Tab页面后刷新其他Tab页面的需求。本文将介绍如何使用X-admin(Layui)前端框架来实现这一功能，并提供详细的代码片段来帮助您更好地理解和应用这些技术。
layui-soul-table 快速隐藏列
09-08
layui-soul-table 是一款基于layui框架开发的用于展示数据的表格插件。要快速隐藏列，可以通过以下步骤进行操作： 1. 首先，确保已加载layui和layui-soul-table的相关资源文件。可以在页面中引入layui和layui-soul-table的CSS和JS文件，例如： ```html <link rel="stylesheet" href="path/to/layui/css/layui.css"> <link rel="stylesheet" href="path/to/layui-soul-table/soulTable.css"> <script src="path/to/layui/layui.js"></script> <script src="path/to/layui-soul-table/soulTable.js"></script> ``` 2. 在HTML页面中，创建一个具有固定id的表格元素，例如： ```html <table id="demo" lay-filter="test"></table> ``` 3. 在JavaScript代码中，使用layui-soul-table的自定义参数来创建表格，并设置隐藏列的显示属性。例如： ```javascript layui.use(['table', 'soulTable'], function(){ var table = layui.table; var soulTable = layui.soulTable; table.render({ elem: '#demo', url: '/api/data', // 数据接口 cols: [[ {field:'id', title: 'ID'}, {field:'name', title: '名称'}, {field:'age', title: '年龄'}, // 其他列 {field:'操作', title: '操作', toolbar: '#barDemo', width: 150} // 需要隐藏的列 ]], }); soulTable.on('filter(test)', function(data){ // 判断隐藏列的显示状态 var isHide = data.isHide; if(isHide){ $('#demo .layui-table-view .layui-table').find('[data-field="操作"]').hide(); }else{ $('#demo .layui-table-view .layui-table').find('[data-field="操作"]').show(); } }); }); ``` 通过以上步骤，就可以在 layui-soul-table 中快速隐藏指定的列。具体实现是通过监听"filter(test)"事件，判断隐藏列的状态，然后利用jQuery的hide()和show()方法来控制目标列的显示属性。使用这种方法，我们可以方便地实现快速隐藏列功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值