Struts 2 의 Ajax 지원 (4)
5.4 tabbedpanel 라벨
다음 코드 는 모두 5.2 에 기초 합 니 다.
< sx: tabbedpanel / > 탭 을 사용 하면 다음 과 같은 몇 가지 상용 속성 을 지정 할 수 있 습 니 다.
● closeButton: Tab 페이지 에서 닫 기 단추 의 위 치 를 지정 합 니 다. 가능 한 값 은 tab 와 pane 입 니 다.
● selected Tab: 이 페이지 를 불 러 올 때 어떤 Tab 페이지 를 선택 할 지 지정 합 니 다. 기본적으로 첫 번 째 Tab 페이지 를 선택 합 니 다.
● doLayout: tabbedpanel 을 고정 높이 로 표시 할 지 설정 합 니 다. 이 속성 을 fasle 로 설정 하면 tabbedpanel 의 높이 는 Tab 페이지 크기 에 따라 달라 집 니 다.
● labelposition: Tab 페이지 의 탭 위 치 를 설정 합 니 다. top (정상, 기본), right, bottom, left 일 수 있 습 니 다.
아래 의 간단 한 인 스 턴 스 는 2 개의 tab 를 포함 하고 있 습 니 다. 모두 정적 텍스트 입 니 다.
/dojo/sx-tabbedpanel1.jsp
<%@ page contentType="text/html; charset=GBK" language="java" errorPage="" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tabbled panel ： tabbled panel</title>
<sx:head/>
</head>
<body>
Tab ，doLayout <br/>
<sx:tabbedpanel id="tab1" cssStyle="width: 400px; height: 240px;" doLayout="true">
<sx:div id="left" label=" Tab " >
Java <br/>
Java EE <br/>
Ajax <br/>
</sx:div>
<sx:div id="middle" label=" Tab ">
<h3> </h3>
、 ，<br/>
IT ，
。<br/>
， ， 。<br/>
</sx:div>
</sx:tabbedpanel>
</body>
</html>tab 페이지 에 닫 기 단 추 를 추가 하려 면 (탐색 자가 닫 기 단 추 를 눌 렀 을 때 지정 한 tab 페이지 를 닫 을 수 있 습 니 다) tabbedpanel 태그 에 closeButton 속성 을 지정 할 수 있 습 니 다. labelposition 속성 을 동시에 지정 하면 tab 에 있 는 단추 의 위 치 를 설정 할 수 있 습 니 다. 다음 과 같 습 니 다.
/dojo/sx-tabbedpanel2.jsp
<%@ page contentType="text/html; charset=GBK" language="java" errorPage="" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tabbled panel ： tabbled panel</title>
<sx:head/>
</head>
<body>
( closeButton="pane")<br/>
Tab ( labelposition="bottom")<br/>
<sx:tabbedpanel id="tab1" cssStyle="width: 400px; height: 240px;"
doLayout="true" closeButton="pane" labelposition="bottom">
<sx:div id="left" label=" Tab " >
Java <br/>
Java EE <br/>
Ajax <br/>
</sx:div>
<sx:div id="middle" label=" Tab ">
<h3> </h3>
、 ，<br/>
IT ，
。<br/>
， ， 。<br/>
</sx:div>
</sx:tabbedpanel>
</body>
</html>이 밖 에 tabbedpanel 도 tab 페이지 에서 동적 내용 을 사용 하 는 것 을 지원 합 니 다. tab 페이지 에서 동적 내용 을 사용 하 는 방법 은 두 가지 가 있 습 니 다.
● tabbedpanel 탭 의 하위 탭 < sx: div / > href 속성 을 직접 지정 합 니 다.
● tabbedpanel 탭 의 하위 탭 < sx: div / > 에서 < sx: div / > 하위 탭 을 다시 사용 합 니 다.이러한 방식 으로 tab 페이지 의 일부 내용 을 동적 으로 업데이트 할 수 있 습 니 다.
실제로 tabbedpanel 의 모든 tab 페이지 에 있어 서 는 간단 한 용기 일 뿐 다른 HTML 구성 요 소 를 포함 하 는 데 사용 되 며, 이 용기 의 HTML 구성 요 소 는 개발 자가 자 유 롭 게 발휘 하도록 내 버 려 두 었 습 니 다.
다음 과 같다.
/dojo/sx-tabbedpanel3.jsp
<%@ page contentType="text/html; charset=GBK" language="java" errorPage="" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Tab </title>
<sx:head/>
</head>
<body>
<sx:tabbedpanel id="tabbedpanel" cssStyle="width:520px; height: 240px;" doLayout="true">
<!-- div href ， Tab -->
<sx:div id="panel1" label=" Tab " href="ajaxTest.action"/>
<sx:div id="panel2" label=" Tab ">
<h2> ：</h2>
<!-- div div ， Tab -->
<sx:div id="panel21" href="ajaxTest.action" updateFreq="1000"/>
</sx:div>
<sx:div id="panel3" label=" Tab ">
<h3> </h3>
、 ，<br/>
IT ，
。<br/>
， ， 。<br/>
</sx:div>
<!-- Tab -->
<sx:div id="panel4" label=" Tab ">
<div id='show' style="border:2px dotted black;width:240px;height:50px"> </div>
<s:form action='showPerson' method='post'>
<s:textfield name="name" label=" "/><br/>
<s:textfield name="age" label=" "/><br/>
<!-- -->
<sx:submit value=" " targets="show"/>
</s:form>
</sx:div>
</sx:tabbedpanel>
</body>
</html>
네 번 째 tab 를 누 르 면 비동기 폼 을 볼 수 있 습 니 다. 이 폼 에 문자열 을 입력 한 다음 '제출' 단 추 를 누 르 면 내용 이 위 에 표 시 됩 니 다.
tab 페이지 에서 HTML 과 Struts 2 탭 을 사용 할 수 있 습 니 다.
struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.2.dtd">
<struts>
<constant name="struts.custom.i18n.resources" value="messageResource"/>
<constant name="struts.i18n.encoding" value="GBK"/>
<package name="js.dojo" extends="struts-default">
<action name="random" class="js.dojo.RandomAction">
<result>/dojo/randomStr.jsp</result>
</action>
<!-- ajaxText Action -->
<action name="ajaxTest" class="js.dojo.AjaxTestAction">
<result>/dojo/ajaxResult.jsp</result>
</action>
<action name="test">
<result>/dojo/testjs.jsp</result>
</action>
<action name="books">
<result>/dojo/data_zh_CN</result>
</action>
<action name="getBooks" class="js.dojo.GetBooksAction">
<result>/dojo/books.jsp</result>
</action>
<action name="showPerson" class="js.dojo.ShowPersonAction">
<result>/dojo/showPerson.jsp</result>
</action>
<action name="getChild" class="js.dojo.GetChildNode">
<result>/dojo/bookNode.jsp</result>
</action>
<action name="">
<result>.</result>
</action>
</package>
</struts>AjaxTestAction.java
package js.dojo;
import com.opensymphony.xwork2.ActionSupport;
public class AjaxTestAction extends ActionSupport {
private static int counter = 0;
//
private String data;
public long getServerTime() {
return System.currentTimeMillis();
}
public int getCount() {
return ++counter;
}
// data setter getter
public void setData(String data) {
// Dojo
this.data = HTMLDecoder.decode(data);
}
public String getData() {
return " ：" + this.data;
}
}ShowPersonAction.java
package js.dojo;
import com.opensymphony.xwork2.ActionSupport;
public class ShowPersonAction extends ActionSupport {
private String name;
private int age;
// name setter getter
public void setName(String name) {
this.name = HTMLDecoder.decode(name);
}
public String getName() {
return this.name;
}
// age setter getter
public void setAge(int age) {
this.age = age;
}
public int getAge() {
return this.age;
}
}HTMLDecoder.java
package js.dojo;
public class HTMLDecoder {
public static String decode(String str) {
//
String[] tmp = str.split(";&#|&#|;");
StringBuffer sb = new StringBuffer("");
// tmp
for (int i = 0; i < tmp.length; i++) {
// 5 ，
if (tmp[i].matches("\\d{5}")) {
sb.append((char) Integer.parseInt(tmp[i]));
}
//
else {
sb.append(tmp[i]);
}
}
return sb.toString();
}
}
/dojo/showPerson.jsp
<%@ page contentType="text/html;charset=GBK" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
request.setAttribute("decorator", "none");
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>
：<s:property value="name"/><br/>
：<s:property value="age"/><br/>/dojo/ajaxResult.jsp
<%@ page contentType="text/html; charset=GBK" language="java" errorPage="" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
request.setAttribute("decorator", "none");
//
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0);
%>
: <s:property value="count"/><br/>
：<s:property value="serverTime"/><br/>
：<s:property value="data"/>index.jsp
<s:a href="" onclick="newWin('dojo/sx-tabbedpanel1.jsp');" cssStyle="cursor: hand;">sx-tabbedpanel1.jsp</s:a>
<s:a href="" onclick="newWin('dojo/sx-tabbedpanel2.jsp');" cssStyle="cursor: hand;">sx-tabbedpanel2.jsp</s:a>
<s:a href="" onclick="newWin('dojo/sx-tabbedpanel3.jsp');" cssStyle="cursor: hand;">sx-tabbedpanel3.jsp</s:a>5.5 datetimepicker 태그
다음 코드 는 모두 5.2 에 기초 합 니 다.
datetimepicker 탭 은 날짜, 시간 드 롭 다운 선택 상 자 를 만 듭 니 다.
시스템 이 지정 한 날짜, 시간 을 지정 한 텍스트 상 자 를 입력 할 때 날짜, 시간 문자열 로 변환 해 야 합 니 다. 이 문자열 의 형식 을 설정 하기 위해 서 는 날짜, 시간의 형식 부 를 사용 해 야 합 니 다.datetime picker 는 다음 과 같은 몇 가지 형식 을 지원 합 니 다.
● d: 해당 달 며칠 째 지정
● D: 그해 며칠 째 지정
● M: 월 을 대표 한다.M 을 1 ~ 2 개 사용 하면 숫자 월 을 나타 낸다.월 의 줄 임 말 3 개 를 사용 합 니 다. 예 를 들 어 Jan.4 개의 M 은 월 전 체 를 대표 한다.
● y: 연 도 를 대표 한다.yy 또는 yyy 형식 사용 가능
● h: 12 시 를 대표 하 는 시간
● H: 24 시간 을 대표 하 는 시간
● m: 대표 분
● s: 대표 초
이 탭 을 사용 할 때 다음 과 같은 몇 가지 상용 속성 이 있 습 니 다.
● displayFormat: 지정 한 날짜 의 디 스 플레이 형식, 예 를 들 어 d / MM / yyy
● display Weeks: 요일 을 표시 할 달력 을 지정 합 니 다.
● endDate: 날짜 집합 마지막 사용 가능 한 날 짜 를 지정 합 니 다.2141 - 10 - 12 와 같이 이 날 짜 를 지정 하면 뒤의 날 짜 를 사용 할 수 없습니다.
● formatLength: 지정 한 날짜 에 표 시 된 형식 입 니 다. 이 형식 값 은 DateFormat 의 형식 입 니 다. 이 속성 이 지원 하 는 값 은 long, short, medium, full 입 니 다.
● language: 지정 한 날짜 에 표시 되 는 Locale, 간 체 중국 어 를 지정 하려 면 zhCN
● startDate: 지 정 된 날짜 집합의 시작 사용 가능 한 날짜 입 니 다.1940 - 10 - 10 과 같이 이 날 짜 를 지정 하면 앞의 날 짜 를 사용 할 수 없습니다.
● toggleDuration: 지정 한 날짜 선택 상자 가 나타 나 고 숨겨 진 전환 시간
● toggleType: 지정 한 날짜 선택 상자 가 나타 나 고 숨 기 는 방식 으로 plain, wipe, explode, fade 를 선택 할 수 있 습 니 다.
● type: 날짜 선택 상자 의 종 류 를 지정 합 니 다. 지원 하 는 값 은 date 와 time 입 니 다. 각각 날짜 선택 상자, 시간 선택 상 자 를 대표 합 니 다.
● value: 현재 날짜, 시간 을 지정 합 니 다.오늘
● week Startson: 지 정 된 날짜 선택 상자 중 어느 날 이 일주일 의 첫날 입 니까?일요일 은 0, 토요일 은 6.
dojo/sx-datetimepicker.jsp
<%@ page contentType="text/html; charset=GBK" language="java" errorPage="" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> sx:datetimepicker </title>
<sx:head/>
</head>
<body>
<h3> sx:datetimepicker </h3>
<s:form theme="simple">
， toggleType , value="today"<br/>
<sx:datetimepicker name="date1" label=" " toggleType="explode" value="today"/>
<hr/>
， format <br/>
<sx:datetimepicker name="date2" label=" " displayFormat="yyyy MM dd "/>
<hr/>
， weekStartsOn <br/>
<sx:datetimepicker name="date3" label=" " displayFormat="yyyy MM dd " weekStartsOn="2"/>
<hr/>
<br/>
<sx:datetimepicker name="start" label=" " type="time" value="13:00"/>
</s:form>
</body>
</html>
5.6 treenode 와 treenode
다음 코드 는 모두 5.2 에 기초 합 니 다.
우 리 는 < sx: tree / > 와 < sx: treenode / > 라벨 을 통 해 페이지 에서 트 리 구 조 를 생 성 할 수 있 습 니 다. 그 중에서 < sx: tree / > 라벨 은 트 리 구 조 를 생 성 하고 < sx: treenode / > 는 트 리 노드 를 생 성 합 니 다.
< sx: tree / > 와 < sx: treenode / > 태그 에 대해 다음 과 같은 두 가지 기본 속성 을 지정 할 수 있 습 니 다.
● label: 트 리 노드 의 제목 지정
● labelposition: 트 리 노드 의 제목 이 트 리 노드 의 어느 위치 에 있 는 지 지정 합 니 다. 이 속성 은 left 와 top 2 개의 속성 값 을 지원 합 니 다.
다음 페이지 코드 는 < sx: tree > 와 < sx: treenode > 탭 을 사용 하여 간단 한 정적 트 리 를 만 들 었 습 니 다.
dojo/sx-tree1.jsp
<%@ page contentType="text/html; charset=GBK" language="java" errorPage="" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> sx:tree sx:treenode </title>
<sx:head/>
</head>
<body>
<h3> sx:tree sx:treenode </h3>
<!-- sx:tree -->
<sx:tree label=" " id="book" showRootGrid="true" showGrid="true" >
<!-- sx:treenode -->
<sx:treenode label=" " id="yeeku">
<!-- sx:treenode -->
<sx:treenode label=" Java " id="java"/>
<sx:treenode label=" Java EE " id="jee"/>
<sx:treenode label=" Ajax " id="ajax" required="true"/>
</sx:treenode>
<sx:treenode label="David" id="David">
<sx:treenode label="JavaScript: The Definitive Guide" id="javascript"/>
</sx:treenode>
<sx:treenode label="Johnson" id="Johnson">
<sx:treenode id="j2ee" label="Expert One-on-One J2EE Design and Development"/>
</sx:treenode>
</sx:tree>
</body>
</html>위의 코드 에서 볼 수 있 듯 이 이 나무의 모든 노드 앞 에 이 노드 의 전개 / 수축 상 태 를 나타 내 는 아이콘 이 있 습 니 다. < sx: tree > 탭 에 다음 과 같은 2 개의 속성 을 설정 하여 이 2 개의 아이콘 을 변경 할 수 있 습 니 다.
● expandIconsrcMinus: 트 리 노드 가 펼 쳐 진 상 태 를 나타 내 는 아이콘 의 주 소 를 지정 합 니 다.
● expandIconsrcPlus: 트 리 노드 가 수축 상 태 를 나타 내 는 아이콘 의 주 소 를 지정 합 니 다.
동적 로 딩 트 리 노드 를 실현 하기 위해 서 는 < sx: tree > 태그 에 href 속성 을 지정 해 야 합 니 다. 이 속성 은 지정 한 노드 로 하위 노드 를 불 러 옵 니 다.브 라 우 저가 특정한 노드 를 펼 치 려 고 할 때마다 시스템 은 href 가 지정 한 URL 에 비동기 요청 을 보 냅 니 다. 이 요청 은 요청 매개 변 수 를 포함 합 니 다: nodeId, 이 매개 변수의 값 은 이 노드 의 id 속성 값 입 니 다.
서버 는 다음 형식의 응답 을 보 내야 합 니 다:
[
{"id":" ","label":" "},
{"id":"Johnson","label":"Johnson"}
]위의 응답 은 2 개의 키 노드 를 생 성 합 니 다. 각 노드 의 id 와 label 은 위의 id 와 label 에 대응 합 니 다.
dojo/sx-tree2.jsp
<%@ page contentType="text/html; charset=GBK" language="java" errorPage="" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> sx:tree sx:treenode </title>
<sx:head/>
</head>
<body>
<h3> sx:tree sx:treenode </h3>
<sx:tree label=" " id="book" href="getChild.action" showRootGrid="true" showGrid="true">
<sx:treenode label="a"/>
</sx:tree>
</body>
</html>위 코드 는 간단 한 동적 트 리 를 정의 합 니 다. 이 트 리 는 href = "getChild. action" 을 지정 합 니 다. 이 트 리 는 getChild. action 에 따라 하위 노드 를 동적 으로 불 러 옵 니 다.
GetChildNode
package js.dojo;
import java.util.ArrayList;
import java.util.List;
import com.opensymphony.xwork2.ActionSupport;
public class GetChildNode extends ActionSupport {
// nodeId
private String nodeId;
private List<String> books = new ArrayList<String>();
// nodeId setter getter
public String getNodeId() {
return nodeId;
}
public void setNodeId(String nodeId) {
this.nodeId = HTMLDecoder.decode(nodeId);
}
// books getter
public List<String> getBooks() {
return books;
}
// execute
public String execute() throws Exception {
System.out.println("-----" + nodeId);
if (nodeId.equals("book_root")) {
books.clear();
books.add(" ");
books.add("Johnson");
books.add("David");
}
return SUCCESS;
}
}dojo/bookNode.jsp
<%@ page contentType="text/html;charset=GBK" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
[
<s:iterator value="books">
{
"id":"<s:property/>",
"label":"<s:property/>"
},
</s:iterator>
]심각 한 문제 가 있 습 니 다. 하위 노드 는 모두 '잎 노드' 로 처리 되 기 때문에 하급 노드 를 펼 칠 수 없습니다.< sx: treenode > 는 잎 노드 가 아 닌 속성 을 지정 하지 않 은 것 같 습 니 다.
알림: struts 2.1 이 Dojo 플러그 인 을 사용 하 는 것 을 추천 하지 않 기 때문에 Struts 2.1 Dojo 플러그 인 은 < sx: tree > 와 < sx: treenode > 두 개의 탭 에 대한 지원 이 이상 적 이지 않 습 니 다.개발 자가 Dojo 트 리 를 사용 해 야 한다 면, 페이지 에서 네 이 티 브 Dojo 라 이브 러 리 를 직접 사용 할 수 있 습 니 다.
<s:a href="" onclick="newWin('dojo/sx-tree1.jsp');" cssStyle="cursor: hand;">sx-tree1.jsp</s:a>
<s:a href="" onclick="newWin('dojo/sx-tree2.jsp');" cssStyle="cursor: hand;">sx-tree2.jsp</s:a><action name="getChild" class="js.dojo.GetChildNode">
<result>/dojo/bookNode.jsp</result>
</action>5.7 textarea
다음 코드 는 모두 5.2 에 기초 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
원생 Ajax와 jQuery Ajax의 차이점 예시 분석선언: 이번에 소개한 것은 aax와 백그라운드를 이용하여 데이터 교환을 하는 작은 예이기 때문에 demo는 서버를 통해 열어야 합니다.서버 환경은 구축하기 매우 좋다. 인터넷에서wamp나xampp를 다운로드하여 한 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
