布局座位表的最佳方式是什么？转换表格结构的最佳方式是什么？

Question

我正在尝试从数据库中的数据动态地将座位表绘制到网页上（asp.net-mvc 站点），第一次尝试时，我使用表格作为布置"grid" 行的一种方式和列，它看起来像这样：

在我的数据库中，我有一个名为 Seat 的表，其中包含以下 schema：

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>

类在单元格的backcolor 和width 周围定义了一些基本的CSS。

现在的问题是桌子结构强制对齐（这在某些情况下是件好事，但最终是一个约束，因为我现在需要添加比其他座位更大的座位，而桌子结构实际上不允许这样做。

例如，如果我希望第 6 行第 4 列的座位“更高”，这会自动使第 6 行第 2 列的座位的高度发生变化（因为它是一张桌子），而我不这样做'不想。

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

我可以拥有超过一排或一列的座椅套，但这仍然只允许 2x width 或 2x height （相对于可以灵活地制作比“默认”大 1.5 倍的东西）座位）。

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

布置这组信息的最佳方式是什么，既不会让我太复杂，又不会遇到这个限制，这样我就可以在每个座位上有更多的布局灵活性。如果需要，我很乐意在我的数据库中存储更多信息（例如宽度或高度）。

Answer 1

迟到者：为什么不直接使用实际图像和 html5 画布来创建座位表？直接在 Canvas 中的座位上绘制 jpg 覆盖的座位分配。 （老派，粗短的铅笔风格）。保留座位位置数组（SeatLocationName、xAxis、yAxis、personInSeat）。保持简单，真的很简单。关键是要获得准确的平面图图像文件。当您计划缩放时，请记住 html5 画布以 96 像素/英寸的速度工作。 xAxis 和 yAxis 值必须相应地缩放。 （明智地选择你的单位......点/像素，或英寸或毫米。）

还要记住，有一些非常简单的工具可以从大型画布 --> PDF 输出中使用。为什么选择 PDF？请记住，免费的 Adob​​e Reader 工具现在具有海报选项，可以非常轻松地在纸上打印出大型内容...

Answer 2

如果没有绝对定位您的元素，您所要求的灵活性是不可能的。您不能动态放置和调整它们的大小，也不能保持最大的灵活性。这就是为什么没有人能给你一个很好的答案。

折衷方案是使用基于百分比的网格布局库并设置该库中每行的最大单元格数。然后，您需要为每个单元格分配类，以根据数据库中每条记录的相应大小列来定义宽度和高度（或样式）。我会考虑用 Bootstrap 做这种方法：http://getbootstrap.com/

或者 - 您可以硬着头皮将座位组映射到座位模板，每个座位都有预定义的绝对位置。不好玩，但像素完美。

Answer 3

上面的答案都不错，但是你可以考虑走更多的 JS 路线。有许多打包算法可以让您控制最终布局，但不必将自己限制在与表格布局紧密耦合的单个 DOM 结构中。

例如，如果您使用Packery 或类似的东西，您可以只使用样式和包装本身来设置座位大小的列表——这样它只是一个 dom 元素的列表。当然，您必须检查您是否可以依赖该展示位置，并且对于 Packery，有很多您不想要的选项，例如拖放。

Answer 4

我相信完成你想要的最有效的方法是使用 display: flex css 属性。 Here你可以了解更多关于 flex 的信息。

我为你创建了一个简单的例子：

<div class="container">
    <div class="row">
        <div class="cell" style="width: 120px;background: #0F0">1</div>
        <div class="cell">2</div>
        <div class="cell">3</div>
    </div>
    <div class="row">
        <div class="cell">1</div>
        <div class="cell" style="height: 90px;background: #0FF">2</div>
        <div class="cell">3</div>
    </div>
    <div class="row">
        <div class="cell">1</div>
        <div class="cell">2</div>
        <div class="cell">3</div>
    </div>
</div>

.row {
    display: flex;
}
.cell {
    background: #000;
    color: #fff;
    width: 90px;
    height: 60px;
    flex: 0 0 auto;
    text-align: center;
    padding: 12px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
}

