admin管理员组

文章数量:814244

主表与附表

开发工具与关键技术: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:,你看下截图,一开始附表是无数据的,主表也还没点击数据,没获取选中行的数据。

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

本文标签: 主表与附表