dwr 프레임 워 크 의 DWRUtil 방법

더 읽 기
7. util. js 기능
util. js 는 자바 script 데이터 (예 를 들 어 서버 에서 돌아 온 데이터) 로 웹 페이지 를 업데이트 하 는 데 도움 을 주 는 도구 함 수 를 포함 하고 있 습 니 다.DWR 의 다른 부분 에 의존 하지 않 기 때문에 DWR 이외 에 사용 할 수 있 습 니 다.DWR 전 체 를 다운로드 하거나 단독으로 다운로드 할 수 있 습 니 다.
4 개의 기본 동작 페이지 의 함수:
getValue [s] () 와 setValue [s] () 는 대부분의 HTML 요 소 를 table, list, image 를 제외 하고 조작 할 수 있 습 니 다.getText () 는 select list 를 조작 할 수 있 습 니 다.
table 을 수정 하려 면 사용 할 수 있 습 니 다.
addRows () 와 removeAllRows ().
목록 (select 목록 과 ul, ol 목록) 을 수정 하려 면 addOptions () 와 removeAllOptions () 를 사용 할 수 있 습 니 다.DWRUtil 의 일부분 이 아 닌 다른 기능 도 있다.그러나 작은 문 제 를 해결 하 는 데 도 유용 하 다. 그러나 모든 것 에 통용 되 는 것 은 아니다.
7.1 $()
$() 함수 (합 법 적 인 자바 script 이름) 는 Protoype 에서 훔 쳐 온 아이디어 입 니 다.대략: $= document. getElement ById.Ajax 프로그램 에 서 는 이러한 문 구 를 많이 써 야 하기 때문에 $() 를 사용 하면 더욱 간결 합 니 다.지정 한 id 를 통 해 현재 HTML 문서 의 요 소 를 찾 습 니 다. 여러 개의 인 자 를 전달 하면 찾 은 요소 의 배열 을 되 돌려 줍 니 다.String 형식 이 아 닌 모든 인 자 는 그대로 반 환 됩 니 다.이 함수 의 영감 은 prototype 라 이브 러 리 에 있 지만 더 많은 브 라 우 저 에서 실 행 될 수 있 습 니 다.DWRUtil. toDescriptiveString 의 프 리 젠 테 이 션 을 볼 수 있 습 니 다.기술적 인 측면 에서 볼 때 그 는 IE 5.0 에서 사용 할 수 없다. 왜냐하면 그것 은 Array. push 를 사 용 했 기 때문이다. 그럼 에 도 불구 하고 보통 engine. js 와 함께 일 하 는 데 만 사용 된다.engine. js 를 원 하지 않 고 IE 5.0 에서 사용 하려 면 Array. push 에 대체 품 을 찾 는 것 이 좋 습 니 다.
7.2 addOptions and removeAllOptions
DWR 에서 자주 발생 하 는 작업 은 옵션 에 따라 선택 목록 을 채 우 는 것 입 니 다.아래 의 예 는 입력 에 따라 목록 을 채 우 는 것 입 니 다.다음은 DWRUtil. addOptions () 의 몇 가지 방법 을 소개 한다.select 를 업데이트 한 후에 도 운반 되 는 선택 을 유지 하고 싶다 면 다음 과 같이 하 십시오. var sel = DWRUtil. getValue (id);DWRUtil.removeAllOptions(id); DWRUtil.addOptions(id, ...); DWRUtil.setValue(id, sel);
55 / 92
초기 "Please select..." 옵션 을 추가 하려 면 다음 문 구 를 직접 추가 할 수 있 습 니 다: DWRUtil. addOptions (id, \ [Please select...]);
DWRUtil. addOptions 는 5 가지 모드 가 있 습 니 다.
배열: DWRUtil. addOptions (selected, array)² option 을 만 들 것 입 니 다. 모든 option 의 텍스트 와 값 은 배열 요소 의 값 입 니 다.
대상 배열 (text 지정):² DWRUtil. addOptions (selected, data, prop) 는 각 배열 요소 로 option 을 만 듭 니 다. option 의 값 과 문 자 는 prop 에서 지정 한 대상 의 속성 입 니 다.
대상 배열 (text 와 value 값 지정):² DWRUtil. addOptions (selected, array, valueprop, textprop) 는 각 배열 요소 로 option 을 만 듭 니 다. option 의 값 은 대상 의 valueprop 속성 이 고 option 의 문 자 는 대상 의 textprop 속성 입 니 다.
대상:² DWRUtil. addOptions (selected, map, reverse) 는 각 속성 으로 option 을 만 듭 니 다.대상 속성 명 은 option 의 값 으로 사용 되 며, 대상 속성 값 은 속성 문자 로 사용 되 는데, 이것 은 듣 기 에 좀 틀 렸 다.하지만 사실은 옳 은 방식 이다.reverse 매개 변수 가 true 로 설정 되면 대상 속성 값 은 옵션 의 값 으로 사 용 됩 니 다.
² 대상 의 맵: DWRUtil. addOptions (selected, map, valueprop, textprop) 는 맵 의 모든 대상 으로 option 을 만 듭 니 다.대상 의 valueprop 속성 을 option 의 value 로 하고 대상 의 textprop 속성 을 option 의 문자 로 합 니 다.
² ol 또는 ul 목록: DWRUtil. addOptions (ulid, array) 는 배열 의 요소 로 li 요 소 를 만 듭 니 다. 그들의 innerHTML 은 배열 요소 의 값 입 니 다.이 모드 는 ul 과 ol 목록 을 만 드 는 데 사용 할 수 있 습 니 다.
이것 은 인터넷 의 예 이다.
7.3 addRows and removeAllRows
DWR 는 이 두 함 수 를 통 해 table: DWRUtil. addRows () 와 DWRUtil. removeAllRows () 를 조작 할 수 있 습 니 다.이 함수 의 첫 번 째 매개 변 수 는 모두 table, tbody, thead, tfoot 의 id 입 니 다.일반적으로 tbody 를 사용 하 는 것 이 좋 습 니 다. 헤더 와 footer 줄 이 변 하지 않 고 Internet Explorer 의 bug 를 방지 할 수 있 기 때 문 입 니 다.
DWRUtil.removeAllRows()l
DWRUtil.removeAllRows(id);
설명: id 를 통 해 table 의 모든 줄 을 삭제 합 니 다.인자: id: table 요소 의 id (tbody 요소 의 id 가 좋 습 니 다)
DWRUtil.addRows()l
DWRUtil.addRows(id, array, cellfuncs, [options]);
설명: 지정 한 id 의 table 요소 에 줄 을 추가 합 니 다.이것 은 배열 의 모든 요 소 를 사용 하여 table 에 줄 을 만 듭 니 다.그리고 cellfuncs 배열 에 없 는 함수 로 열 을 만 듭 니 다.셀 은 셀 func 로 배열 이 없 는 요소 에 따라 순서대로 만 들 어 졌 습 니 다.DWR 1.1 부터 addRows () 도 대상 을 데이터 로 사용 할 수 있다.배열 대신 하나의 대상 으로 셀 을 만 들 면 이 대상 은 cell 함수 에 전 달 됩 니 다.인자: id: table 요소 의 id (tbody 요소 의 id 가 좋 습 니 다) array: 배열 (DWR 1.1 이후 대상 일 수 있 습 니 다) 은 표 데 이 터 를 업데이트 하 는 데 사 용 됩 니 다.cellfuncs: 함수 배열, 전 달 된 줄 데이터 에서 셀 데 이 터 를 추출 합 니 다.options: 옵션 을 포함 하 는 대상 (아래 참조) 옵션 은 rowCreator: 줄 을 만 드 는 함수 (예 를 들 어 tr 에 css 를 추가 하 기 를 원 합 니 다) 입 니 다. 기본 값 은 document. createElement ("tr") cellCreator 를 되 돌려 줍 니 다. 셀 을 만 드 는 함수 (예 를 들 어 td 대신 th) 입 니 다. 기본적으로 document. createElement ("td") 를 되 돌려 줍 니 다.
이것 은 인터넷 의 예 이다.
7.4 getText
getText (id) 는 getValue (id) 와 비슷 합 니 다.이것 은 select 목록 을 위 한 것 입 니 다.현재 옵션 의 값 이 아 닌 표시 할 텍스트 가 필요 할 수도 있 습 니 다.
이것 은 인터넷 의 예 이다.
7.5 getValue
DWRUtil. getValue (id) 는 setValue () 에 대응 하 는 '읽 기 버 전' 입 니 다.HTML 요소 에서 값 을 꺼 낼 수 있 습 니 다. 이 요소 가 select 목록 인지 div 인지 상관 하지 않 아 도 됩 니 다.이 함 수 는 대부분의 HTML 요 소 를 작 동 할 수 있 습 니 다. select (텍스트 가 아 닌 현재 옵션 의 값), input 요소 (textarea 포함), div 와 span 을 포함 합 니 다.
이것 은 인터넷 의 예 이다.
7.6 getValues
getValues () 와 getValue () 는 name / value 쌍 을 포함 하 는 javascript 대상 을 입력 하 는 것 을 제외 하고 매우 비슷 합 니 다.name 은 HTML 요소 의 ID 입 니 다. value 는 이 ID 대상 요소 의 내용 으로 변 경 됩 니 다.이 함 수 는 대상 을 되 돌려 주지 않 고 전 달 된 값 만 변경 합 니 다.DWR 1.1 부터 getValues () 는 HTML 요소 (DOM 대상 이나 id 문자열) 를 입력 한 다음 reply 대상 을 생 성 할 수 있 습 니 다.
이것 은 인터넷 의 예 이다.
7.7 onReturn
return 키 를 눌 렀 을 때 알림 을 받 습 니 다.폼 에 input 요소 가 있 을 때 return 키 를 누 르 면 폼 이 제출 됩 니 다.Ajax 를 사용 할 때, 이것 은 종종 당신 이 원 하 는 것 이 아 닙 니 다.보통 필요 한 트리거 는 Javscript 입 니 다.불 행 히 도 브 라 우 저 마다 이 사건 을 처리 하 는 방식 이 다르다.그래서 DWRUtil. onReturn 은 이 차 이 를 복구 했다.만약 당신 이 같은 폼 요소 에서 리 턴 과 같은 특성 을 필요 로 한다 면, 당신 은 이러한 코드 로 실현 할 수 있 습 니 다.
너 도 onkeypress 이벤트 나 onkeydown 사건 을 사용 할 수 있다. 그들 은 같은 일 을 할 수 있다.일반적으로 DWR 은 자바 script 라 이브 러 리 가 아니 기 때문에 이 수 요 를 만족 시 키 려 고 노력 해 야 한다.어쨌든 이것 은 Ajax 를 사용 하 는 과정 에서 매우 유용 한 함수 이다.이 함수 의 작업 원 리 는 onSubmit () 이벤트 가 요소 에 만 존재 하 는 것 입 니 다.
이것 은 인터넷 의 예 이다.
7.8 selectRange
입력 상자 의 일정 범위 의 텍스트 를 선택 하 십시오.'Google suggest' 와 같은 기능 을 수행 하기 위해 서 는 입력 상자 의 일정 범위 의 텍스트 를 선택해 야 할 수도 있 지만 브 라 우 저 마다 선택 한 모델 이 다 릅 니 다.이 DWRUtil 함 수 는 당신 을 도와 실현 할 수 있 습 니 다.DWRUtil.selectRange(ele, start, end)
이것 은 인터넷 의 예 이다.
7.9 setValue
DWRUtil. setValue (id, value) 는 첫 번 째 매개 변수 에서 지정 한 id 에 따라 해당 요 소 를 찾 고 두 번 째 매개 변수 에 따라 값 을 변경 합 니 다.이 함 수 는 대부분의 HTML 요 소 를 작 동 할 수 있 습 니 다. select (텍스트 가 아 닌 현재 옵션 의 값), input 요소 (textarea 포함), div 와 span 을 포함 합 니 다.
이것 은 인터넷 의 예 이다.
7.10 setValues
setValues () 와 setValue () 는 name / value 쌍 을 포함 하 는 javascript 대상 을 입력 하 는 것 을 제외 하고 매우 비슷 합 니 다.name 은 HTML 요소 의 ID 입 니 다. value 는 해당 요소 에 설정 하고 자 하 는 값 입 니 다.
이것 은 인터넷 의 예 이다.
7.11 toDescriptiveString
DWRUtil. toDescriptiveString () 함수 가 기본 toString () 보다 좋 습 니 다.첫 번 째 매개 변 수 는 디 버 깅 대상 이 고 두 번 째 매개 변 수 는 선택 할 수 있 습 니 다. 내용 의 깊이 있 는 차원 을 지정 합 니 다. 0: 단일 디 버 깅 1: 여러 줄 디 버 깅 이지 만 하위 대상 에 깊이 들 어가 지 않 습 니 다.2. 여러 줄 의 디 버 깅 을 하고 2 층 의 대상 에 깊이 들 어가 이런 식 으로 유추 합 니 다.일반적으로 2 급 까지 디 버 깅 하 는 것 이 가장 좋다.세 번 째 인자 도 있 습 니 다. 초기 들 여 쓰 기 를 정의 합 니 다.이 함 수 는 나중에 변화 가 있 을 수 있 기 때문에 튜 닝 프로그램 외 에 사용 되 어 서 는 안 된다.
이것 은 인터넷 의 예 이다.
7.12 useLoadingMessage
이 방법 은 장차 폐 기 될 것 이다. 왜냐하면 이것 은 실현 이 너무 독단적 이기 때문이다.왜 빨간색 이 야? 왜 오른쪽 상단 에 있어? 잠깐 만.유일한 정 답 은 GMail 표절 이다.이 페이지 의 코드 를 템 플 릿 으로 하여 필요 에 따라 사용자 정의 하 는 것 을 권장 합 니 다.페이지 를 불 러 온 후에 이 방법 을 사용 해 야 합 니 다 (예 를 들 어 onload () 이벤트 가 발생 하기 전에 호출 하지 마 십시오). 숨겨 진 div 를 만들어 서 메 시 지 를 수용 해 야 하기 때 문 입 니 다.
가장 쉬 운 방법 은 onload 이벤트 에서 DWRUtil. useLoadingMessage 를 호출 합 니 다. 이렇게:

   function init() { DWRUtil.useLoadingMessage(); }
 ...

 ...

