`
jveqi
  • 浏览: 316204 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

20110705 UI布局div、el表达式问题

 
阅读更多

1、布局UI时,如果下拉框 不能去除,请使用UI布局、 。。。layout

 

2、el表达式 当作js全局变量,以前以为不会出错,今天见识到了,所有页面全部修改。不能使用 js全局变量来接受el表达式的值,如需比较el表达式的值,直接${...}

 

 

 

附:EL表达式详解一份

 

 

EL表达式 (详解)

 

 

EL表达式
     1、EL简介
1)语法结构
       ${expression}
2)[]与.运算符
     EL 提供.和[]两种运算符来存取数据。
     当要存取的属性名称中包含一些特殊字符,如.或?等并非字母或数字的符号,就一定要使用 []。
例如:
         ${user.My-Name}应当改为${user["My-Name"] }
     如果要动态取值时,就可以用[]来做,而.无法做到动态取值。例如:
         ${sessionScope.user[data]}中data 是一个变量
3)变量
     EL存取变量数据的方法很简单,例如:${username}。它的意思是取出某一范围中名称为
username的变量。
     因为我们并没有指定哪一个范围的username,所以它会依序从Page、Request、Session、
Application范围查找。
     假如途中找到username,就直接回传,不再继续找下去,但是假如全部的范围都没有找到时,
就回传null。
     属性范围在EL中的名称
         Page         PageScope
         Request         RequestScope
         Session         SessionScope
         Application     ApplicationScope
4) 1--EL表达式用${}表示,可用在所有的HTML和JSP标签中作用是代替JSP页面中复杂的JAVA代码.
2--EL表达式可操作常量 变量 和隐式对象. 最常用的 隐式对象有${param}和${paramValues}. 
${param}表示返回请求参数中单个字符串的值. ${paramValues}表示返回请求参数的一组
值.pageScope表示页面范围的变量.requestScope表示请求对象的变量. sessionScope表示会话
范围内的变量.applicationScope表示应用范围的变量.
3 --<%@ page isELIgnored="true"%> 表示是否禁用EL语言,TRUE表示禁止.FALSE表示不禁
止.JSP2.0中默认的启用EL语言.
             4-- EL语言可显示 逻辑表达式如${true and false}结果是false     关系表达式如${5>6} 结
果是false     算术表达式如 ${5+5} 结果是10
             5--EL中的变量搜索范围是:page request session application   点运算符(.)和"[ ]"都是
表示获取变量的值.区别是[ ]可以显示非词类的变量

2、EL隐含对象
1)与范围有关的隐含对象
与范围有关的EL 隐含对象包含以下四个:pageScope、requestScope、sessionScope 和
applicationScope;
它们基本上就和JSP的pageContext、request、session和application一样;
在EL中,这四个隐含对象只能用来取得范围属性值,即getAttribute(String name),却不能取得
其他相关信息。
例如:我们要取得session中储存一个属性username的值,可以利用下列方法:
     session.getAttribute("username") 取得username的值,
在EL中则使用下列方法
     ${sessionScope.username}
2)与输入有关的隐含对象
与输入有关的隐含对象有两个:param和paramValues,它们是EL中比较特别的隐含对象。
例如我们要取得用户的请求参数时,可以利用下列方法:
     request.getParameter(String name)
     request.getParameterValues(String name)
在EL中则可以使用param和paramValues两者来取得数据。
     ${param.name}
     ${paramValues.name}

3.其他隐含对象
1)cookie
JSTL并没有提供设定cookie的动作,
例:要取得cookie中有一个设定名称为userCountry的值,可以使用${cookie.userCountry}     来
取得它。
2)header和headerValues
header 储存用户浏览器和服务端用来沟通的数据
例:要取得用户浏览器的版本,可以使用${header["User-Agent"]}。
另外在鲜少机会下,有可能同一标头名称拥有不同的值,此时必须改为使用headerValues 来取得
这些值。
3)initParam
initParam取得设定web站点的环境参数(Context)
例:一般的方法String userid = (String)application.getInitParameter("userid");
     可以使用 ${initParam.userid}来取得名称为userid
4)pageContext
pageContext取得其他有关用户要求或页面的详细信息。
     ${pageContext.request.queryString}         取得请求的参数字符串
     ${pageContext.request.requestURL}         取得请求的URL,但不包括请求之参数字符串
     ${pageContext.request.contextPath}         服务的web application 的名称
     ${pageContext.request.method}           取得HTTP 的方法(GET、POST)
     ${pageContext.request.protocol}         取得使用的协议(HTTP/1.1、HTTP/1.0)
     ${pageContext.request.remoteUser}         取得用户名称
     ${pageContext.request.remoteAddr }         取得用户的IP 地址
     ${pageContext.session.new}             判断session 是否为新的
     ${pageContext.session.id}               取得session 的ID
     ${pageContext.servletContext.serverInfo}   取得主机端的服务信息
   4) 条件标签>
1.算术运算符有五个:+、-、*或$、/或div、%或mod
2.关系运算符有六个:==或eq、!=或ne、<或lt、>或gt、<=或le、>=或ge
3.逻辑运算符有三个:&&或and、||或or、!或not
4.其它运算符有三个:Empty运算符、条件运算符、()运算符
     例:${empty param.name}、${A?B:C}、${A*(B+C)}
5) EL函数(functions)
语法:ns:function( arg1, arg2, arg3 …. argN)
其中ns为前置名称(prefix),它必须和taglib 指令的前置名称一置
       6) 补充:
<%@ taglib prefix="c" http://java.sun.com/jstl/core_rt">http://java.sun.com/jstl/core_rt" %>
FOREACH:
<c:forEach items="${messages}"
var="item"
begin="0"
end="9"
step="1"
varStatus="var">
……
</c:forEach>
OUT:
<c:out value="/${logininfo.username}"/>
c:out>将value 中的内容输出到当前位置,这里也就是把logininfo 对象的
username属性值输出到页面当前位置。
${……}是JSP2.0 中的Expression Language(EL)的语法。它定义了一个表达式,
其中的表达式可以是一个常量(如上),也可以是一个具体的表达语句(如forEach循环体中
的情况)。典型案例如下:
? ${logininfo.username}
这表明引用logininfo 对象的username 属性。我们可以通过“.”操作符引
用对象的属性,也可以用“[]”引用对象属性,如${logininfo[username]}
与${logininfo.username}达到了同样的效果。
“[]”引用方式的意义在于,如果属性名中出现了特殊字符,如“.”或者“-”,
此时就必须使用“[]”获取属性值以避免语法上的冲突(系统开发时应尽量避免
这一现象的出现)。
与之等同的JSP Script大致如下:
LoginInfo logininfo =
(LoginInfo)session.getAttribute(“logininfo”);
String username = logininfo.getUsername();
可以看到,EL大大节省了编码量。
这里引出的另外一个问题就是,EL 将从哪里找到logininfo 对象,对于
${logininfo.username}这样的表达式而言,首先会从当前页面中寻找之前是
否定义了变量logininfo,如果没有找到则依次到Request、Session、
Application 范围内寻找,直到找到为止。如果直到最后依然没有找到匹配的
变量,则返回null.
如果我们需要指定变量的寻找范围,可以在EL表达式中指定搜寻范围:
${pageScope.logininfo.username}
${requestScope.logininfo.username}
${sessionScope.logininfo.username}
${applicationScope.logininfo.username}
在Spring 中,所有逻辑处理单元返回的结果数据,都将作为Attribute 被放
置到HttpServletRequest 对象中返回(具体实现可参见Spring 源码中
org.springframework.web.servlet.view.InternalResourceView.
exposeModelAsRequestAttributes方法的实现代码),也就是说Spring
MVC 中,结果数据对象默认都是requestScope。因此,在Spring MVC 中,
以下寻址方法应慎用:
${sessionScope.logininfo.username}
${applicationScope.logininfo.username}
? ${1+2}
结果为表达式计算结果,即整数值3。
? ${i>1}
如果变量值i>1的话,将返回bool类型true。与上例比较,可以发现EL会自
动根据表达式计算结果返回不同的数据类型。
表达式的写法与java代码中的表达式编写方式大致相同。
IF / CHOOSE:
<c:if test="${var.index % 2 == 0}">
*
</c:if>
判定条件一般为一个EL表达式。
<c:if>并没有提供else子句,使用的时候可能有些不便,此时我们可以通过<c:choose>
tag来达到类似的目的:
<c:choose>
<c:when test="${var.index % 2 == 0}">
*
</c:when>
<c:otherwise>
!
</c:otherwise>
</c:choose>
类似Java 中的switch 语句,<c:choose>提供了复杂判定条件下的简化处理手法。其
中<c:when>子句类似case子句,可以出现多次。上面的代码,在奇数行时输出“*”号,
而偶数行时输出“!”。
经验:1、如果EL表达式无法解析:– <%@ page isELIgnored="false" %>

一、           JSTL

1、EL运算符>;
       2)var指定变量,并把EL运算结果赋值给该变量值为true/false;
       3)scope:指定 var变量的范围;


6、迭代标签
语法:<c:forEach items=“collection” var=“name” varStatus=“status” begin=“int“ 
end=”int” step=“int” >
           //循环体
           </c:forEach>
     说明:1)items:是集合,用EL表达式;
       2)var:变量名,存放items
       3)varStatus: 显示循环状态的变量
①index:从0开始;
                     ②count:元素位置,从1开始;
                     ③first:如果是第一个元素则显示true;
                     ④last:如果是最后一个元素则显示true;
       4)begin:循环的初始值(整型);
       5)end: 循环结束 ;
       6)step:步长,循环间隔的数值;
7、<c:otherwise>标签
     例:
如果user.wealthy值true,则显示user.wealthy is true.
<c:choose>
<c:when test="">
user.generous is true.
</c:when>
<c:when test="">
user.stingy is true.
</c:when>
<c:otherwise>
user.generous and user.stingy are false.
</c:otherwise>
</c:choose>
说明:只有当条件user.generous返回值是true时,才显示user.generous is true.
只有当条件user.stingy返回值是true时,才显示user.stingy is true.
其它所有的情况(即user.generous和user.stingy的值都不为true)全部显示user.generous and 
user.stingy are false.
由于JSTL没有形如if (){…} else {…}的条件语句,所以这种形式的语句只能用<c:choose>、
<c:when>和<c:otherwise>标签共同来完成了。
8、c:forTokens>标签
说明:   
items 进行循环的项目 是 无
delims 分割符 是 无
begin 开始条件 否 0
end 结束条件 否 集合中的最后一个项目
step 步长 否 1
var 代表当前项目的变量名 否 无
varStatus 显示循环状态的变量 否 无
例子:
<c:forTokens items="a:b:c:d" delims=":" var="token">
<c:out value=""/>
</c:forTokens>
这个标签的使用相当于java.util.StringTokenizer类。在这里将字符串a:b:c:d以:分开循环四次,
token是循环到当前分割到的字符串。
9、<c:redirect>标签
     说明:标签将请求重新定向到另外一个页面,它有以下属性 属性 描 述 是否必须 缺省值
url url地址 是 无
context /后跟本地web应用程序的名字 否 当前应用程序
例子:
<c:redirect /'>http://www.yourname.com/login.jsp"/>
将请求重新定向到http://www.yourname.com/login.jsp页,相当于response.setRedirect
("http://www.yourname.com/login.jsp");
10、<c:param>标签
     说明:<c:param>标签用来传递参数给一个重定向或包含页面,它有以下属性属 性 描 述 是否
必须 缺省值
name 在request参数中设置的变量名 是 无
value 在request参数中设置的变量值 否 无
例子:
<c:redirect url="login.jsp">
<c:param name="id" value="888"/>
</c:redirect>
将参数888以id为名字传递到login.jsp页面,相当于login.jsp?id=888
11、<fmt:>格式化标签
     说明:需要导入   <%@ taglib prefix="fmt" http://java.sun.com/jsp/jstl/fmt">http://java.sun.com/jsp/jstl/fmt" %>
     1)格式化日期<fmt:formatDate value=“” pattern=“yyyy-MM-dd HH:mm:ss”/>
               Value:通过EL表达式或<%new Date() %> 取的日期值;
               Pattern:输出的日期格式;                      

 

 

    2) 格式化数字<fmt:formatNumber 
value="${n}" pattern="###,###.##" />
分享到:
评论

相关推荐

    jsp中使用vuejs+element-ui+vuejs第三方组件

    3. **与JSP数据交互**: 可以通过EL表达式(Expression Language)将JSP的后端数据传给Vue实例,或通过Ajax请求获取数据。 **引入Element-UI** 1. **安装Element-UI**: 如果是新项目,可以在项目根目录下运行`npm ...

    vue留言板,支持vue2,vue3

    &lt;div class="el-card-messages"&gt; &lt;el-input type="textarea" :rows="5" placeholder="输 入 留 言" maxlength="200" v-model="message"&gt;&lt;/el-input&gt; &lt;el-button type="info" round class="submit-message" @click...

    62_传智播客巴巴运动网_整齐排列类别选择界面中的类别

    1. JSP基础:包括JSP语法、指令(page、include、taglib)、动作(useBean、forward、param等)以及EL(Expression Language)表达式。 2. HTML/CSS布局:用于构建界面结构和样式,如使用div、ul、li等标签进行布局...

    2_Vue笔记.pdf

    通过组合组件,开发者可以构建复杂的UI结构,同时保持代码的模块化和可维护性。 Vue.js 还提供了计算属性、侦听器、生命周期钩子函数等功能,以应对更复杂的业务需求。计算属性允许我们基于其他数据计算出新的值,...

    vue入门介绍.docx

    在这个例子中,`&lt;div id="app"&gt;`是Vue实例的挂载点,`{{ message }}`是Vue的插值表达式,用于显示`data`对象中的`message`属性。当你在浏览器中运行这段代码时,会看到“Hello Vue!”显示在页面上。 为了方便开发,...

    tab页的实现方法 实现tab

    配合EL(Expression Language)表达式,可以将后端数据绑定到前端显示。同时,使用JavaScript或jQuery处理点击事件,实现内容切换。 3. JavaScript库和框架实现: - jQuery UI:提供了一套完整的Tab组件,只需引入...

    啥都不知道123,2.0元吗,设计与实现,自用

    组件(Components)是Vue的另一个核心概念,它们是可复用的代码块,可以将UI拆分为独立、可组合的部分。创建组件需要先注册,然后在模板中使用。比如: ```javascript Vue.component('my-component', { template: ...

    vue实例001

    Vue还提供了组件系统,允许我们将UI拆分成可重用的部件。组件可以有自己的数据、方法和模板,可以通过props接收父组件的数据,也可以通过自定义事件向父组件发送数据。组件是构建复杂应用的基础,让代码更易于管理和...

    一个微型js库实现了数据绑定功能

    数据绑定的基本思想是将UI元素的状态与应用程序的数据模型关联起来。当模型发生变化时,视图会自动更新以反映这些变化;反之,当用户通过界面交互改变视图时,模型也会相应更新。这种双向数据绑定简化了开发过程,...

    ajaxTag常用标签的使用

    1. **数据绑定**:确保AjaxTag能正确地与后台数据模型绑定,通常是通过EL(Expression Language)表达式来实现。 2. **错误处理**:在Ajax请求失败时,应有合适的错误处理机制,如显示错误信息或恢复默认状态。 3. *...

    JSP标签使用实例

    在JSP页面中,使用JSP标签或者EL表达式来展示数据和分页链接。 ```jsp 使用JSTL标签库 --%&gt; 显示数据 --%&gt; ${dataList}" var="data"&gt; &lt;div&gt;${data.someField}&lt;/div&gt; 分页导航 --%&gt; ${totalPage}" /&gt; ${current...

    使用Vue开发一个实时性时间转换指令

    本文将详细介绍如何使用Vue开发一个实时性时间转换指令,实现将表达式传入的时间戳实时转换为相对时间。下面将逐步剖析相关的知识点。 一、Vue自定义指令v-time 在Vue中,我们可以使用自定义指令来实现一些特殊的...

    vue2.0基础教程

    &lt;div id="app"&gt;{{ message }}&lt;/div&gt; new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); ``` 三、模板语法 Vue2.0的模板语法基于HTML,使用双大括号`{{ }}`来插值表达式,以及指令来增强...

    基于Vuejs和Element的注册插件的编写方法

    1.首先要在HTML文档中引入jQuery版本2.0以下的、一个vuejs库 一个Element-UI库 [removed][removed] [removed][removed] ...el-form :model=ruleForm2 :rules=rules2 ref=ruleForm2 label-width=100px class=dem

    omg-counters:using使用各种前端框架的增量计数器

    在Vue实例中定义一个`count`属性,并在模板中使用`v-text`或`{{ }}`插值表达式来展示计数: ```html &lt;div id="app"&gt; 点击 &lt;p&gt;{{ counter }} &lt;/div&gt; new Vue({ el: '#app', data: { counter: 0 } }); ``` ...

    js代码-学习vue

    Vue.js还提供了丰富的生态系统,包括CLI工具、UI库(如Element UI、Vuetify)、测试工具等,可以极大地提高开发效率。在实际开发中,结合`main.js`和`README.txt`,你可以快速上手并理解一个Vue项目的结构和工作原理...

    vue-lecture1:vue-第1课

    - 内联元素(如`&lt;span&gt;`)和块级元素(如`&lt;div&gt;`)会影响元素在页面中的布局。 结合Vue.js和HTML,我们可以创建动态的、响应式的Web应用。在"vue-lecture1:vue-第1课"中,你将学习如何设置第一个Vue项目,创建并...

    详解vue的数据binding绑定原理

    Vue的数据绑定机制使得UI界面可以自动响应数据模型的变化,极大地简化了DOM操作。 脏检查(Dirty Checking)是早期一些MVVM框架如AngularJS采用的数据绑定策略,它通过不断比对旧值和新值来检测数据变化。然而,...

    study-vue

    组件有自己的模板、数据和方法,可以嵌套使用,构建复杂的UI。 4. **计算属性与侦听器**:计算属性(`computed`)用于根据其他数据生成新的值,而侦听器(`watch`)则可以监听数据变化并执行相应操作。 5. **生命...

Global site tag (gtag.js) - Google Analytics