admin 管理员组

文章数量: 1086866

主表与附表

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

<script src="~/Plugins/jquery-3.2.1.min.js"></script>
<script> src="~/Plugins/layui/layui.js"></script><!--layui插件-->

声明三个表格：

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;//附表1idvar 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：，你看下截图，一开始附表是无数据的，主表也还没点击数据，没获取选中行的数据。

下截图就是成功把附表的数据筛选出来了，只有点击数据是才能筛选，这是监听事件的样式。效果都是在监听事件里编写的，它是可以监听事件、复选框选中、单元格编辑、单双击等许多事件事情的，本篇主表与附表的数据就查询出来了。

本文标签： 主表与附表

版权声明：本文标题：主表与附表 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1697110169a261777.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。