layui-实现上下表,父子表单选加载事件

news2024/11/15 11:03:07

layui-实现上下表,父子表单选加载事件

    • 代码
      • HTML代码
      • 表格数据加载
      • 点击主表行,加载子表数据
    • 实现效果图

代码

主子表,实现点击主表的单元格实现选中主表,并加载子表

HTML代码

//主表
<table class="layui-hide" id="SysFeeTable" lay-filter="SysFeeTable"></table>
//子表
<table class="layui-hide" id="SysFeeScheduleTable" lay-filter="SysFeeScheduleTable">

表格数据加载

实现单选一定要加{ type: 'radio' },

//主表数据
table.render({
        elem: '#SysFeeTable',
        url: '/FeeCollection/GetSysFeeList', //数据接口
        where: getParams(),  //获取查询参数
        page: true, //开启分页
        height: 450,
        limit: 30,
        limits: [30, 60, 90, 200, 500],
        toolbar: '#headbar',
        cols: [[ //表头
            { type: 'radio' },
            { field: 'SF_CODE_TEXT', title: WJ_Dic4Js('费目名称'), align: 'center', width: 180 },
            {
                field: 'SF_PAYMENTFLAG', title: WJ_Dic4Js('收付标志'), align: 'center', width: 120,
                templet: function (d) {
                    if (d.SF_PAYMENTFLAG == "S") {
                        return "收";
                    } else {
                        return "付";
                    }
                }
            },
            { field: 'SF_BILLING_UNIT', title: WJ_Dic4Js('费目计价单位'), align: 'center', width: 140 },
            { field: 'CREATED', title: WJ_Dic4Js('创建时间'), align: 'center', width: 160 },
            { field: 'CREATOR', title: WJ_Dic4Js('创建人'), align: 'center', width: 140 },
            { field: 'LASTMODIFIED', title: WJ_Dic4Js('操作时间'), align: 'center', width: 160 },
            { field: 'LASTMODIFIER', title: WJ_Dic4Js('操作人'), align: 'center', width: 140 },
            { title: WJ_Dic4Js('操作'), align: 'center', toolbar: '#rowsbar', width: 280, fixed: 'right' }

        ]],
        parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
            return {
                "code": res.state, //解析接口状态
                "msg": res.message, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.rows //解析数据列表
            };
        }, done: function (res, curr, count) {
            WJ_DIC_CHANGE_INNER();

        }
    });

//子表数据加载
  table.render({
        elem: '#SysFeeScheduleTable',
        data: [],
        page: true, //开启分页
        height: 450,
        limit: 30,
        toolbar: '#headbar1',
        cols: [[ //表头
            { type: 'radio' },
            { field: 'SFS_NAME', title: WJ_Dic4Js('费目细项名称'), width: 220, align: 'center' },
            { field: 'SFS_BILLING_UNIT', title: WJ_Dic4Js('计价单位'), align: 'center', width: 230 },
            { field: 'SFS_FEE_RATES', title: WJ_Dic4Js('费率'), width: 140, align: 'center' },
            { field: 'CREATED', title: WJ_Dic4Js('创建时间'), align: 'center', width: 160 },
            { field: 'CREATOR', title: WJ_Dic4Js('创建人'), align: 'center', width: 140 },
            { field: 'LASTMODIFIED', title: WJ_Dic4Js('操作时间'), align: 'center', width: 160 },
            { field: 'LASTMODIFIER', title: WJ_Dic4Js('操作人'), align: 'center', width: 140 },
            { title: WJ_Dic4Js('操作'), align: 'center', toolbar: '#rowsbar1', width: 280, fixed: 'right' }
        ]], done: function (res, curr, count) {
            WJ_DIC_CHANGE_INNER();

        }
    });

点击主表行,加载子表数据

    //行单击事件(双击事件为:rowDouble)
    table.on('row(SysFeeTable)', function (obj) {
        //行单选框选中事件
        //选中行样式
        obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click'); 		
        obj.tr.find('input[lay-type="layTableRadio"]').prop("checked", true);
        $('.layui-table tr').css("background", "");//取消颜色
        $(this).css("background", "#c2c2c2");//添加行颜色
        var index = obj.tr.data('index')
        var thisData = table.cache["SysFeeTable"];
        layui.each(thisData, function (i, item) {
            if (index === i) {
                item.LAY_CHECKED = true;
            } else {
                delete item.LAY_CHECKED;
            }
        });
        form.render('radio');

        var data = obj.data;
        //刷新费目细项列表
        if (data.ID) {
            HttpGet("/FeeCollection/GetSysFeeScheduleList", { SFS_SF_ID: data.ID }, 
            function (res) {
            //为SysFeeScheduleTable赋值
                table.reload('SysFeeScheduleTable', { data: res.data.rows });
            })
        }
        obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
    });

