Question

首先，我找到了这个解决方案（ColdFusion - Displaying rows as columns），如果我可以使用table，我将解决我的问题，但我不能，因为这需要做出回应。但是，客户并不喜欢响应表。他们真的，真的更喜欢显示列，因此用户只需要向上和向下滚动， 而不是 向上和向下滚动侧。

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

将Lucee与Bootstrap v3一起使用，我试图填充＆＃34;网格＆＃34;但我需要在填充column2之前填充column1中的行。

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

下面的代码片段来自@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>

这是我尝试使用bootstrap完成同样的事情：

<!-- 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>

但是，我工作的输出只显示一个全宽页面中的所有内容（边框的内联样式：1px纯红色可以看到代码生成的内容）。虽然这是针对ColdFusion的，但循环的逻辑对于我认为的PHP来说是相同的。

任何提示，技巧，建议或最好的解决方案吗？

Answer 1

如果我有更多的时间，我可能会采用不同的方式，因为这不是很好，但它确实满足了要求，我已经花了太多时间在这上面但最重要的是，客户端是好的考虑到预算和时间，采用这种方法。

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

我正在运行三个查询（运行一个查询然后查询查询），一个收集第一个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

在第1列中显示行中的数据，然后在第2列中显示行中的数据等

2 个答案: