在第 1 列的行中显示数据，然后在第 2 列的行中显示数据，依此类推

Question

首先，我找到了这个解决方案 (ColdFusion - Displaying rows as columns)，如果我可以使用 table，它将解决我的问题，但我不能，因为这需要响应。但是，客户不喜欢响应式表格。他们真的，真的更喜欢显示列，这样用户只需要上下滚动，而不是上下左右滚动边。

我需要一些帮助将表格转换为引导程序<div>'s。我知道基础知识：跳过表格，tr 等于 div class="row" 和 td 等于 div class="col-sm-*" 的东西。但是，更具体地说，我不确定用于转换上述 SO 解决方案的逻辑以及如何将其应用于我的需求。

将 Lucee 与 Bootstrap v3 一起使用，我正在尝试填充“网格”，但我需要在填充 column2 之前填充 column1 中的行。

1|10|20|30|40  
2|11|21|31|41  
3|12|22|32|42  
4|13|23|33|43

下面的代码 sn-p 来自 @travis，我不相信它

<cfset cols = 5>
<!--- get the number of rows so you know what record to display at the top of the next row. for example if our query contains "a,b,c,d,e,f,g,h,i,j,k,l,m" (13 elements) it will produce 3 totalrows--->
<cfset totalRows = ceiling(qMyQuery.RecordCount / cols)>
<!--- set inital record to 1 "output" is the actual cell of the query --->
<cfset output = 1>
<!--- Create table --->
<table width = "100%" border="0" align="center" cellpadding="2" cellspacing = "2">  
<!--- loop through the rows.  This loop will run 3 times in this example --->
    <cfloop from = "1" to = "#totalRows#" index = "thisRow">
    <tr>
        <!--- this loop will run 5 times in times in this example --->
        <cfloop from = "1" to = "#cols#" index = "thisCol">
        <!--- the width in the table cell will dynamicaly calculated to evenly distribute the cells. in this example if cols = 5 100/5 will make the cells 20% of the table --->
        <td width = "<cfoutput>#numberformat((100/cols), 99)#</cfoutput>%" align="center" nowrap style = "border: 1px solid #ccc;">
            <!--- Check current record with the record count, this will be used to display data or an empty cell --->
            <cfif output lte qMyQuery.recordCount>
                <cfoutput>#qMyQuery.Mon[output]#</cfoutput>
            <cfelse>
            <!--- use <br> to display an empty cell --->
                <br>
            </cfif>
            <!--- increment counter to the next record in this example if we started on the first cell of the first row it would be 1(a), then 4(d), then 7(g) and so on if this was the firs cell on the second row it would be 2(b), 5(e), 8(h), continue... --->
            <cfset output = output + totalRows>
        </td>
        </cfloop>
        <!--- this little bit tells where to start the next row. if we just finished the first row output would be 2(b) --->
        <cfset output = thisRow + 1>
    </tr>
    </cfloop>
</table>

这是我尝试使用引导程序完成同样的事情：

<!-- what I'm working with -->
<cfset cols = 2>
<!-- get the number of rows so you know what record to display at the top of the next row. for example if our query contains "a,b,c,d,e,f,g,h,i,j,k,l,m" (13 elements) it will produce 3 totalrows-->
<cfset totalRows = ceiling(qMyQuery.RecordCount / cols)>
<!--- set inital record to 1 "output" is the actual cell of the query --->
<cfset output = 1>
<!--- Create table --->
<div class="row">
    <div class="col-sm-12">
    <!--- loop through the rows.  This loop will run 3 times in this example --->
        <cfloop from = "1" to = "#totalRows#" index = "thisRow">
            <div class="row">
                <!--- this loop will run 5 times in this example --->
                <cfloop from = "1" to = "#cols#" index = "thisCol">
                    <div class="col-xs-3" style="border:1px solid red">
                        <cfif output lte qMyQuery.recordCount>
                            <cfoutput>#qMyQuery.mon[output]#</cfoutput>
                        <cfelse>
                            <br>
                        </cfif>
                        <cfset output = output + totalRows>
                    </div>
                </cfloop>
                <cfset output = thisRow + 1>
            </div>
        </cfloop>
    </div>
</div>

但是，我的工作输出只是在一个全宽页面中显示所有内容（border:1px 纯红色的内联样式用于查看代码生成的内容）。虽然这是针对 ColdFusion，但我认为循环的逻辑与 PHP 相同。

对此有任何提示、技巧、建议或最好的解决方案吗？

Answer 1

如果我有更多时间，我可能会做不同的事情，因为这并不漂亮，但它确实满足了要求，我已经在这方面花费了太多时间，但最重要的是，客户对这种方法很满意预算和时间。

对于此实施，列表将永远不会超过 75 条记录，99% 的时间将在平板电脑或更大的设备上使用，并且用户将使用它来选择复选框。还有一个“全选”选项，但未包含在此答案中 - 这是以后的用户故事。

我正在运行三个查询（运行一个查询，然后运行一个查询查询），一个收集前 XX 条记录，第二条 XX 条记录，XX 用于第三组记录。我正在为 QoQ 传递一个变量，该变量将确定将显示多少行，以便每列中都会出现一些数据。

然后输出看起来像这样（对不起，我永远无法在 SO 中得到完全正确的格式）：

`    <div class="container">
    <div class="row">
        <div class="col-xs-3 col-xs-offset-1">
            <cfoutput query="colum1">
                <label><input type="checkbox"> #id# #mon#</label><br/>
            </cfoutput>
        </div>
        <div class="col-xs-3">
            <cfoutput query="colum2">
                <label><input type="checkbox"> #id# #mon#</label><br/>
            </cfoutput>
        </div>
        <div class="col-xs-3">
            <cfoutput query="colum3">
                <label><input type="checkbox"> #id# #mon#</label><br/>
            </cfoutput>
        </div>
    </div>
</div>`

Answer 2

我不确定您为什么说您的代码将所有内容都输出到一个列中。我试过你的例子，它似乎对我有用。您确定在您的页面中包含引导类吗？

我根据您的示例创建了一个 ColdFusion 要点：https://trycf.com/gist/cec79b0028728c9ec370e3bb8a05991f/lucee5?theme=monokai

我所做的唯一更改是使用您的示例数据创建一个查询对象，并将列数 (cols) 更改为 4，这与 Bootstraps 12 网格布局系统配合得很好。 您需要对5 列进行一些调整。

当您运行该代码时，它会显示您所说的单列数据。但那是因为尚未加载 Bootstrap 类。当我将该代码生成的输出复制到 Bootply 时，它会在四列中正确显示：http://www.bootply.com/a0dF7NKw9V