实现效果图

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1431013.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JVM系列——垃圾收集器Parrlel Scavenge、CMS、G1常用参数和使用场景

背景 当前在Java领域&#xff0c;JDK 8版本仍然享有广泛的使用&#xff0c;它支持了Parallel Scavenge、CMS和G1这几种垃圾收集器。因此&#xff0c;为了在业务应用中更加高效地进行开发和性能调优&#xff0c;我们需要对这些垃圾收集器的工作原理和特性有一个全面的理解和认识…

【乳腺肿瘤诊断分类及预测】基于自适应SPREAD-PNN概率神经网络

课题名称&#xff1a;基于自适应SPREAD-PNN的乳腺肿瘤诊断分类及预测 版本日期&#xff1a;2023-06-15 运行方式: 直接运行PNN0501.m 文件即可 代码获取方式&#xff1a;私信博主或QQ&#xff1a;491052175 模型描述&#xff1a; 威斯康辛大学医学院经过多年的收集和整理&…

Rust 第一个rust程序Hello Rust️

文章目录 前言一、vscode 安装rust相关插件二、Cargo New三、vscode调试rustLLDB 前言 Rust学习系列。今天就让我们掌握第一个rust程序。Hello Rust &#x1f980;️。 在上一篇文章我们在macOS成功安装了rust。 一、vscode 安装rust相关插件 以下是一些常用的 Rust 开发插件…

【Java程序设计】【C00245】基于Springboot的家政服务管理平台(有论文)

基于Springboot的家政服务管理平台&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的家政服务管理平台 本系统分为前台模块、管理员功能模块、用户功能模块以及服务人员功能模块。 前台模块&#xff1a;系统首页的…

深入了解 Ansible:全面掌握自动化 IT 环境的利器

本文以详尽的篇幅介绍了 Ansible 的方方面面&#xff0c;旨在帮助读者从入门到精通。无论您是初学者还是有一定经验的 Ansible 用户&#xff0c;都可以在本文中找到对应的内容&#xff0c;加深对 Ansible 的理解和应用。愿本文能成为您在 Ansible 自动化旅程中的良师益友&#…

回归预测 | Matlab实现CPO-CNN-LSTM-Attention冠豪猪优化卷积长短期记忆神经网络注意力机制多变量回归预测(SE注意力机制)

回归预测 | Matlab实现CPO-CNN-LSTM-Attention冠豪猪优化卷积长短期记忆神经网络注意力机制多变量回归预测&#xff08;SE注意力机制&#xff09; 目录 回归预测 | Matlab实现CPO-CNN-LSTM-Attention冠豪猪优化卷积长短期记忆神经网络注意力机制多变量回归预测&#xff08;SE注…

2024 AI 前端:回首展望,光芒未至,破晓之前!

前言 回望 2023 年&#xff0c;ChatGPT 的突然爆火&#xff0c;让 AI 无疑成为最为值得注目的新兴领域之一&#xff0c;我们也一起见证了生成式 AI 的寒武纪大爆发。这一年来&#xff0c;国内外的生成式 AI 、大模型和相关产品以令人眼花缭乱的速度更新迭代&#xff0c;新的创业…

day29 M端事件

M端事件 移动端也有自己独特的地方&#xff0c;比如触屏事件touch&#xff08;也称触摸事件&#xff09;touch对象代表一个触摸点。触摸点可能是一根手指&#xff0c;也可能是一根触摸笔。触屏事件可响应用户手指&#xff08;或触控笔&#xff09;对屏幕或触控板操作。常见的触…

如何从零创建一个机器人模型

1.URDF建模原理 2.机械臂URDF建模 3.三维模型导出URDF 第一步&#xff1a;下载三维模型&#xff0c;并给每个关节设置旋转轴&#xff08;基准轴&#xff09; 第二部&#xff1a;下载 SolidWorks to URDF Exporter 插件 网址&#xff1a;sw_urdf_exporter - ROS Wiki 第三步…

Win10系统搭建个人hMailServer邮件服务结合内网穿透远程发邮件

