根据不同的数据显示不同明细

1.HTML创建出一个表格因为会用到layui的监听事件所以加上lay-filter属性

<table id="VIPtabla" lay-filter="VIPtabla"></table>  父表格

<table id="VIPIntegral" lay-filter="VIPIntegral"></table>  子表格

2.声明layui中要用到的模块的全局变量这里只需table就可以了

var layer, table, element, form;

3.初始化layui的模块也可以叫预加载同样只要table就可以

layui.use(['layer', 'table', 'element', 'form'], function () {})

4.在初始化中的回调方法里面写表格的方法渲染

function () {}就是这个花括号

4.1具体内容:

赋值全局变量table = layui.table; table.render({ //参数说明elem:(将表格绑定于id为VIPtabla的元素中)type:(本列类型为numbers序列号),  title:(表头的字段名.也可以说是本列的名字) ,fixed:(本列固定于left左边), hide:(是否隐藏true是), field:(此字段的来源唯一标志),align:(字体对其center居中), width: (本列宽度120), sort(开启排序否true是);更多请浏览layui的官网      elem: '#VIPtabla',      cols: [[               { type: 'numbers', fixed: "left",title:"序号", width: 40 },               { type: 'radio', width: 40 },               { field: 'VIPTypeID', title: "类别id", hide: true },               { field: 'VIPID', title: "VIPid", hide: true },               { field: 'calendar', title: "历法", hide: true }, { field: 'VIPNumber', title: "VIP卡号", sort: true,width:110,align:'center' }, { field: 'VIPName', title: "VIP姓名", sort: true, width: 110, align: 'center' },               { field: 'VIPtableName', title: "VIP类别", width: 110, align: 'center' },               { field: 'Cellphone', title: "手机", width: 120,align:'center' },               { field: 'ConsumptionSum', title: "消费金额", sort: true, width: 120 },               { field: 'Integral', title: "积分", width: 100, sort: true },               { field: 'DredgeDatea', title: "开卡日期", sort: true, width: 110, align: 'center' },               { field: 'RecentlyDatea', title: "最近消费", sort: true, align: 'center' },               { field: 'Birthdaya', title: "本年生日", sort: true, align: 'center' },               { field: 'Remark', title: "备注", align: 'center' }             ]],      page: {              limit: 10,                         }      });

4.2父表格渲染完后渲染子表格

table.render({ elem: "#VIPIntegral", totalRow: true, cols: [[         { type: 'numbers', fixed: 'left', width: 40,totalRowText:"合计:" },         { field: 'IntegralAdjustID', align: 'center',hide:true },         { field: 'AdjustType', title: '调整类型', align: 'center' },         { field: 'AdjustDate', title: '调整日期', align: 'center' },         { field: 'AdjustIntegral', title: '调整积分', totalRow: true,sort: true, align: 'center' },         { field: 'Remark', title: '备注说明', align: 'center' },        ]], page: {        limit: 10,        limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],        } });

5.为父表格添加一个单击监听事件,注意要在初始化回调方法内上面有说

部分参数说明:table(全局变量).on(layui的监听方法)row(单击监听)VIPtable(lay-filter="VIPtabla"), function(){}（回调方法）reload(重新加载表格) VIPIntegral(lay-filter="VIPIntegral") table.on("row(VIPtabla)", function (obj) {                     var Vipid = obj.data.VIPID;                                       table.reload("VIPIntegral",{                         url: "/DailyRoutine/VIPset/VIPintegral",                         where: {                             VIPid: Vipid                         }                     })                  }) //原理为点击一行数据获取到参数obj中传递的VIPID然后用ID作为参数传递到控制器,筛选数据库表中ID值和参数ID相同的数据.

6.控制器

5.1传参查询  public ActionResult VIPintegral(int VIPid, LayuiTablePage layuiTablePage)         {             //查询ID值与参数ID相同的数据             var integral = (from tb in myModel.B_IntegralAdjust                             where tb.VIPID == VIPid                             orderby tb.IntegralAdjustID descending                             select new VIPtable(实体类)                             {                                 IntegralAdjustID(要与页面中表格唯一标志相同) = tb.IntegralAdjustID,                                 AdjustType = tb.AdjustType(数据来源于某个表中的某个子段),                                 AdjustDate = tb.AdjustDate.ToString(),                                 AdjustIntegral = tb.AdjustIntegral,                                 IntegralRemark = tb.Remark                             }).ToList(); 6.2开始分页数据,返回数据             int count = integral.Count();//获取数据的条数 //开始分页             List<VIPtable> liintegral = integral.Skip(layuiTablePage.GetStartIndex()).Take(layuiTablePage.limit).ToList();             LayuiTableData<VIPtable> dataintegral = new LayuiTableData<VIPtable>();//实例化实体类 //为实体类中的成员赋值             dataintegral.count = count;             dataintegral.data = integral; //返回整个实体类             return Json(dataintegral, JsonRequestBehavior.AllowGet);         }

7.效果展示

当未选中时积分调整记录是空的
当选中一条数据后出现相对的数据明细