类似父子间的关系的表格绑定

最新推荐文章于 2024-12-05 16:44:01 发布

山川FLAT

最新推荐文章于 2024-12-05 16:44:01 发布

阅读量278

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44552170/article/details/96272690

本文介绍了一种基于LayUI的表格数据展示方法，通过单击获取线路信息，并动态加载对应的路段详情。具体实现了线路选择后，其相关路段信息能够自动更新显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图下的表格，第一个表格的第一条数据，这条数据里还有对应的三条数据，而子数据要根据父数据才能查询出来，每条父数据有每条父数据对应的子数据。
其实这里的父数据就是指线路，子数据指的是路段。每条线路会有自己的路段，但是路段时可以有重复。
当我们点击线路时，对应的路段就会刷新出来。
那么表格的渲染就不展示了，要实现功能的话，首先要或取到线路的数据，单击获取到表格的单行数据，获取到对应的值后绑定线路的表格的连接
在这里插入图片描述

layuiTable.on('row(AtbCarInformation)', function (obj) {
	$("#Routeid").val(obj.data.RouteID);
	obj.tr.addClass("layui-table-click").siblings().removeClass("layui-table-click");
	if (obj.data.RouteID != "" && obj.data.RouteID != undefined) {
	//线路路段情况
		BtabLineManagement = layuiTable.reload("BtbCarInformation", { url: "/BusinessManagement/BusinessManagement/RoadPassage", where: { aasaa: obj.data.RouteID } })
	}
});

在控制器查询，还需要自己给一个参数接收连接数据（aasaa）

        public ActionResult RoadPassage(LayuiTablePage layuiTablePage, int? aasaa)
        {
            var Road = (from tbRoadPassage in myModels.B_RoadPassage
                        join tbRoute in myModels.B_Route on tbRoadPassage.RouteID equals tbRoute.RouteID
                        join tbSite in myModels.B_Site on tbRoadPassage.SiteID equals tbSite.SiteID
                        where tbRoadPassage.RouteID == aasaa
                        select new Site
                        {
                            RoadPassageID= tbRoadPassage.RoadPassageID,//路段表ID
                            Mileage = tbRoadPassage.Mileage,//路段里程
                            StopAt = tbRoadPassage.StopAt,//停靠
                            CheckPoin = tbRoadPassage.CheckPoin,//报到点
                            GetIn = tbRoadPassage.GetIn,//上车点
                            Delay = tbRoadPassage.Delay.ToString(),//延时
                            Station = tbRoadPassage.Station,//是否设置站务费
                            StationCharge = tbRoadPassage.StationCharge,//站务费
                            RouteID = tbRoute.RouteID,//线路表ID
                            RouteCod = tbRoute.RouteCod,//线路编码
                            RouteName = tbRoute.RouteName,//线路名称
                            SiteID = tbSite.SiteID,//站点表ID
                            MnemonicCode = tbSite.MnemonicCode,//助记码
                            SiteName = tbSite.SiteName,//站点名称
                        }).ToList();
            return Json(Road, JsonRequestBehavior.AllowGet);
        }