0

0

layui关联表单的方法

尚

发布时间:2020-06-12 17:41:59

|

4230人浏览过

|

来源于CSDN

转载

layui关联表单的方法

现在我们做一个layui表单关联,什么叫表单关联呢,比如有两个layui表格,把第一个表格的数据查询出来后,然后点击表单里的某一条数据,根据这一条数据的主键id,查询第二张表单的数据,并把数据回填。

第一步先准备好两张表,把数据对应的表头设计好。

1.jpg

这是我准备好的两张表,一张是VIP表,另一张是VIP积分调整表,一会呢我们点击VIP表单的数据查询出积分调整表单的数据,这两张表单的数据查询方法我已经也是在控制器那边写好了的,现在看看页面上是需要显示出那些数据的。

2.jpg

页面上的表单就是这样显示的,调整记录表还是无数据,是因为我在上面表单初始化的时候把调整表单的请求路径给注销掉了,更多条件查询的方法查不多,就是把这个查询路径加了一个条,满足什么条件就开始查询。

jQuery的省市联动关联表单
jQuery的省市联动关联表单

jQuery的省市联动关联表单

下载

下面是表单关联事件,是一个监听事件,这个事件一定是要写在加载layui模块的方法里。这里代码的意思是获取VIP表里的某一行数据,给它一个点击事件声明一个变量,并给这个变量赋值,赋值的时候一般都是给id赋值,一会根据这个id去查询出调整表的数据。能不能查询出数据,可以在控制台中输出这个刚刚所赋值看一下。

//获取VIP表行事件
            layuiTable.on('row(tabVip)', function (obj)
             {
                  var data = obj.data;//获取点击行数据
                  //标注选中样式
           		obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
           		
                    ////***单击选中单选框
                    obj.tr.find('div.layui-unselect.layui-form-radio')[0].click();
                    
                    var vipId = data.VipID;//vip类型id
                    
                    //控制台输出看看是否能获取到VIPid
                    console.log(vipId);
                    
                    //调整记录附件,根据VIPid查询对应的调整记录信息
                    tabAdjustmentRecord.reload
                    ({
                        //查询路径
                        url: '/DailyAffairs/VIPManege/AdjustmentRecord',
                        where:
                         { //设定异步数据接口的额外参数,比如设置多条件查询的参数
                            vipId: vipId
                        },
                        //从第一页开始
                        page:
                         {
                            curr:1
                        }
                    });
                });

我们看看效果先:

3.jpg

我点击的是第二条数据,所以控制台输出的id是2,这样证明我们是把id获取成功的;要是VIP表的VIPid没有获取到,调整表是没有数据的,这是就要控制台输出是否有id输出,没有id输出,就看看id有没有获取错,或者有没有把id传到控制器那边,查询调整记录的控制器有没有写上接收对应的id。

更多layui知识请关注PHP中文网layui教程栏目

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 8.4万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 6.5万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号