布置座位表的最佳方法是什么？转换表结构的最佳方法是什么？

Question

我试图从数据库中的数据动态(asp.net-mvc网站)绘制座位图到第一次尝试,我使用一个表作为布置"grid"行和列的方式,它看起来像一些东西像这样:

在我的数据库中,我有一个名为Seat table的表,其中包含以下模式:

Id,行,列,名称

为了呈现上述内容,我会在我的数据库中有这个:

| Id | Row | Col |   Name   |  
| 1  |  2  |  2  | Seat 1   |  
| 2  |  4  |  3  | Seat 2   |  
| 3  |  6  |  2  | Seat 3   |   
| 4  |  6  |  4  | Seat 123 |  
| 5  |  8  |  2  | Seat ABC |  
| 6  |  9  |  5  | Seat DEF |  

所以,我目前储存"location"的"Row"和"Column"在数据库中,然后只是有在我看来,一个嵌套的循环动态绘图上面的表格.蓝色项目是正在呈现席位的位置,其余的是介于两者之间的空间,数据库中没有任何内容"cell".

就像是:

<table>
    <tr>
        <td class='space'></td>
        <td class='seat'><div class='seatInfo'>Seat ABC</div></td>
        <td class='space'></td>
    </tr>

凡类定义一些基本的CSS周围backcolor和width细胞.

现在的问题是表结构强制对齐(这在某些情况下是好事,但最终是一个约束,因为我现在需要添加比其他更大的席位,并且表结构并不真正允许这样.

例如,如果我想要在第6行,第4列中的座位"更高",它会自动使第6行中的座位,第2列的高度发生变化(假设它是一个表格)也是我不想要的.

所以这是一个示例平面图Visio,我意识到我不知道如何用这种网格结构构建这个视图,可能只需要完成所有座位的绝对定位,不再有这个"row" / "col"想法

我可以有一个座位覆盖超过一行或一列的能力,但这仍然只允许事情2x width或2x height(而不是灵活地做出比"默认"座位大1.5倍的东西).

因此,我正在考虑将表格更改为一个矩阵,divs / spans并希望在我开始大规模重构之前得到一些反馈,这样我就不会遇到任何阻碍.

布置这组信息的最佳方式是什么,这些信息可以让我不会太复杂,但也没有达到这个限制,所以我可以为每个座位提供更多的布局灵活性.如果需要,我很乐意在我的数据库中存储更多信息(如宽度或高度).

Answer 1

我相信对你来说最自然的是使用与你的数据库相同的 html 结构，即

div {
  position: absolute;
  width: 50px;
  height: 30px;
  background-color: lightblue;
}
.row2 {top: 40px;}
.row4 {top: 100px;}
.row6 {top: 160px; width: 80px;}
.row8 {top: 220px;}
.row9 {top: 250px;}
.col2 {left: 50px;}
.col3 {left: 150px;}
.col4 {left: 250px;}
.col5 {left: 350px;}

<div class="row2 col2">1</div>
<div class="row4 col3">2</div>
<div class="row6 col2">3</div>
<div class="row6 col4">123</div>
<div class="row8 col2">abc</div>
<div class="row9 col5">def</div>

然后在样式中设置所有的显示逻辑，使用绝对位置。

如果将显示保持为矩阵，则没有那么多 CSS 样式；每行只有一种样式，每列只有另一种样式。

如果它不是矩阵，那么您可以选择特定的样式，或者最好在座位中添加某种类，并使列位置取决于列号和行样式。