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

Question

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

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

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倍大的东西的灵活性） ＆＃34;默认＆＃34;座位）。

所以我正在考虑将表格更改为divs / spans的矩阵，并希望在我开始大规模重构之前得到一些反馈，这样我就不会碰到任何阻挡者。

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

Answer 1

我不确定我是否确实遇到了问题。假设，从您的问题和评论中，您需要适应不同高度的不同座位，两行之间没有任何空间。

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

我已将胡子用于此演示的模板

<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

Answer 2

如果您为每个座位定义了一个通用尺寸单位，如“座位尺寸”，该怎么办？例如，标准座位尺寸值为“1”。您的数据库表将为每个席位的大小添加一列。任何比标准座位宽两倍的座位在新数据库列中的值为“2”。

在渲染HTML和CSS时，每个“席位”都是div而不是表格单元格，并且具有硬定义的维度（即使是％而不是px）。例如座位尺寸1可以转换为50px宽，所以如果标准座位宽50px乘50px高，那么2座位将是100px宽乘50px高等等。

如果您需要按高度和宽度控制尺寸，请添加另一列以定义高度并应用与上述相同的原则。

E.g。

<强> 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 3

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

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

Answer 4

以上答案非常好，但您可能会考虑选择更多JS路线。有许多打包算法，您可以控制最终布局，但不必将自己约束到与表格布局紧密耦合的单个DOM结构。

例如，如果你使用Packery或类似的东西，你可以只使用样式和包装本身设置一个座位列表，其大小设置 - 这样它只是一个dom元素列表。当然，您必须检查您是否可以依赖于展示位置，而在Packery的情况下，您可能会有许多您不想要的选项，例如拖放。

Answer 5

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

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

或者 - 您可以咬住子弹并将座位组映射到座位模板，每个座位具有预定义的绝对位置。不好玩，但像素完美。

Answer 6

我相信完成你想要的最有效的方法是使用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 7

派对迟到者：为什么不只是使用实际图像，而html5画布创建座位表？在Canvas的座位上直接绘制jpg，叠加座位分配。 （旧skool，粗短的铅笔风格）。保留一系列座位位置（SeatLocationName，xAxis，yAxis，personInSeat）。保持简单，非常简单。关键是获得平面图的准确图像文件。当你计划缩放时，记住html5画布工作在96像素/英寸。必须相应地缩放xAxis和yAxis值。 （明智地选择你的单位..点/像素，或英寸或毫米。）

还要记住，从大型画布中可以找到一些非常简单的工具 - ＆gt; PDF输出。为何选择PDF？请记住，免费的Adobe Reader工具现在有海报选项可以很容易地在纸上打印大件物品......