C#表格绑定表格

最新推荐文章于 2023-02-06 18:07:56 发布

烧脑袋

最新推荐文章于 2023-02-06 18:07:56 发布

阅读量836

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44543312/article/details/97420689

本文介绍如何在前端开发中实现A表格与B表格的绑定，通过监听行单击事件来筛选B表格数据，以及解决使用不同前端框架（如layui与bootstrap）时的冲突问题。

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

开发工具与关键技术：VS  C#
撰写时间：2019年7月26日

表格绑定表格就是渲染出两个表格，再把这两个表格绑定。A表格的一行数据对应B表格的多条数据，实现一对多的关系。给A表格一个行单击事件选中具体的某一行获取ID，根据获取的ID筛选出B表格对应的数据。绑定表格的时候把A表格作为B表格的条件进行筛选B表格的数据，所以要给A表一个监听行单击事件。
1、用A表格作为B表格的条件进行筛选B表格的数据。

where 自定义表名.ID == ID

2、监听行单击事件（单击事件为：rowDouble）

单选框列,fixed:'left' 将列固定在左边
{ type: 'radio', fixed: 'left' },

在这里插入图片描述
复选框列

{ type: 'checkbox', fixed: 'left' }, 

   单击选中/取消复选框
    obj.tr.find('div.layui-unselect.layui-form-checkbox')[0].click();

    单击行获取隐藏列ID
    { field: 'ID', title: 'ID', hide: true },

3、在监听行单击事件里绑定B表格，这样点击A表格行的时候就会触发B表格。
在这里插入图片描述
4、如果有多条件查询A表格，那么为了不影响用户吴以为那多条件是查询哪个表格的，就要在A表格多条件下触发搜索按钮的时候清空B表格的数据。这样条件搜索查询的时候就只显示A表格的数据了。

效果图如下：
在这里插入图片描述
5、这A表格和B表格都是用了layui前端框架来渲染出来的。如果一个表格用layui前端框架、一个表格用bootstrap前端框架，那么这两个表格就会发生冲突。因为这两个前端框架都有自适应的一个高度，在页面上显示出来就会一闪一闪的。但如果你又不想舍弃其中一个框架想两个一起用，那么就要同时设置这两个框架的高度。
在这里插入图片描述