EL - 执行容器、时间、使用技巧

本文深入解析EL表达式的执行时间特性、使用条件、优势,以及如何通过pageScope、requestScope等隐含对象搜索变量,并详细介绍了EL提供的.和[]运算符在数据存取中的应用。

EL经常和JSTL一起使用,但是EL又可以单独使用,全称是Expression Language

1. EL执行时间

    如果js脚本在jsp文件中,用el表达式有效果 aler("${XXXX }");
    如果是单独的js文件,el表达式是不起作用的.
    结论:EL表达式是在服务端执行的,服务端执行完成后再传给客户端的,

               js是在客户端执行的,el在js前就被执行了。

2. EL使用条件

    只要  ●支持Servlet2.4或者JSP2.0的容器,都可以在JSP网页中直接使用EL不需导入任何其他的包

3. EL优势

    ★方便存取数据

    ★减少jsp中的java代码

    ★EL的语法很简单,最大的特点就是使用上很方便。所有的EL都是以 ${ 为起始、以 } 为结尾的。

4. EL搜索变量的步骤

    系统自动寻找的步骤是:pageScoperequestScopesessionScopeapplicationScope

5. 几个重要的EL隐含对象

    pageScope,取得page范围的属性名称所对应的值。

    requestScope,取得request范围的属性名称所对应的值。

    sessionScope,取得session范围的属性名称所对应的值。

    applicationScope,取得application范围的属性名称所对应的值。

    param,如同ServletReqest.getParameter(String name)

    cookie,如同HttpServletRequest.getCookie()

    initParam,如同ServletContext.getInitParameter(String name)

6. EL提供 . [ ] 两种运算符来存取数据

    ● 下面两种所代表的意思是一样的。

        ${sessionScope.user.sex}等于${sessionScope.user[“sex”]}

    ● 但是使用 [ ] 的范围更广,因为 [ ] 中还可以是变量,比如:

       String str = “sex”;

       ${sessionScope.user[str]}

    ● . [ ] 的混合使用,获取集合中元素的值,例如:

       ${sessionScope.shoppingCart[0].price}表示结果为shoppingCart中第一项物品的价格。

<div id="purAccountDetail-print" class="print-container" > <el-row type="flex" class="row-bg" justify="space-between" align="middle"> <el-col><div class="grid-content center"><h2>{{datas.list[0]?.trader.name}}</h2></div></el-col> </el-row> <el-row type="flex" class="row-bg" justify="space-between" align="middle"> <el-col><div class="grid-content center" ><h3>往来对帐单</h3></div></el-col> </el-row> <el-row type="flex" class="row-bg" justify="space-between" align="middle"> <el-col :span="8"><div class="grid-content left">供货单位:{{datas.list[0]?.supplier.name}}</div></el-col> <el-col :span="8"><div class="grid-content center">对帐日期:{{formatDate(new Date())}}</div></el-col> <el-col :span="8"><div class="grid-content right">上期余额:{{datas.previousBalance}}</div></el-col> </el-row> <el-row> <el-table ref="tableRef" :data="datas.list" table-layout="fixed" border class="table-print" style="width: 100%" :summary-method="getSummaries" show-summary highlight-current-row> <el-table-column prop="purFormDetail.purForm.opTime" label="时间" /> <el-table-column prop="purPayment.paymentMethod.name" label="付款方式" /> <el-table-column prop="purPayment.company.name" label="汇款帐户名称" /> <el-table-column prop="purPayment.amount" label="汇款金额" :formatter="formatScore" /> <el-table-column prop="purFormDetail.storePosition.product.name" label="产品名称" /> <el-table-column prop="purFormDetail.storePosition.productSpec.name" label="规格" /> <el-table-column prop="purFormDetail.storePosition.productState.name" label="交货状态" /> <el-table-column prop="purFormDetail.quantity" label="数量" :formatter="formatScore" /> <el-table-column prop="purFormDetail.storePosition.productUnit.name" label="单位" width="50" /> <el-table-column prop="purFormDetail.number" label="辅助数量" :formatter="formatScore" /> <el-table-column prop="purFormDetail.storePosition.supportUnit.name" label="单位" width="50"/> <el-table-column prop="purFormDetail.price" label="价格" :formatter="formatScore" /> <el-table-column prop="purFormDetail.priceType.name" label="价格类型" /> <el-table-column prop="purFormDetail.amounts" :formatter="formatScore" label="发货金额"/> <el-table-column label="期未余额"> <template #default="{row,$index}"> {{getEndBalance(row,$index)}} </template> </el-table-column> </el-table> </el-row> <!-- 添加页码容器 --> <div class="page-number"> 第 {{ currentPageNumber }} 页 / 共 {{ totalPages }} 页 </div> </div> printJS({ printable: 'purAccountDetail-print', type: 'html', targetStyles: ['*'], maxWidth: 1400, font_size: 'llllll', style: `@media print { body { zoom: 58%; } @page { margin: 0; /* 设置页面边距 */ size: A4; /* 页面大小自适应 */ /* 隐藏页眉和页脚 */ @top-left { content: 'TCM管理软件'; font-size: 10px; } @top-center { content: ''; } @top-right { content: ''; } @bottom-left { content: ''; } @bottom-center { content: ''; } @bottom-right { content: ''; } } #purAccountDetail-print::before { content: "TCM 管理软件"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); font-size: 48px; opacity: 0.1; /* 调整透明度 */ color: #000; pointer-events: none; z-index: 9999; } }` });网页显示正常,打印预览中表格的高度超出容器的高度,导致显示不完整,容器的高度可以根据表格的高度自适应吗
07-21
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值