이전 섹션에서는 제품 쿼리 및 삭제 기능을 완료했습니다. 이 섹션에서는 제품 추가 및 업데이트 기능을 수행합니다.
1. 제품 범주를 추가하십시오
1.1 카테고리 UI 디자인 추가
먼저 아이디어에 대해 이야기 해 봅시다. 먼저, 사용자가 "제품 추가"를 클릭하면 "제품 추가"의 UI 창을 팝업해야합니다 (새로운 JSP로 점프하지 않으며 EasyUI에는 한 페이지 만 있습니다). "제품 추가"창이 팝업되면 부모 클래스의 모든 창문을 잠겨 있어야합니다 (즉, 다른 장소를 클릭하면 유효하지 않으며 제품 추가 창만 작동 할 수 있습니다). 사용자가 정보를 채우면 새로 팝업 된 창에서 "추가"를 클릭하고 요청을 struts2로 보냅니다. 그런 다음 struts2는 요청 매개 변수를 가져 와서 데이터베이스에서 추가 작업을 수행합니다. 이런 식으로 배경 작동이 완료됩니다. 동시에 프론트 데스크는 현재 페이지를 새로 고치고 모든 제품을 다시 재생해야합니다.
EasyUi의 문서를 확인한 결과 새 창을 만들 수있는 두 가지 방법이 있음을 발견했습니다. 태그로 만들거나 JS를 사용하십시오. 우리는 JS를 사용하여 여기에서 만들지 만 다음과 같이 <div> 상자가 필요합니다.
또한, 우리가 만든 새 창은 최소화되거나 최대화 될 필요는 없지만 화면을 잠겨야합니다. 따라서 이러한 특성은 Div에서 설정됩니다. 여기에주의를 기울여야 할 것은 화면 잠금 기능입니다. <div>가 다르게 배치되고 잠긴 화면 범위도 다르기 때문입니다. 전체 화면을 잠그야하므로 <div>를 inindex.jsp에 넣어야합니다. query.jsp의 내용 (추가 버튼 포함)은 aindex.jsp에서 생성되어야하며 save.jsp의 내용 (이를 표시하려는 추가 창 UI). 따라서 팝업 윈도우 후에는 aindex.jsp의 범위를 잠그야하므로 <div>는 inindex.jsp에 배치해야하며 특정 구현은 다음과 같습니다.
aindex.jsp의 <body>에 새 <div>를 추가하십시오
다음과 같이 코드를 복사하십시오. <div id = "win"data-option = "Collapse : False, Minimizable : False, Maximizable : False, Modal : True"> </div>
그런 다음 query.jsp에서 카테고리를 추가하는 부분을 완벽하게 만듭니다.
{iconcls : 'icon-add', 텍스트 : '카테고리 추가', handler : function () {parent. $ ( "#win"). Window ({// <div>는 inindex.jsp에 배치되기 때문에 먼저 부모 제목을 호출해야합니다. }); }} 카테고리 추가를위한 위 코드에서 볼 수 있듯이 Web-Inf/Category 디렉토리에 Save.jsp 파일의 내용을 소개합니다. 다음으로 save.jsp를 완료합니다.
<%@ page language = "java"import = "java.util.*"pageEncoding = "utf-8"%> <! doctype html public "-// w3c // dtd html 4.01 Transitional // en"> <html> <head> <%@ include public/head. 여백 : 5px; }. 관리자의 드롭 다운 목록 Box.combobox의 $ ( "#cc") ({// 처리를 위해 쿼리 메소드로 요청을 보내십시오. 여기서는 처리 된 데이터를이 측면으로 반환하여 데이터를 JSON 형식으로 패키지하고 'Account_Query.action', 'ID', 'ID', 'ID', 'ID', 'ID', 'ID', 'ID', 'account_query.action', 'account_query.action', 'account_query.action', Panel Height : 'Auto', // Adaptive Height PanelWidth : 120, // 드롭 다운 목록은 두 가지 구성 요소로 구성됩니다. // False // 드롭 다운 상자는 팝업에 의해 팝업되기 때문에 refault에 의해 팝업됩니다. $ ( "#ff"). form ( "disablevalidation"); // 버튼 이벤트를 등록합니다. 즉, "$ ("#btn ")를 클릭 할 때 사용자가하는 일입니다. 클릭 (function () {// 확인 $ ("#ff "). form ("enableValidation "); // 확인이 성공하면 ($ ("#ff "). 양식 ("#ff ")을 제출하는 경우 ("#ff ")를 제출합니다. URL : 'category_save.action', // 성공을 처리하기 위해 카테고리 저장 메소드에 요청을 제출하십시오. function () {// 성공한 후 현재 Window Parent를 닫습니다. $ ( "#win") management '] "). }); </script> </head> <body> <form id = "ff"method = "post"> <div> <label for = "name"> 제품 이름 : </label> <input type = "text"name = "type"/> </div> <div> <label> 관리자 : </label> <input id = "cc"name = "Account.id"/> id = "cc"name = "ac data-options = "iconcls : 'icon-add'"> add </a> </div> </form> </body> </html> 프론트 데스크 디스플레이 및 보내기 요청이 완료되었으며 다음 단계는 백엔드 프로그램을 수행하는 것입니다.
1.2 카테고리 추가의 논리적 구현 <br /> 프론트 데스크는 실행을 위해 범주에서 저장 메소드로 데이터를 보내므로, 배경은 데이터베이스에 카테고리를 추가하면 작업을 작성하면 작업을 작성해야하므로 데이터를 프론트 데스크에 반환 할 필요가 없으므로 비교적 간단하고 직접 작업을 작성하십시오.
@Controller ( "CategoryAction") @Scope ( "프로토 타입") 공개 클래스 카테고리 actionAction은 BASEEACTION <범주> {// 다른 코드를 생략합니다 ... public void save () {system.out.println (model); CategoryService.save (모델); }}이러한 방식으로 데이터는 데이터베이스에 저장됩니다. 그 후 프론트 데스크는 디스플레이를 새로 고치고 새로 추가 된 제품 카테고리를 표시합니다. 봅시다.
제품 카테고리 추가를 완료하겠습니다. 아래 제품 범주의 업데이트를 수행하겠습니다.
2. 제품 범주를 업데이트하십시오
2.1 업데이트 카테고리 UI 설계
제품 범주를 업데이트한다는 아이디어는 기본적으로 위에 추가 된 것과 동일합니다. 먼저 UI 창이 팝업 된 다음 사용자가 데이터를 채우고 백그라운드로 전송하고 백그라운드에서 데이터베이스를 업데이트하고 프론트 데스크의 디스플레이를 새로 고침합니다. 우리는 여전히 위의 방법을 사용하여 UI 창을 만듭니다. <div> 상자를 변경할 필요가 없으며 Query.jsp의 "업데이트 범주"부분에 대한 코드를 개선하는 것입니다.
{iconcls : 'icon-edit', 텍스트 : '업데이트 카테고리', 핸들러 : handler : // 선택한 행 레코드가 있는지 판단하고, getSelection을 사용하여 선택한 모든 행 var rows = $ ( "#dg"). DataGrid ( "getStections"); if (rows.length == 0) {// 프롬프트 메시지 $ .messager.show ({// 구문은 Java의 정적 메소드와 유사합니다. 직접 객체 호출 제목 : '오류 프롬프트', MSG : '적어도 하나의 레코드를 선택해야한다', 타임 아웃 : 2000, '슬라이드',}); } else if (rows.length! = 1) {// 인기있는 프롬프트 메시지 $ .messager.show ({// 구문은 Java의 정적 메소드와 유사합니다. 직접 객체 호출 제목 : '오류 프롬프트', MSG : '한 번에 한 레코드 만 업데이트 될 수 있습니다', Timeout : 2000, 'slide',}); } else {// 1. 업데이트 된 페이지 부모. $ ( "#win"). Window ({제목 : "범주 추가", 너비 : 350, 높이 : 250, 내용 : '<iframe src = "send_category_update.action"frameborder = "0"/>'}); // 2. }}}} 위의 JS 코드를 분석하겠습니다. 먼저 사용자가 업데이트 할 라인을 얻으십시오. 선택되지 않은 경우 사용자는 업데이트 할 레코드 이상을 선택하라는 메시지가 표시됩니다. 둘 이상의 레코드를 선택하면 한 번에 하나의 레코드 만 업데이트하라는 메시지가 표시됩니다. 이러한 모든 판단이 완료되면 사용자가 레코드를 확인한 다음 새 UI 창을 만들기 시작합니다. 여기에서와 같이 Web-Inf/Category 디렉토리에 update.jsp 페이지의 내용을 소개합니다. update.jsp 페이지의 내용을 살펴 보겠습니다.
<%@ page language = "java"import = "java.util.*"pageEncoding = "utf-8"%> <! doctype html public "-// w3c // dtd html 4.01 Transitional // en"> <html> <head> <%@ include public/head. 여백 : 5px; }. 처리 된 데이터를이 측면으로 반환해야하므로 배경은 데이터를 JSON 형식으로 패키지하고 URL로 전송해야합니다. 'ac // 동시에 편집 할 수 있습니다. // DROP-DOWN은 편집을 허용하지 않습니다}; ID : 행 [0] .id, type : rows [0] .type, hot : rows [0] .hot, 'ac // 데이터를 반영한 후 확인 함수 $ ( "input [name = type]"). validatebox ({require : true, missingMessage : '범주 이름을 입력하십시오'}); // 확인 $ ( "#ff"). form ( "disablevalidation"); // 버튼의 이벤트 $ ( "#btn"). click (function () {// 확인 $ ( "#ff"). form ( "enableValidation"); // 확인이 성공하면 ($ ( "#ff"). 양식 ( "validate") {// 제출 $ ( "#ff"). 'category_update.action', // CategoryAction의 요청을 제출할 때 : // 성공하면 현재 창을 닫고 $ ( "#win"); }); </script> </head> <body> <form id = "ff"method = "post"> <div> <label for = "name"> 카테고리 이름 : </label> <input type = "text"name = "type"/</div> <div> <레이블에 대한 = "hot"> hotspot : </label> 예 <input type = "radio" "hot" "<input" "<unput" "unput" value = "false"/> </div> <div> <label for = "ac type = "hidden"name = "id"/> </div>`</form> </body> </html> 업데이트와 추가의 차이점은 먼저 데이터가 반향된다는 것입니다. 그런 다음 관리자 데이터를 표시하는 드롭 다운 목록이 있습니다. 위의 코드를 살펴 보겠습니다. 먼저 원격 로딩 방법을 사용하여 관리자 데이터를로드하십시오. 먼저, 백엔드에 요청을 보내십시오. 배경 계정의 쿼리 메소드가 처리 된 후 관리자 데이터가 JSON 형식으로 패키지되어 반환되어 관리자 데이터를 얻을 수 있습니다. 그것을 얻은 후에는 데이터를 반향 할 수 있습니다. 배경 프로그램을 살펴 보겠습니다.
2.2 카테고리의 논리적 구현을 업데이트하십시오
@Controller ( "Baseeaction") @Scope ( "프로토 타입") 공개 클래스 BASEECIP <T>는 ActionSUPPORT AMPSERMENTS RequestAware, SessionAware, ApplicationAware, ModelDriven <T> {// 전경으로 돌아 오도록 데이터를로드하는 데 사용합니다. 다음은 get 메소드 보호 목록 <t> jsonlist = null을 구현하는 것입니다. // 기타 메소드를 생략 ...} // AccountAction @Controller ( "AccountAction") @Scope ( "프로토 타입") 공개 클래스 계정 AccountAction은 BASEEACTION <COUNTHENT> {public String Query () {jsonList = convers.Query (); "JSONLIST"를 반환합니다. }} 다음으로 struts.xml 파일을 구성하겠습니다.
<action name = "ac
Echo를 완료 한 후 업데이트 작업은 업데이트 작업입니다. 물론 검증 기능도 있습니다. 추가와 마찬가지로 업데이트 작업은 요청을 범주 업데이트 방법으로 전달합니다. 이는 비교적 간단합니다.
@Controller ( "CategoryAction") @Scope ( "프로토 타입") 공개 클래스 범주 actionAction은 BASEEACTION <범주> {// 다른 메소드를 생략합니다 ... public void update () {System.out.println (model); CategoryService.update (모델); }}이 시점에서 제품 카테고리의 추가 및 업데이트 작업을 완료했습니다.
원본 주소 : http://blog.csdn.net/eson_15/article/details/51347734
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.