希望这会有所帮助。

小提琴：simple example

Answer 5

我相信对您来说最自然的是使用与您的数据库相同的 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 样式；每行只有一种样式，每列只有一种样式。

如果不是矩阵，则可以指定特定的样式，或者最好在席位中添加某种类，并根据列号和行样式来确定col位置。

Answer 6

如果您为每个座位定义一个通用尺寸单位，例如“座位尺寸”，会怎样。例如，标准座位尺寸值“1”。您的 DB 表将为每个座位的大小增加一列。任何比标准座位宽两倍的座位在新的 DB 列中的值为“2”。

在呈现 HTML 和 CSS 时，每个“座位”将是 div 而不是表格单元格，并且具有硬定义的尺寸（即使是 % 而不是 px）。例如座位尺寸为 1 可能会转换为 50 像素宽，因此如果标准座位是 50 像素宽 x 50 像素高，那么价值 2 的座位将是 100 像素宽 x 50 像素高等等。

如果您需要通过高度和宽度控制大小，则添加另一列来定义高度并应用与上述相同的原则。

例如

HTML

<div class="seat-chart">
    <div class="row">
        <div class="seat" style="width: 50px; height: 50px;"> Single Seat </div>
        <div class="seat" style="width: 100px; height: 50px;"> Double Width Seat </div>
        <div class="seat" style="width: 50px; height: 50px;"> Single Seat </div>
    </div>
    <div class="row">
        <div class="seat" style="width: 100px; height: 50px;"> Double Width Seat </div>
        <div class="seat" style="width: 50px; height: 50px;"> Single Seat </div>
        <div class="seat" style="width: 50px; height: 50px;"> Single Seat </div>
    </div>
</div>

请注意，您不一定需要硬定义大小，您可以使用诸如 Bootstrap 等之类的东西，甚至可以使用 css 类，例如seat-row-1、seat-row-2、seat-height-2 使您的布局响应。但我认为您可能会发现使用设置尺寸更容易控制高度和宽度。

Answer 7

我不确定我是否知道到底是什么问题。假设，根据您的问题和 cmets，您需要适合不同高度的不同座椅，两排之间没有任何空间。

这就是我所做的。我创建了 6 列并使用循环添加了座位，这样第一个元素将进入第一列，第二个元素将进入第二列，依此类推。这些新添加的元素将有 ids row-1-col-1, row-1-col-2 ...

我在这个演示中使用了 mustache 作为模板

<div id="wrapper" class="container">
    <div class="row"></div>
    <div class="row">
        <div class="col-md-12">
            <p class="well">Book seats (1,5), (2,2), (2,4), (3,4) <br/>
           <button class="btn btn-primary">Book</button> </p>            
        </div>
    </div>
</div>
<script id="col_template" type="x-tmpl-mustache">
    <div class = 'col-md-2 col-xs-2' > 
      <div class = "row seat" id = "col-{{num}}"> </div>
    </div>
</script>
<script id="row_col_template" type="x-tmpl-mustache">
    <div class = 'col-md-12 row{{rownum}}' id = "row-{{rownum}}-col-{{colnum}}">
    ({{rownum}} ,{{colnum}})                
    </div>
</script>

生成的最终输出将是

     Col1   |    Col2    |   Col3    |   Col4     // first template generates Col-n
  ========== ============ =========== ==========
  row1-col1 | row1-col2  | row1-col3 | row1-col4  // second template generates boxes inside Col-n
  row2-col1 | row2-col2  | row2-col3 | row2-col4
  row3-col1 | row3-col2  | row3-col3 | row3-col4
  row4-col1 | row4-col2  | row4-col3 | row4-col4

现在在上面的例子中，如果row2-col3 的高度增加，那么row3-col3 将被向下推，其余元素不会受到影响，因为其他元素被放置在不同的容器中（Col-n）。我添加了border-left 以了解座位属于哪一排。

这种方法的问题是最终输出看起来不像是正确的座位安排。

我在这里不包括 JS，因为它不是必需的，因为大多数逻辑都是在后端为您完成的。希望这是你想要的。

Demo Fiddle