在ftl模板引擎中 <#list data as saleData> <tr style="font-size: ${(saleData.team?contains('汇总') || saleData.team?contains('汇总'))?string('28px', '26px')}; color: ${(saleData.dailySalesAmount == 0)?string("#f3f3f3", '')}; background-color: ${(saleData.dailySalesAmount == 0)?string('#4472C4', '')} ${((saleData.dailySalesAmount > 0) && (saleData.dailySalesAmount < 10000))?string('#D9E1F2', '')} ${(saleData.saleArea=='CA部门' && saleData.dailySalesAmount>0 && saleData.dailySalesAmount<50000)?string('#D9E1F2', '')} ${(saleData.team?contains('汇总')?string('#f3f3f3', ''))}; font-weight: bold"> <td>${(saleData.team)!""}</td> <td>${(saleData.name)!""}</td> <td>${(saleData.tenDailySalesAmount)!""}</td> <td>${(saleData.twelveDailySalesAmount)!""}</td> <td>${(saleData.fifteenDailySalesAmount)!""}</td> <td>${(saleData.dailySalesAmount)!""}</td> <td>${(saleData.orderCount!"")}</td> </tr> </#list> 这个代码可以怎么优化
时间: 2024-03-27 07:38:09 浏览: 171
可以将一些重复判断条件的部分提取出来,减少代码重复和冗余,同时可以使用内置函数和变量简化代码:
```
<#list data as saleData>
<#assign isSummary = saleData.team?contains('汇总')>
<#assign salesAmount = saleData.dailySalesAmount>
<#assign bgColor = (salesAmount == 0)?string('#f3f3f3', '')>
<#assign fontColor = (salesAmount == 0)?'#4472C4' : ((salesAmount > 0) && (salesAmount < 10000))? '#D9E1F2' : (saleData.saleArea == 'CA部门' && salesAmount > 0 && salesAmount < 50000)? '#D9E1F2' : ''>
<#assign fontSize = isSummary?string('28px', '26px')>
<#assign fontWeight = isSummary?string('bold', '')>
<tr style="font-size: ${fontSize}; color: ${fontColor}; background-color: ${bgColor}; font-weight: ${fontWeight}">
<td>${saleData.team!""}</td>
<td>${saleData.name!""}</td>
<td>${saleData.tenDailySalesAmount!""}</td>
<td>${saleData.twelveDailySalesAmount!""}</td>
<td>${saleData.fifteenDailySalesAmount!""}</td>
<td>${saleData.dailySalesAmount!""}</td>
<td>${saleData.orderCount!""}</td>
</tr>
</#list>
```
在这里,我们使用了内置函数 `contains()` 来判断字符串是否包含某个子串,使用 `assign` 定义变量来避免重复计算。同时,我们使用了三目运算符 `?` 简化了代码,使得整个代码更加简洁易懂。
阅读全文
相关推荐





<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <style> .content { padding: 15px; } i { margin-right: 10px; } .site-doc-icon li { width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #0099FF; cursor: pointer; color: #fff; border-radius: 50%; } .site-doc-icon li { display: inline-block; margin: 10px; } .site-doc-icon li { display: inline-block; } </style> </head> <body class="layui-layout-body"> <#include "head.ftl"> 首页 用户管理 分类管理 书评管理 统计占比 欢迎来到共享图书系统
<#include "bottom.ftl"> </body> <script type="text/javascript" src="/https/wenku.csdn.net/js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="/https/wenku.csdn.net/js/axquery.js"></script> <script type="text/javascript" src="/https/wenku.csdn.net/js/template-web.js"></script> <script type="text/javascript" src="/https/wenku.csdn.net/layui/layui.all.js"></script> <script> layui.use([], function () { var $ = layui.jquery; //演示动画开始 $('.site-doc-icon .layui-anim').on('click', function () { var othis = $(this), anim = othis.data('anim'); //停止循环 if (othis.hasClass('layui-anim-loop')) { return othis.removeClass(anim); } othis.removeClass(anim); setTimeout(function () { othis.addClass(anim); }); //恢复渐隐 if (anim === 'layui-anim-fadeout') { setTimeout(function () { othis.removeClass(anim); }, 1300); } }); //演示动画结束 }) </script> </html>如何和后端交互的














