[使用Math辅助函数使用JsRender创建按列创建GRID

问题描述 投票:0回答:1

我正在尝试创建这样的网格。

条件:如果结果少于5个结果,我会将所有内容放在同一列上,如果超过5个,我必须除以3,这样一来,我知道每列必须使用多少个结果。] >

我有TotalNumberOfResults,它上面的这个逻辑不起作用,因为如果我们除以11/3 = 3.6。是否可以在此3.6上使用Math.Floor?

例如:结果数/ 3以获取每列数。

Number 1     Number 6      Number 11      
Number 2     Number 7      Number 12
Number 3     Number 8      Number 13
Number 4     Number 9
Number 5     Number 10

我做到了:

<div class="row" id="resultsAZSelector" style="display:none">
                    <div class="col-md-4">
                        <div class="letters-list">
                            <ul>
                                {{for Results start=0 end=TotalNumberOfResults/3}}
                                {{for Fields}}
                                {{if Key == 'item_name_s'}}
                                <li><a>{{:Value}}</a></li>
                                {{/if}}
                                {{/for}}
                                {{/for}}
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="letters-list">
                            <ul>
                                {{for Results start=(TotalNumberOfResults/3)+1 end=(TotalNumberOfResults/3)*2}}
                                {{for Fields}}
                                {{if Key == 'item_name_s'}}
                                <li><a>{{:Value}}</a></li>
                                {{/if}}
                                {{/for}}
                                {{/for}}
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="letters-list">
                            <ul>
                                {{for Results start=((TotalNumberOfResults/3)*2)+1 end=TotalNumberOfResults}}
                                {{for Fields}}
                                {{if Key == 'item_name_s'}}
                                <li><a>{{:Value}}</a></li>
                                {{/if}}
                                {{/for}}
                                {{/for}}
                            </ul>
                        </div>
                    </div>
                </div>

结果错误,因为排序和结尾均为十进制。

我正在尝试创建一个像这样的网格。条件:如果结果少于5个结果,我会将所有内容放在同一列上;如果结果大于5,我必须除以3,这样我就知道...

javascript jsrender
1个回答
0
投票

您可以在JsRender模板中使用Math.floor()Math.ceil()之类的功能,但您需要通过helpers(或通过数据/视图模型中的功能)进行访问。例如,您可以定义~colcount()助手:

© www.soinside.com 2019 - 2024. All rights reserved.