CODEWITHSUNDEEP
loopshtmllayoutcoldfusion
shimmoril
shimmoril

Reputation: 682

Use a loop to generate a two-column list in a specific order

I need to display a checklist on my page in a certain way. The checklist is contained within an array, which I'm currently looping through in the following manner:

<div class="width-100"> <!---- this is the main container --->
    <cfloop from="1" to="#ArrayLen(steps)#" index="alpha">  
        <cfif (alpha MOD 2) EQ 1>               
            <div class="width-100">  <!--- this is the start of a 'row' --->
        </cfif>
        <div class="width-50">  <!--- this is a 'step' --->
            #steps[alpha].StepNum.xmltext#  
            <input class="f-right" type="checkbox" />
        </div>
        <cfif (alpha MOD 2) EQ 0>
            </div>  <!--- end of a 'row' --->
        </cfif>
    </cfloop>
</div>

The above code gets me a checklist like this, where the steps alternate between 'columns': incorrect checklist

When what I need is a checklist like this, where the first half of the steps are in the first column, and the second half are in the second column: correct checklist

I need to keep the div structure as laid out above, where one 100% div contains 2 50% divs w/ checklist steps. I'm guessing there's an intelligent way to do this (probably with more MODs?), but I can't see it.

Upvotes: 0

Views: 1027

Answers (1)

Digital Chris
Digital Chris

Reputation: 6202

If you want to do it vertically instead of horizontally, just build your rows differently. First figure out how many rows you're working with:

<cfset numrows = Ceiling(ArrayLen(steps)/2) >

So for 10 records you would get 5 rows. The Ceiling call just rounds up if it's odd.

<div class="width-100"> <!---- this is the main container --->
    <cfloop from="1" to="#numrows#" index="alpha">  

        <div class="width-100">  <!--- this is the start of a 'row' --->

        <div class="width-50">  <!--- this is a 'step' --->
            #steps[alpha].StepNum.xmltext#  
            <input class="f-right" type="checkbox" />
        </div>
        <div class="width-50">  <!--- this is a 'step' --->
        <cfif isDefined("steps[alpha+numrows].StepNum.xmltext")>
            #steps[alpha+numrows].StepNum.xmltext#  
            <!--- next to step 1 you get step 6 --->
            <input class="f-right" type="checkbox" />
        </cfif> <!--- cfif because last one won't be defined if odd --->
        </div>

        </div>  <!--- end of a 'row' --->

    </cfloop>
</div>

Upvotes: 2

Related Questions