`
jveqi
  • 浏览: 322368 次
  • 性别: 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...

    Vue+Element实现动态生成新表单并添加验证功能

    它为开发者提供了大量常用的UI组件,如表单、按钮、表格、对话框等,并且支持响应式布局,可以方便地实现多端适配。 知识点三:动态表单生成原理 动态表单生成通常是指根据实际需求,在运行时动态创建表单元素。在...

    element-ui组件中input等的change事件中传递自定义参数

    对于Element UI组件,其使用方法基本与标准的Vue.js组件相同,但在处理事件时需要注意作用域和数据传递的问题。Element UI提供了许多常用的Vue组件,例如表单输入、选择器、按钮、对话框等,它们都遵循Vue.js的标准...

    vue实现点击div外部触发事件的封装方法,注:基于element(学习vue的第一个月零不知道几天)

    同时,保存了绑定的表达式、方法名和值。 2. **update**:当指令的值更新时,更新 `documentHandler` 函数以反映新的绑定信息。 3. **unbind**:当指令与元素解绑时,从 `nodeList` 中移除该元素,并清除相关数据...

    vue实现select下拉显示隐藏功能

    它能够根据用户的输入自动更新组件的状态,同时组件状态的改变也能反映到UI上。 2. **条件渲染(v-if/v-else/v-else-if/v-show)**:通过`v-if`指令可以根据表达式的真假来渲染或移除元素。如果条件表达式为真,则...

    Vue.js 基础语法简介,入门级基础语法

    - **组件(Components)**:复用和封装 UI 结构。 - **路由(Routing)**:实现页面跳转和导航。 - **插值(Interpolation)**:直接在模板中显示数据。 以上就是 Vue.js 的基础语法介绍,通过这些基本的概念和指令...

    vue初级资料--------新手上路

    易于学习且集成到现有项目中,同时提供了丰富的插件生态系统,如vue-router用于路由管理,vuex用于状态管理,vue-cli作为脚手架工具简化项目搭建,vue-resource或axios用于Ajax请求,以及mint-ui和element-ui这样的...

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

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

    VUE整理(一)

    ### VUE整理(一) #### 创建 Vue 实例 ...总结来说,Vue.js 提供了一系列强大的工具来帮助开发者高效地管理数据和 UI 的交互。通过了解和运用这些基础知识,开发者可以轻松构建出响应式的 Web 应用程序。

    vue多种弹框的弹出形式的示例代码

    Element UI 提供了一个叫做`el-dialog`的组件,用于创建对话框或弹框,它提供了丰富的配置和交互方式。 在标题提到的示例中,我们看到Vue应用中有多种弹框的弹出形式。首先,我们来详细了解一下Vue组件的加载机制。...

    2_Vue笔记.pdf

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

    IBM JAVA培训计划

    - EL表达式 - Servlet生命周期 - MVC2模式 - Tomcat服务器配置 ##### 6. JavaScript - 基础语法 - 对象编程 - 事件处理 ##### 7. Ajax - XMLHttpRequest对象 - JSON/XML数据交换 - Ajax框架 ##### 8. UML与项目...

    VUE整理(四)

    总之,在 Vue.js 中,条件渲染是非常重要的概念之一,它可以帮助开发者有效地控制 UI 的显示逻辑。通过合理使用 `v-if`、`v-else`、`v-else-if` 和 `v-show`,以及通过 `key` 来管理元素的复用,我们可以创建出既...

    vue入门介绍.docx

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

    【JavaScript源代码】Vue全家桶入门基础教程.docx

    Vue的模板语法包括指令(如`v-if`, `v-for`, `v-bind`, `v-on`等)和表达式,它们用于控制元素的行为。例如,`v-model`用于双向数据绑定,`v-on`用于事件监听,`v-bind`用于动态绑定属性。 ```html &lt;div v-if="is...

    tab页的实现方法 实现tab

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

    Vue filter 过滤器、以及在table中的使用介绍

    在Vue中使用Element UI的el-table组件时,可以通过插槽(slot)来在表格列中应用过滤器,以显示格式化后的数据。例如,在&lt;el-table-column&gt;标签中使用自定义的模板,并在其中使用过滤器: ```html &lt;el-table-column...

    Extjs核心api详解

    var el = document.createElement('div'); Ext.destroy(el); ``` - **`each`**:遍历数组或NodeList,并执行指定的回调函数。 - 示例: ```javascript var arr = [1, 2, 3]; Ext.each(arr, function(item) {...

    Vue构建交互式的单页面应用程序Vue构建交互式的单页面应用程序

    Vue.js是一种流行的JavaScript前端框架,专为构建交互式的单页面应用程序(SPA)和可复用的UI组件而设计。作为一种轻量级框架,Vue.js可以与其他库或现有项目无缝集成,非常适合快速开发现代化的Web应用程序。 #### ...

Global site tag (gtag.js) - Google Analytics