主表与附表

亦凉 2023-07-18 06:26 1阅读 0赞

开发工具与关键技术：VS、主表与附表  
主表与附表  
主表为1，两个附表：1.1、1.2，本篇是点击航班信息里的数据时，这条数据下的联系人信息和乘机人信息就会刷新出来，只是这条数据下的联系人和乘机人信息。其他的数据无有。数据库是把主表的ID放在两个附表里，然后直接连接主表ID就可连接成功，监听时获取它的ID，点击是再刷新数据。本篇用的是layui的table表格，是要渲染三个表格的，主表是要有url接入数据的，两个附表是无url的，只有data：\[\]–加载本地数据.而主表和以往的表格一样，控制器查询数据，然后渲染，接收数据，表头，再一个分页，然后监听事件。  
查询时要记得把他们的ID都查出来。  
创建三个表格（样式自定义）

声明三个表格：

var layer, layuiTable;//全局使用
    var tabIndent;//父表格
    var tabIndentSon;//子级表格1
    var tabIndentTSon;//子级表格2

执行渲染：

layui.use(['layer', 'table'], function () {
                    layer = layui.layer;
                    layuiTable = layui.table;

主表、附表1、附表2等表格数据及参数

监听事件：

layuiTable.on('row(主表)', 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')[1].click();
                        var RelationID = data.RelationID;//附表1id
                        var StewardID = data.StewardID;//附表2id
                        附表1表格ID = layuiTable.reload('附表1表格ID', {
                            url: '数据接口：查询附表1数据',
                            page:{ limit:1, },//分页
                            where: { relationID: RelationID }//筛选的数据
                        });//联系人
                        附表2表格ID = layuiTable.reload('附表2表格ID', {
                            url: '数据接口，查询附表2数据',
                            page: {limit:3, },//分页
                            where: { stewardID: StewardID, }//筛选的数据
                        });//旅客
                    });
    })

监听事件和以往的一样，只是多加了两个筛选数据，筛选附表1、2的数据，筛选附表ID下的的数据，也可以筛选它的字段，本篇是参数。接着就是点击事件、获取选中的数据，选中行的数据，点击选中行的数据时，下面的两个附表就筛选数据，接着就是两个附表的ID，只有一个监听事件是主表的。  
刷新表格数据reload（）方法，where：\{\}条件，路径：url：，你看下截图，一开始附表是无数据的，主表也还没点击数据，没获取选中行的数据。  
![在这里插入图片描述][20200324205325827.png]  
下截图就是成功把附表的数据筛选出来了，只有点击数据是才能筛选，这是监听事件的样式。效果都是在监听事件里编写的，它是可以监听事件、复选框选中、单元格编辑、单双击等许多事件事情的，本篇主表与附表的数据就查询出来了。  
![在这里插入图片描述][20200324205331642.png]

[20200324205325827.png]: /images/20230528/7192ab57f56249b7a60a41e89d1cf10d.png
[20200324205331642.png]: /images/20230528/ea5a0ffbc6a3430a9e4c3d305e850a24.png