헤더 와 body 탭 을 쉽게 편집 할 수 없 는 경우 도 있 습 니 다. (CMS 를 사용 하고 있다 면 정상 입 니 다) 이 경우 이렇게 할 수 있 습 니 다.

function init() {
   DWRUtil.useLoadingMessage();
}
if (window.addEventListener) {
    window.addEventListener("load", init, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", init);
} else {
    window.onload = init;
}

다음은 이 함수 의 코드 입 니 다. 로 딩 메 시 지 를 실현 하 는 데 유용 합 니 다.이 함수 의 주요 내용 은 동적 으로 div (id 는 disabledZone) 를 만들어 서 메 시 지 를 수용 하 는 것 입 니 다.중요 한 코드 는 원 격 호출 시 표시 하고 숨 기 는 것 입 니 다.

DWREngine.setPreHook(function() { $('disabledZone').style.visibility = 'visible'; }); 
DWREngine.setPostHook(function() { $('disabledZone').style.visibility = 'hidden'; });
This is fairly simple and makes it quite easy to implement your own "loading" message.
function useLoadingImage(imageSrc) { 
var loadingImage;
if (imageSrc) 
   loadingImage = imageSrc; 
else
   loadingImage = "ajax-loader.gif"; 
DWREngine.setPreHook(function() { 
    var disabledImageZone = $('disabledImageZone'); 
    if (!disabledImageZone) { 
      disabledImageZone = document.createElement('div'); 
      disabledImageZone.setAttribute('id', 'disabledImageZone'); 
      disabledImageZone.style.position = "absolute"; 
      disabledImageZone.style.zIndex = "1000"; 
      disabledImageZone.style.left = "0px"; 
      disabledImageZone.style.top = "0px"; 
      disabledImageZone.style.width = "100%"; 
      disabledImageZone.style.height = "100%"; 
      var imageZone = document.createElement('img'); 
      imageZone.setAttribute('id','imageZone'); 
      imageZone.setAttribute('src',imageSrc); 
      imageZone.style.position = "absolute"; 
      imageZone.style.top = "0px"; 
      imageZone.style.right = "0px";
      disabledImageZone.appendChild(imageZone); 
      document.body.appendChild(disabledImageZone); 
    } else { 
      $('imageZone').src = imageSrc; 
      disabledImageZone.style.visibility = 'visible'; 
    } 
});
DWREngine.setPostHook(function() { $('disabledImageZone').style.visibility = 'hidden'; }); 
}

그리고 이렇게 사용 할 수 있 습 니 다: useLoadingImage ("images / loader. gif");
7.13 Submission box
h1 비 util. js 의 기능 은 DWRUtil 에 가입 하기에 적합 하지 않 은 기능 이 있 습 니 다.그들 은 특수 한 문 제 를 해결 하 는 데 유용 하지만, 어떤 경우 에 도 적용 하기 에는 아직 통용 되 지 않 는 다.
62 / 92
브 라 우 저 이 벤트 를 수정 합 니 다. DOM 요 소 를 만 들 고 addAttribute 로 이 요소 에 이 벤트 를 만 들 었 다 면 정상 적 인 트리거 를 받 을 수 없습니다.아래 스 크 립 트 를 사용 하여 DOM 트 리 를 옮 겨 다 니 며 이 벤트 를 다시 연결 할 수 있 습 니 다. 그러면 정상적으로 실행 할 수 있 습 니 다.클릭 을 원 하 는 이벤트 로 바 꿔 라.

DWREngine._fixExplorerEvents = function(obj) {
   for (var i = 0; i < obj.childNodes.length; i++) {
      var childObj = obj.childNodes [i];
      if (childObj.nodeValue == null) {
         var onclickHandler = childObj.getAttribute('onclick');
         if (onclickHandler != null) {
            childObj.removeAttribute('onclick'); // If using prototype:
            // Event.observe(childObj, 'click', new Function(onclickHandler));
            // Otherwise (but watch out for memory leaks):
           if (element.attachEvent) {
              element.attachEvent("onclick", onclickHandler);
           } else {
              element.addEventListener("click", onclickHandler, useCapture);
           }
      }
      DWREngine._fixExplorerEvents(childObj);
   }

}