提问人：J nui 提问时间：9/29/2021 最后编辑：J nui 更新时间：9/29/2021 访问量：340
胡子 .js TR 表每 n 条记录行一次？
mustache.js tr table rows every nth record?
问：
我正在寻找比我使用 mustache 的代码更好的解决方案 .js 该模板正在创建 2 行 2 列的表格，因此我需要在每个奇数项的开头和每个偶数项的末尾插入。 我不知道如何让胡子来做到这一点，我已经求助于在数据中插入额外的属性来实现这一目标。
这里是附加到这个问题的 stackOverflows 代码编辑器。 我正在使用 mustache 版本 1.00
例如，我想要的数据是
[ [{name:"one"},{name:"two"},{name:"three"},{name:"four"}],
[{name:"five"}] ];
但是我使用以下方法
[
[{name:"one",rowstart: true},{name:"two",rowend: true},{name:"three",rowstart: true},{name:"four",rowend: true}],
[{name:"five",rowstart: true}]
];
我使用的结果模板是......
{{#.}}
<section class="sheet padding-10mm php">
<table class="pagedTable">
{{#.}}
{{#rowstart}}
<tr>
{{/rowstart}}
<td>{{name}}</td>
{{#rowend}}
</tr>
{{/rowend}}
{{/.}}
</table>
</section>
{{/.}}
我想要的模板如下所示......
{{#.}}
<section class="sheet padding-10mm php">
<table class="pagedTable">
{{#.}}
{{#if index odd}}
<tr>
{{/if}}
<td>{{name}}</td>
{{#if index even}}
</tr>
{{/if}}
{{/.}}
</table>
</section>
{{/.}}
我必须更改我的数据，这是有问题的。
我的问题是胡须可以在正确的时间插入正确的位置吗？如果是这样，我该怎么做？
下面是 SO 代码片段
var desiredData = [
[{name:"one"},{name:"two"},{name:"three"},{name:"four"}],
[{name:"five"}] ];
var data = [
[{name:"one",rowstart: true},{name:"two",rowend: true},{name:"three",rowstart: true},{name:"four",rowend: true}],
[{name:"five",rowstart: true}]
];
var template = $('#template').html();
$('body.letter').append(Mustache.to_html(template,data));@page { margin: 0 }
body {
margin: 0;
font-family: Arial, sans-serif, Helvetica;
}
.sheet {
margin: 0mm auto;
overflow: hidden;
position: relative;
box-sizing: border-box;
page-break-after: always;
/* border: 1px solid black; */
}
/** Paper sizes **/
body.A3 .sheet { width: 297mm; height: 419mm }
body.A3.landscape .sheet { width: 420mm; height: 296mm }
body.A4 .sheet { width: 210mm; height: 296mm }
body.A4.landscape .sheet { width: 297mm; height: 209mm }
body.A5 .sheet { width: 148mm; height: 209mm }
body.A5.landscape .sheet { width: 210mm; height: 147mm }
body.letter .sheet { width: 216mm; height: 279mm }
body.letter.landscape .sheet { width: 279mm; height: 216mm }
/** Padding area **/
.sheet.padding-10mm { padding: 10mm }
.sheet.padding-15mm { padding: 15mm }
.sheet.padding-20mm { padding: 20mm }
.sheet.padding-25mm { padding: 25mm }
/** For screen preview **/
@media screen {
body { background: #e0e0e0;
font-size: 13px; }
.sheet {
background: white;
box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
}
}
/** Fix for Chrome issue #273306 **/
@media print {
body.A3.landscape { width: 420mm }
body.A3, body.A4.landscape { width: 297mm }
body.A4, body.A5.landscape { width: 210mm }
body.A5 { width: 148mm }
body.letter.lanscape {width: 279mm }
}
.pagedTable {
border-spacing: 4mm;
font-size: 13px;
}
.pagedTable td {
width: 90mm;
border: 1px solid black;
vertical-align: top;
height: 123mm;
}
section.php {
display: block;
}
section.js {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/1.0.0/mustache.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head></head>
<body class="letter">
<script id="template" type="text/template">
{{#.}}
<section class="sheet padding-10mm php">
<table class="pagedTable">
{{#.}}
{{#rowstart}}
<tr>
{{/rowstart}}
<td>{{name}}</td>
{{#rowend}}
</tr>
{{/rowend}}
{{/.}}
</table>
</section>
{{/.}}
</script>
</body>
</html>答：
0赞
J nui
9/29/2021
#1
看来胡子不做 if/else 的事情，所以我坚持我所拥有的，但是我已经复制并更改了所需的数据，以便原始数组保持不变。
有关更新的 SO 代码片段，请参阅下文
var desiredData = [
[{name:"one"},{name:"two"},{name:"three"},{name:"four"}],
[{name:"five"}] ];
var altered = desiredData.map(element => element.map((x,i) => {
if((i+1)%2 == 0){
return Object.assign(x, {rowend: true})
} else {
return Object.assign(x, {rowstart: true})
}
})) ;
var template = $('#template').html();
$('body.letter').append(Mustache.to_html(template,altered));@page { margin: 0 }
body {
margin: 0;
font-family: Arial, sans-serif, Helvetica;
}
.sheet {
margin: 0mm auto;
overflow: hidden;
position: relative;
box-sizing: border-box;
page-break-after: always;
/* border: 1px solid black; */
}
/** Paper sizes **/
body.A3 .sheet { width: 297mm; height: 419mm }
body.A3.landscape .sheet { width: 420mm; height: 296mm }
body.A4 .sheet { width: 210mm; height: 296mm }
body.A4.landscape .sheet { width: 297mm; height: 209mm }
body.A5 .sheet { width: 148mm; height: 209mm }
body.A5.landscape .sheet { width: 210mm; height: 147mm }
body.letter .sheet { width: 216mm; height: 279mm }
body.letter.landscape .sheet { width: 279mm; height: 216mm }
/** Padding area **/
.sheet.padding-10mm { padding: 10mm }
.sheet.padding-15mm { padding: 15mm }
.sheet.padding-20mm { padding: 20mm }
.sheet.padding-25mm { padding: 25mm }
/** For screen preview **/
@media screen {
body { background: #e0e0e0;
font-size: 13px; }
.sheet {
background: white;
box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
}
}
/** Fix for Chrome issue #273306 **/
@media print {
body.A3.landscape { width: 420mm }
body.A3, body.A4.landscape { width: 297mm }
body.A4, body.A5.landscape { width: 210mm }
body.A5 { width: 148mm }
body.letter.lanscape {width: 279mm }
}
.pagedTable {
border-spacing: 4mm;
font-size: 13px;
}
.pagedTable td {
width: 90mm;
border: 1px solid black;
vertical-align: top;
height: 123mm;
}
section.php {
display: block;
}
section.js {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/1.0.0/mustache.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head></head>
<body class="letter">
<script id="template" type="text/template">
{{#.}}
<section class="sheet padding-10mm php">
<table class="pagedTable">
{{#.}}
{{#rowstart}}
<tr>
{{/rowstart}}
<td>{{name}}</td>
{{#rowend}}
</tr>
{{/rowend}}
{{/.}}
</table>
</section>
{{/.}}
</script>
</body>
</html>
评论