点击表格的一条数据在另一张表查询出数据

下面是我最近学习的，点击表格的一条数据在查询出另外一张表的方法
首先先初始化表格
$(function () {
layui.use([‘layer’, ‘table’], function () {
layer = layui.layer,
layuiTable = layui.table;
//聚类包基本信息
tabCluster = layuiTable.render({
elem: “#tabCluster”,
url: “/DemandTerrace/AccountMessage/SelectBusinessEarning”,
cols: [[
{ type: “checkbox”, fixed: “left” },
{ type: ‘numbers’, title: ‘序号’ },
{ field: “ClusterID”, title: “ClusterID”, hide: true },
{ field: “UserID”, title: “UserID”, hide: true },
{ field: ‘ClusterName’, title: ‘聚类包名称’, align: ‘center’ },
……
{ field: ‘Identifying’, title: ‘聚类包标识’, align: ‘center’ },
]],
page: {
limit: 10,//每页显示数据的条数
limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选项
}, //data: [],
});
然后再到控制器写第一个表的查询
public ActionResult QueryCluster(LayuiTablePage layuiTablePage)
{
List linqCluster = (from tbCluster in myModel.B_Cluster
join tbArea in myModel.D_Area on tbCluster.AreaID equals tbArea.AreaID
……
orderby tbCluster.ClusterID descending
select new ClusterVo
{
ClusterID = tbCluster.ClusterID,//聚类包id
ClusterName = tbCluster.ClusterName,//聚类包名称
……
}).ToList();
//计算数据总条数
int totalRow = linqCluster.Count();
//分页数据
List dbCluster = linqCluster
.Skip(layuiTablePage.GetStartIndex())
.Take(layuiTablePage.limit)
.ToList();
//实例化
LayuiTableData layuiTableData = new LayuiTableData();
layuiTableData.count = totalRow;
layuiTableData.data = dbCluster;
return Json(layuiTableData, JsonRequestBehavior.AllowGet);
}
查到后再到监听行单击事件这里，从所有的数据中拿到你需要的id，然后写个重载方法
//监听行单击事件
layuiTable.on(‘row(tabCluster)’, function (obj) {
var data = obj.data;
var ClusterID = data.ClusterID;
tabUserMessage是第二张表的id后面是第二张表的查询方法
tabUserMessage.reload({
url: “DemandUser”,
where: {
ClusterID: ClusterID
},curr:1});
//标注选中行样式
obj.tr.addClass(“layui-table-click”).siblings().removeClass(“layui-table-click”);
//选中行，勾选复选框
obj.tr.find(“div.layui-unselect.layui-form-checkbox”)[1].click();
});
然后再到控制器写另一张表的查询方法，将上面获取到的id传参到这里，让这个表里面的ClusterID等于上面获取到的ClusterID
public ActionResult DemandUser(LayuiTablePage layuiTablePage,int ClusterID)
{
List linqUser = (from tbUser in myModel.S_User
orderby tbUser.UserID descending
where tbUser.ClusterID == ClusterID
select new UserVo
{
UserID = tbUser.UserID,//用户ID
UserName = tbUser.UserName,//用户名称
……
UserSite = tbUser.UserSite//用户地址
}).ToList();
//计算数据总条数
int totalRow = linqUser.Count();
//分页数据
List dbUser = linqUser
.Skip(layuiTablePage.GetStartIndex())
.Take(layuiTablePage.limit)
.ToList();
//实例化
LayuiTableData layuiTableData = new LayuiTableData();
layuiTableData.count = totalRow;
layuiTableData.data = dbUser;
return Json(layuiTableData, JsonRequestBehavior.AllowGet);
}

这样就完成了。下面演示一遍

如图，现在只有第一张表有数据，我现在点击第一张表的一条数据，得到如下

这样就查询出了另外一张表的数据