文章目录 前言1. 安装hMailServer2. 设置hMailServer3. 客户端安装添加账号4. 测试发送邮件5. 安装cpolar6. 创建公网地址7. 测试远程发送邮件8. 固定连接公网地址9. 测试固定远程地址发送邮件 前言 hMailServer 是一个邮件服务器,通过它我们可以搭建自己的邮件服务,通过cpola…

Python tkinter (14) —— 按键事件

本文主要介绍Python tkinter 几种按键事件及其示例。 目录 按键事件 响应所有按键事件 窗体绑定事件 响应特殊按键事件 指定按键事件 组合按键事件 总结 tkinter系列文章 python tkinter窗口简单实现 Python tkinter (1) —— Label标签 Python tkinter (2) —— But…

IP 了解

参考&#xff1a;5.1 IP 基础知识全家桶 | 小林coding IP 在 TCP/IP 参考模型中处于第三层&#xff0c;也就是网络层。 网络层的主要作用是&#xff1a;实现主机与主机之间的通信&#xff0c;也叫点对点&#xff08;end to end&#xff09;通信。 什么是 IP 地址&#xff1f…

大创项目推荐 题目:基于深度学习的人脸表情识别 - 卷积神经网络 大创项目推荐 代码

文章目录 0 简介1 项目说明2 数据集介绍&#xff1a;3 思路分析及代码实现3.1 数据可视化3.2 数据分离3.3 数据可视化3.4 在pytorch下创建数据集3.4.1 创建data-label对照表3.4.2 重写Dataset类3.4.3 数据集的使用 4 网络模型搭建4.1 训练模型4.2 模型的保存与加载 5 相关源码6…

apipost 简单的性能压测总结

1、简单的使用机型牌评估 1&#xff09;jdk默认256M给100用&#xff0c;推荐给1000人同时用JVM 堆栈建议2G~4G&#xff08;目前定了机型4核8G内存 2T磁盘做radio0存储&#xff09;&#xff1b; 2&#xff09;数据库配置文件写了占了2G内存&#xff08;my.cnf文件&#xff09…

2024/1/30 dfs与bfs

想要了解dfs与bfs&#xff0c;就得了解队列和栈。 一、栈与队列 1.栈 栈说白了就是先入后出。把栈类比为一个容器。只有一个口&#xff0c;所以如果我们想要取出最底层也就是最先放入的元素&#xff0c;只能最后取出它。 栈基础操作有如下几种&#xff1a; push 放入pop 拿…

车载以太网:PHY(物理层)介绍

0 工具准备 TJA1101B芯片手册 TJA1101B automotive Ethernet PHY手册 IEEE802.3-2018.pdf 1 车载以太网PHY&#xff08;物理层&#xff09;介绍 常见的普通以太网分为10BASE-2、10/100BASE-TX和1000BASE-T&#xff0c;一般都使用RJ45接口&#xff0c;对于1000BASE-T来说&#…

LabVIEW风力发电机在线监测

LabVIEW风力发电机在线监测 随着可再生能源的发展&#xff0c;风力发电成为越来越重要的能源形式。设计了一个基于控制器局域网&#xff08;CAN&#xff09;总线和LabVIEW的风力发电机在线监测系统&#xff0c;实现风力发电机的实时监控和故障诊断&#xff0c;以提高风力发电的…

Python使用zdppy_es国产框架操作Elasticsearch实现增删改查

Python使用zdppy_es国产框架操作Elasticsearch实现增删改查 本套教程配套有录播课程和私教课程,欢迎私信我。 Docker部署ElasticSearch7 创建基本容器 docker run -itd --name elasticsearch -p 9200:9200 -e "discovery.type=single-node" -e ES_JAVA_OPTS=&quo…

上位机图像处理和嵌入式模块部署(linux开发板的选择)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 很多图像算法是通过上位机来完成的&#xff0c;比如说工业视觉当中的halcon&#xff0c;一般都是要运行在windows平台上面&#xff0c;并且需要高性…

Blender教程(基础)-面的填充-13

一、准备 新建一个立方&#xff0c;删除其中一个面。 二、三角面填充 首先是编辑模式下&#xff0c;选择需要填充的所有边。 鼠标右键弹出填充 填充完是以三角面的形式填充的 编辑模式下&#xff0c;面选择模式&#xff0c;选择刚才填充的两个三角面&#xff0c;然后右键…