BS Blog: 2012

2012-12-20

Java] SpringFramework 개발 팁.

출처 : http://www.omnibuscode.com/zeroboard/zboard.php?id=seeyou_programing_spring&page=1&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=reg_date&desc=desc&no=59

- SiteLink #1 : http://blog.naver.com/ecogeo?Redirect=Log&logNo=100010951233

스프링 MVC 적용하면서 대강 정리한 "노트"입니다. 팁이라고하기엔 좀 모자란듯...^^
(오류가 있을수도 있으니 너무 맹신하지는 마세요..-.-);

-. 한 웹app에 여러개의 *-servlet.xml 사용하기
- web.xml에서 원하는 만큼 DispatcherServlet을 선언하고 그 서블릿이름에 대응하는 [servlet-name]-servlet.xml을 작성한다.
- 이렇게 하면 한개의 웹APP 내부에서 웹자원을 몇개의 그룹으로 나누어 별도로 설정하는 것이 가능해진다.

-. 웹자원에 AOP 적용하기
- 핸들러 매핑에 인터셉터를 걸면 된다.
<bean id="signonInterceptor" class="xxx.SignonInterceptor">
    <property name="signonView">
      <value>redirect:/login_form.html</value>
    </property>
</bean>
<bean id="handlerMapping"
    class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
    <property name="interceptors">
      <list>
        <ref bean="signonInterceptor"/>
      </list>
    </property>
    <property name="mappings">
      .... ....
    </property>
</bean>
- 그럼 Controller를 통하지 않고 호출되는 JSP에 AOP 적용하려면?
=> 우선은 web.xml에서 jsp 자원들이 DispatcherServlet을 타도록 만든다음 UrlFilenameViewController를 이용한다.
- 위의 SimpleUrlHandlerMapping 의 mappings 속성을 아래처럼 설정한다.(패턴은 적절히 수정)
      <property name="mappings">
         <props>
            <prop key="*">jspViewController</prop>
         </props>
      </property>
     .... ....
   <bean id="jspViewController"
      class="org.springframework.web.servlet.mvc.UrlFilenameViewController" />

- 그럼 특정 자원에 대해서만 AOP를 적용하지 않으려면?(ex: 로그인폼과 로그인콘트롤러에는 인증인터셉터를 걸면 안된다...)
=> AOP적용하면 안되는 자원에 대한 핸들러 매핑을 추가로 설정하고 우선 순위를 부여한다.
(아래에서 publicHandlerMapping에는 인증인터셉터가 없다)
<bean id="publicHandlerMapping"
    class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
    <property name="order"><value>1</value></property>
    <property name="mappings">
         <props>
            <prop key="/signon/LoginForm.do">jspViewController</prop>
            <prop key="/signon/Login.do">signonController</prop>
         </props>
    </property>
</bean>
<bean id="protectedHandlerMapping"
    class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
    <property name="order"><value>2</value></property>
    <property name="interceptors">
      <list>
        <ref bean="signonInterceptor"/>
      </list>
    </property>
    <property name="mappings">
         <props>
            <prop key="*">jspViewController</prop>
         </props>
    </property>
</bean>
- 위와 같은 설정에서 /signon/Login.do 요청이 들어오면 url패턴은 publicHandlerMapping과
protectedHandlerMapping에 모두 해당된다 할지라도 order 순위에 의해 publicHandlerMapping이
그 요청을 처리하게 된다.

-. ModelAndView에 여러 개의 객체를 저장하기
- Map을 만들어 거기에 적절한 이름으로 저장하면 된다.
return new ModelAndView(this.successView, map);
- JSP에서는 Map에 저장된 키로 request 스코프에서 꺼내어 쓰면된다.

-. 콘트롤러 실행후 특정 url로 redirect하는 방법
- ModelAndView에 넘길 url 앞에 redirect: 접두문자열을 붙여주면 된다.
<bean name="xxxController" class="xxx.XxxController">
    <property name="successView"><value>redirect:/admin/XXXForm.do</value></property>
</bean>

-. 에러 종류별로 에러페이지 다르게 지정하기- exception resolver 빈을 설정한다. exception resolver는 콘트롤러에서 발생한 에러를 잡아낸다.
<bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
<property name="exceptionMappings">
   <props>
    <prop key="org.springframework.dao.DataIntegrityViolationException">DupError.jsp</prop>
    <prop key="org.springframework.dao.DataAccessException">DBError.jsp</prop>
    <prop key="java.lang.Exception">Error.jsp</prop>
   </props>
</property>
</bean>
- exceptionMappings의 각 키의 속성값은 exception 타입별 jsp 페이지 경로이며 이 또한 view resolver에 의해 해석된다(만약 뷰resolver에 suffix를 .jsp로 주었다면 위의 설정에서 Error.jsp는 그냥 Error로 설정해야할 것이다).
- 의문 : 위 설정이 콘트롤러에서 포워딩되는 JSP에도 적용이 되는가? => 안된다!!!
- jsp에서 발생한 에러는 jsp 페이지에 선언한 error 페이지로 가거나 jsp에서 error 페이지 선언을 안했으면 web.xml에 정의한 error 페이지로 간다.

- SimpleFormController 를 이용할 경우엔 onSubmit 메소드안에서
try {
     if (siteForm.isNewSite()) {
  this.siteService.insertSite(siteForm.getSite());
     } else {
  this.siteService.updateSite(siteForm.getSite());
     }
} catch (DataIntegrityViolationException ex) {
     errors.rejectValue(
      "site.siteip",
      "SITE_IP_ALREADY_EXISTS",
      "Site IP already exists: choose a different Site ip.");
     return showForm(request, response, errors);
}
이런식으로 에러처리가 가능하다.

-. 프로세스 처리 과정
- Handler mappings가 url을 분석하여 Controllers 선택 => Controllers는 로직수행후 지정된 View를 생성 => ViewResolvers는 뷰를 해석 => 해석된 뷰로 포워딩

-. 핸들러 매핑
- 여러개의 핸들러 매핑이 있을 때 순서를 부여할 수 있다.
- 패턴 사용가능하다... 특정 패턴의 url을 하나의 콘트롤러에 매핑할 수 있다.
- url 별로 빈네임을 설정하기 위해서 : SimpleUrlHandlerMapping 이용
- url을 바로 빈네임으로 사용하기 위해서 : BeanNameUrlHandlerMapping 이용(아래 소스)
    <bean id="handlerMapping"
          class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping"/>
    <bean name="/editaccount.form"
          class="org.springframework.web.servlet.mvc.SimpleFormController">
        <property name="formView"><value>account</value></property>
        <property name="successView"><value>account-created</value></property>
        <property name="commandName"><value>Account</value></property>
        <property name="commandClass"><value>samples.Account</value></property>
    </bean>
- setAlwaysUseFullPath 속성에 대한 API 설명 읽어볼것.
=> setAlwaysUseFullPath 속성이 false(default)일 때 web.xml에서 /abc/* 로 매핑한 상태에서 url요청이 /abc/test.do 로 들어왔다면 빈네임은 /test.do 로 해야한다는 것이다.

-. 무한루핑 피하기
[web.xml]
"test"라는 이름의 Dispatcher 서블릿에 대한 url 패턴매핑 : /test/jsp/*
[test-servlet.xml] : test Dispatcher 서블릿에 대한 컨텍스트 파일
<bean id="viewResolver"
      class="org.springframework.web.servlet.view.UrlBasedViewResolver">
    <property name="prefix"><value>/test/jsp/</value></property>
    <property name="suffix"><value>.jsp</value></property>
</bean>
=> 이 상황에서 viewResolver에 의한 url 조합이 web.xml의 서블릿 매핑 패턴과 일치하면 무한루프에 빠진다. 주의할 것.

-. UrlFilenameViewController
- UrlFilenameViewController은 url에서 파일명 부분만 빼내어 뷰 url을 만든다.
즉 url이 /foo/bar/test.do 로 들어오건 /bar/foo/test.do로 들어오건 상관없이 뷰 url은 test가 된다.
- 따라서 UrlFilenameViewController를 쓸 경우에는 경로는 다르지만 이름은 동일한 매핑은 없는지 주의해야 한다.
-. JSP에서 스프링 빈 참조하기- servlet context로부터 스프링 WebApplicationContext를 얻은 후 거기서 빈을 액세스한다.
WebApplicationContext wac = WebApplicationContextUtils.getRequiredWebApplicationContext(servletContext);
SomeBean = (SomeBean)wac.getBean("beanName");
- 그러나 이 방법은 너무 힘들어보인다. 그래서 혹시나해서 스프링 태그라이브러리를 찾아보았다.
- 스프링 태그라이브러리에는 빈을 직접 리턴해주는 태그가 안보인다...왜 없을까?
=> 아시는분? JSTL 때문일까? bind 태그를 잠깐 봤는데... 잘이해안됨.
=> 내가 바라는 건 콘트롤러 통하지 않는 JSP에서 특정 빈의 속성값을 쉽게 액세스하고 싶은거다.

-. web.xml에 대한 푸념
- web.xml에서 서블릿 url 패턴매핑에 *.foo 나 /foo/*는 되는데 이 둘의 조합은 왜 안될까?
=> 패턴의 우선 순위 등이 문제일까? 심플하게 갈려고?
- 에러페이지 설정하는데 Exception 클래스 타입별로 다른 에러페이지를 지정했는데, 예외 클래스간의 관계가 부모자식인게 있으면 최상위 부모 클래스에 대한 에러페이지가 보여진다.
=> 왜 상식과 어긋나게 행동하게 했는지...

-. web.xml에서의 url 패턴매핑에 대한 의견
- 개인적으로 /foo/* 식의 패턴매핑은 바람직하지 않다고 생각한다. 왜냐면 static 자원(html,image 등)도 서블릿을 타게 만들기 때문이다. 물론 컨테이너 앞단에 웹서버를 둔다면 어차피 static 자원은
웹서버가 처리하기 때문에 상관은 없겠지만... 하여간 *.foo 식의 패턴을 사용하는게 좋다고 생각한다.

-. 정적 자원에 대한 의문
- 서블릿/jsp 에서 static 자원으로 포워딩했을 때 컨테이너에서 도대체 무슨일이 벌어지는 걸까?
쓰레드 제어권이 static 자원으로 넘어갈리는 없을테고... redirect같은 특수한 응답헤더가 존재하는가?

2012-12-12

JQuery] 이클립스 jquery min js파일 validator 에러 대처법

jquery*.min.js 파일에 에러가 표시되어 프로젝트에 x 표시가 되는 경우에 아래와 같은 방법으로 해결을 할 수 있다.

1) Project->Properties->JavaScript->Include Path->Source

2) Inclusion and Exclusion Patterns 창에서 Exclusion patterns Add 버튼 클릭

3) 상황에 적합한 패턴 입력 (예 : **/jquery*.js )

4) 적용시키면 에러 표시 제거됨

위의 방법으로 적용시에 간혹 Project->Properties 에서 javascript 항목이 안보이는 경우가 발생한다.

이럴 경우,

Project->Properties-> Builders -> "Javascript Validator" 를 체크 해제.

2012-11-23

scripts] ms sql server total size check

'// sql server
'// Displays the total size of a SQL Server database
'//

strDBServerName = "database server name"
strDBName = "ScriptingGuysTestDB"

Set objSQLServer = CreateObject("SQLDMO.SQLServer")
objSQLServer.LoginSecure = True
objSQLServer.Connect strDBServerName

Set objDB = objSQLServer.Databases(strDBName)
WScript.Echo "Total Size of Data File + Transaction Log of DB " & strDBName & ": " & objDB.Size & "(MB)"

scripts] smtp 서비스 사용해서 메일 보내기

'//
'// smtp 서비스 사용해서 메일 보내기
'// ms technet site 내용.
'// 메일 보내기 테스트

Set objEmail = CreateObject("CDO.Message")

objEmail.From = "send email address"
objEmail.To = "receive email address"
objEmail.Subject = "메일 보내기 테스트 입니다/"
objEmail.Textbody = "내용을 만들어서 보내세요."
objEmail.Send

javascript] array를 이용한 중복제거

//TIPS
//[JS] Array 중복제거하기(2009/06/01)
//written by Kim Yeonview : 36
//
Array.prototype.removeSame = function() {

var oldArray = this;
var b = [];
var j = 0;
oldArray.sort();
while(oldArray.length > 0) {

var newKey = oldArray.shift();
if(j == 0) {
b.push(newKey);
j++;
} else if(b[j-1] != newKey) {
b.push(newKey);
j++;
}
}

return b;

};

jquery] jquery 사용 가이드

출처 : http://www.anyframejava.org/node/1061

jQuery 사용 가이드

Submitted by sooyeon.park on 월, 06/07/2010 - 09:03.

안녕하세요. kk3134님,
추후 릴리즈될 Anyframe 4.5.0 버전에서 jQuery 1.4.2 버전을 Integration한 jQuery Anyframe Plugin을 제공할 예정입니다.
필요 파일과 샘플 코드 그리고 사용가이드를 제공할 예정입니다.
(Grid, UI(tab), Tree, Autocomplete, Popup, DropDownList 제공 예정)
현재 바로 jQuery를 사용하고 싶으시다면, 아래와 같이 JSP 페이지에서 사용하고자 하는 jQuery Plugin에 대한 Javascript 파일 및 CSS 파일을
포함시켜야합니다. jQuery 또한 core 기능을 제공하는 jquery-1.4.2.min.js 외 나머지 autocomplete, tree, popup, grid 등의 기능을
Plugin 형태로 제공하므로 원하는 기능을 선택하여 포함시키도록 합니다.

  <!-- for jquery -->

  <script type="text/javascript" src="/jquery/jquery-1.4.2.min.js">



  <!-- jquery:autocomplete -->

  <link rel="stylesheet" type="text/css" href="/jquery/autocomplete/jquery.autocomplete.css">

  <script type="text/javascript" src="/jquery/autocomplete/jquery.autocomplete.js">

  <script type="text/javascript" src="/jquery/autocomplete/jquery.bgiframe.min.js">  

  

  <!-- jquery:jstree-0.9.9 -->

  <script type="text/javascript" src="/jquery/jstree/lib/jquery.cookie.js">

  <script type="text/javascript" src="/jquery/jstree/lib/jquery.metadata.js">

  <script type="text/javascript" src="/jquery/jstree/jquery.tree.js">

  <script type="text/javascript" src="/jquery/jstree/plugins/jquery.tree.contextmenu.js">

  <script type="text/javascript" src="/jquery/jstree/plugins/jquery.tree.cookie.js">



  <!-- jquery ui, jqGrid -->

  <script type="text/javascript" src="/jquery/jqgrid/i18n/grid.locale-en.js">

  <link href="/jquery/jquery-ui/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" /> 

  <script type="text/javascript" src="/jquery/jquery-ui/jquery-ui-1.7.2.custom.min.js">

  <link href="/jquery/jqgrid/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 

  <script type="text/javascript" src="/jquery/jqgrid/jquery.jqGrid.min.js">

 

  <!-- jquery popup -->

  <script type="text/javascript" src="/jquery/nyromodal/js/jquery.nyroModal-1.6.2.pack.js">

  <link href="/jquery/nyromodal/styles/nyroModal.css" rel="stylesheet" type="text/css" />

  

  <!-- jquery tab -->

  <link href="/jquery/jquery-ui/jquery-ui.css" rel="stylesheet" type="text/css" />

            

  <!-- jquery uploadify -->

  <script type="text/javascript" src="/jquery/uploadify/swfobject.js">

  <script type="text/javascript" src="/jquery/uploadify/jquery.uploadify.v2.1.0.min.js">

     

  <!-- jquery image dropdown -->

  <script type="text/javascript" src="/jquery/dropdown/msdropdown/js/jquery.dd.js">

  <link href="/jquery/dropdown/msdropdown/dd.css" rel="stylesheet" type="text/css" />

이 중 간단한 Autocomplete 기능을 예로 들어보면, 아래와 같은 간단한 코드로 Auto Complete 기능을 적용하실 수 있습니다.
- 필요파일) jquery.js(ver. 1.4.2), jquery.autocomplete.js, jquery.bgiframe.js (이상 ver. 1.1), jquery.autocomplete.css

$(“#searchKeyword”).autocomplete(

   ””, {

   width : 200,

   scrollHeight : 200,

   selectFirst:true,

   mustMatch:true,

   matchCase:true,

   autoFill:true,

   scroll: true

 });

위와같이 url을 지정해 주면 바로 autocomplete 기능을 사용할 수 있습니다.

jquery-autocomplete

jquery] jquery jqgrid 설정

원본 출처 : http://dayg.tistory.com/239?srchid=BR1http%3A%2F%2Fdayg.tistory.com%2F239

http://www.trirand.com/blog/?page_id=6 에서 기능별 js파일을 선택하여 zip파일 다운로드.

압축을 풀면 세가지 폴더가 나온다.

jquery.jqGrid-3.6.5/js :

jquery.jqGrid.min.js - jqGrid의 모든 기능이 포함된 압축버전, 배포시 사용

/i18n/grid.locale-en.js - 언어별 locale파일이 있는 i18n폴더. 난 rid.locale-en.js파일을 사용했다.

jquery.jqGrid-3.6.5/css: grid에서 사용하는 css

jquery.jqGrid-3.6.5/src: src폴더는 디버깅을 위한 비압축된 기능별 스크립트 파일이 포함되어있다. 개발시 사용

jqGrid 디버깅을 위한 설정

jquery.jqGrid-3.6.5/src/grid.loader.js

- 비압축된 js파일들을 include해주는 스크립트다. 소스에서 pathtojsfiles라는 변수에 src폴더의 js파일들의 경로를 설정하고, 이 파일을 include하면 된다.

메시지: '$.jgrid.formatter.integer'은(는) null 이거나 개체가 아닙니다.

줄: 711

문자: 5

코드: 0

URI: http://61.250.201.238:8080/memberManagement/js/jqgird_3_6_5/grid.base.js

위 에러는 locale파일의 경로가 틀렸을 경우에 발생한다.

jquery] jquery 튜토리얼

jquery 설명 사이트 : http://godffs.tistory.com/category/ASP.NET/jQuery

[jQuery in Action 내용중]

Selector : html 내의 원하는 작업 대상 엘리먼드를 선택할 수 있는 방법

$("ELEMENT") -> 기본문법

$("p") -> html 내의 모든 p ELEMENT

$("p a") -> html 내의 모든 p ELEMENT 내의 a ELEMENT

$("p:even") ->html 내의 p ELEMENT 중 짝수번째

$("tr:nth-child(1)") -> html 내 모든 테이블 중 첫번째 tr

$("body > div") -> body 아래 첫번째 div

$("a[href$=pdf]") -> pdf 파일이 링크된 a ELEMENT ($는 끝이 pdf로 끝나는 , 반대는 ^)

$("a[href^=http://]") -> a ELEMENZT 중 href attribute가 http://로 시작하는

$("body > div:has(a)") -> body 내 div 중 a ELEMENT를 포함하고 있는 div

$("form[method]") -> method attribute를 가진 모든 form ELEMENT

$("input[type=text]") -> type이 text인 모든 input

$("a[href*=jquery.com] -> href에 jquery.com이 포함된

li:has(a) <> li a

Selector 참고 링크 : http://docs.jquery.com/Selectors

CSS Selector

#someID -> someID를 가지고 id로 가지고 있는 ELEMENT

.someClass -> someClass를 class로 가지고 있는 모든 ELEMENT

a#someID.someClass -> a 태그 중 id가 someID이면서 class가 someClass인

$("p a.someClass") ->p ELEMET 내에 있는 a 태그 중 class가 someClass인

a:first

a:even

a:odd
li:last-child

[jQuery in Action 내용중]

jQuery로 만들어진 기본 유틸리티

$.trim("string")

아래의 세 개가 동일한 효과를 나타내나, 맨 아래가 제일 단순함

window.onload = function() {

$("table tr:nth-child(even)").addClass("class집합");

}; --> 페이지가 모두 로드된 다음 실행되므로, 이미지 등이 로딩 모두 로딩될 때까지 기다려야 하므로 체감 속도가 느리다.

$(document).ready(funtion() {

$("table tr:nth-child(even)").addClass("class집합");

}; --> DOM 트리가 로드된 다음 실행 되어 위보다 상대적으로 빠름

$(function() {

$("table tr:nth-child(even)").addClass("class집합");

};

JQuery 사용해보기.

프로토타입, 도조 등 많은 비슷한 스크립트 라이브러리들이 있지만 요세 대세? 가벼우면서 막강한 JQuery를 사용해보자.

각 포털사이트에서 JQuery를 검색해보면 JQuery는 홈페이지에서 다운로드 할 수 있다.

해당 엘리먼트 접근하기

일반 :document.getElementById("id");

JQuery : $("#id");

- 엘리먼트의 ID 접근시 #, class 접근시 .

해당 엘리먼트의 값 접근하기

일반 : document.getElementById("id").value;

JQuery : $("#id").val();

- 엘리먼트의 값을 대입하고 싶다면 $("#id").val("값");

해당 엘리먼트의 개체를 비교하여 true/false를 알려주는 메소드

일반 : document.getElementById("id").checked;

JQuery : $("#id").is(':checked');

- 체크박스 및 라디오버튼에 체크상태인지를 boolean 형으로 반환

- $("#id").is(".orange, .blue, lightblue"); id의 class 속성중 orange, blue, lightblue 가 하나라도 있으면 true

해당 엘리먼트의 CSS 속성 부여하기

일반 : document.getElementById("id").style.border = "4px solid yellow");

JQuery : $("#id").css("border", "4px solid yellow");

- 첫번째인자는 속성이름, 두번째인자는 속성값을 넣으면 된다.

해당 엘리먼트의 display 속성 부여하기

일반 : document.getElementById("id").style.display = "none";

JQuery : $("#id").hide(); , $("#id").show();

- hide 숨김, show 보임, hide, show 안에 인자를 slow, normal, fast 중 하나로 보임숨김의 속도를 조절 할 수 있다.

- 아니면 수치로 1000분의 1초로 할 수 있음. show(950)

체크박스의 전체선택 / 해제

일반

functionselectAll() {
var blnChecked = document.getElementById("allCheck").checked; // 전체선택 체크박스의 상태
checkBoxes = document.getElementsByName('delCheck'); // 태그이름중 delCheck인 엘리먼트를 배열로 얻음

    for(var i=0; i<checkBoxes.length; i++) {
    objCheck = checkBoxes[i];
        if (objCheck) {
            objCheck.checked = blnChecked;
  }
    }
}

JQuery

$(document).ready(function() {
$('#allCheck').click(function() {                    // 전체선택 체크박스 선택 이벤트
   if($('#allCheck').is(':checked')){                // 전체선택 체크박스 체크상태
      $('.delCheck').each(function(){                // 여러개의 체크박스 의 class 속성의 값이 delCheck 인걸 가져옴
        $(this).attr('checked', 'checked');           // 가져온 체크박스를 checked
        });
     }else{                                                     // 전체선택 체크박스 미체크상태
       $('.delCheck').each(function(){
       $(this).attr('checked','');                         // 가져온 체크박스를 미체크상태로
       });
     }
   });
});

엘리먼트의 존재여부를 체크하기

JQuery : if($("#id").length > 0)

- 엘리먼트로 존재하지 않은 경우에도 빈 객체로 반환하기 때문에 JQuery는.. 객체의 길이를 체크해서 존재여부를 체크한다.

jQuery 함수 $(...)

jQuery(expression,context)

CSS 셀렉터를 받아 매치된 엘리먼트 집합의 jQuery 객체를 리턴한다.

예제1

div 엘리먼트 안의 모든 p 엘리먼트를 추출하여 테두리를 붙인다.

$("div > p").css("border", "1px solid gray");

예제2

document 첫번째 form 안에 있는 모든 input 태그 타입이 radio 인 것을 추출한다.

$("input:radio", document.forms[0]);

예제3

AJAX 응답으로부터 받은 XML에서 모든 div를 추출한다

$("div", xml.responseXML);

jQuery(html)

예제1

div를 비롯한 콘텐츠를 동적으로 생성하고 body에 추가한다.

$("<div><p>Hello</p></div>").appendTo("body")

예제2

input 요소를 type 요소없이 만들 수 없다.

이것은 Microsoft의 read / write - once 규칙에 따른 것으로, 자세한 내용은 MSDN을 참조한다.

// IE에서 작동하지 않음

$("<input/>").attr("type", "checkbox");

// IE에서 작동

$("<input type='checkbox'/>");

jQuery(elements)

이 함수의 인수는 XML Documents와 Window 개체와 같이 DOM 엘리먼트가 아닌것도 받아들인다.

예제1

body의 배경색을 바꾼다 (css 메서드는 DOM Element에 없는 jQuery개체이다)

$(document.body).css( "background", "black" );

예제2

myForm 내의 모든 엘리먼트를 표시하지 않는다 ( 배열에는 모든 것을 한꺼번에 표시하지 않는 hide 함수는 존재하지 않는다)

$(myForm.elements).hide()

jQuery(callback)

$(document).ready()의 약어

DOM Document로드가 끝난 때 바인딩 해 놓은 함수가 실행된다.

이 함수는 $ (document) ready ()와 같게 동작한다.

이 함수는 기술 적으로는 다른 $ () 함수와 마찬가지로 모두 가능하다, 쓰임새는 없다.

예제1

DOM 준비가 가능하면 작업을 수행한다.

$(function(){

// Document is ready

});

예제2

$별칭을 사용하여 jQuery 코드가 안정적으로 동작하므로 전역 변수에 의지하지 않고 인수 $를 기술하도록한다.

jQuery(function($) {

// Your code using failsafe $ alias here...

});

jquery] jqgrid 속성들

출처 : http://devildung.springnote.com/pages/4796171

jQuery('#grid_selector').jqGrid( options )

options에 해당하는 속성들.

Property	Description
url	tells us where to get the data. Typically this is a server-side function with a connection to a database which returns the appropriate information to be filled into the Body layer in the grid - 데이터를 가지고 와야할 url을 지정하는 곳. DB연결 동시에 적합한 정보를 body부분의 grid에 채워주는 server-side 기능이다.
datatype	this tells jqGrid the type of information being returned so it can construct the grid. In this case we tell the grid that we expect xml data to be returned from the server, but other formats are possible. For a list of all available datatypes refer to API Methods - grid가 생성될때 리턴된 정보의 타입을 적는 곳. 이 경우 서버로부터 xml 데이터를 가져와 처리가능하고 다른 형식(타입)도 가능하다. 자세한 것은 API 메소드 보고 알아서 하라.
mtype	tells us how to make the ajax call: either 'GET' or 'POST'. In this case we will use the GET method to retrieve data from the server - GET 방식으로 호출할지 POST로 호출할지를 적는 곳. 대부분 GET으로 이용한다.
colNames	an array in which we place the names of the columns. This is the text that appears in the head of the grid (Header layer). The names are separated with commas - 컬럼의 이름을 지정하는 곳. Header Layer에 표시된다.
colModel	an array that describes the model of the columns. This is the most important part of the grid. Here I explain only the options used above. For the complete list of options see colModel API: name the name of the column. This name does not have to be the name from database table, but later we will see how we can use this when we have different data formats - 컬럼의 이름. 이름은 DB Table의 이름이 될 수 없으며, 추후 서로 다른 타입의 데이터 타입의 정보를 가지고 있을때 어떻게 사용할 수 있는지 볼 수 있다. index the name passed to the server on which to sort the data (note that we could pass column numbers instead). Typically this is the name (or names) from database -- this is server-side sorting, so what you pass depends on what your server expects to receive - 데이터 정렬을 위한 인덱스. (DB의 테이블의 컬럼명을 따른다.) width the width of the column, in pixels align the alignment of the column sortable specifies if the data in the grid can be sorted on this column; if false, clicking on the header has no effect
pager	defines that we want to use a pager bar to navigate through the records. This must be a valid html element; in our example we gave the div the id of "pager", but any name is acceptable. Note that the Navigation layer (the "pager" div) can be positioned anywhere you want, determined by your html; in our example we specified that the pager will appear after the Body layer. - 여러 데이터를 페이지 bar 하기 위해 선언하는 것. 반드시 유효한 element 여야 한다. Navigation layer( Div : pager ) 를 이용하여 원할때 어디서든지 사용 가능하다.
rowNum	sets how many records we want to view in the grid. This parameter is passed to the url for use by the server routine retrieving the data - grid에 몇개의 데이터를 보여 줄 것인지 지정 하는 것.
rowList	an array to construct a select box element in the pager in which we can change the number of the visible rows. When changed during the execution, this parameter replaces the rowNum parameter that is passed to the url - pager의 select box가 생성될때 배열로 볼수 있는 데이터의 수를 지정한다. 갯수가 바뀌어 실행이 되면 rowNum 파라미터가 자동적으로 바뀌게 되어 url로 전송이 되어 다시 데이터를 가져온다.
sortname	sets the initial sorting column. Can be a name or number. This parameter is added to the url for use by the server routine - 초기화 될때 sort할 컬럼을 지정한다. 숫자 or 컬럼 이름일 수 있고, 서버 루틴 사용을 위한 파라미터에 추가되는 것(?)
sortorder	sets the sorting order. This parameter is added to the url - 정렬 방법 (desc \| asc)
viewrecords	defines whether we want to display the number of total records from the query in the pager bar - 총 레코드 수를 pager bar에 표시할 것 인지 지정하는 것.
imgpath	the path to the images needed for the grid. The path should not end with '/' - 생략
caption	sets the caption for the grid. If this parameter is not set the Caption layer will be not visible - Grid의 제목을 설정하는 것. 이 부분이 없으면 제목은 보여지지 않는다.

출처 : http://blog.naver.com/leepcs/20071358208

jquery] jqgrid 예제

출처 : http://kdonghwa.tistory.com/185

파일 : jQueryGrid.zip

jQuery로 프로젝트 수행중 extjs의 grid기능을 맘껏 쓸수 없을까 하다가 데꾸벅! jqGrid라 는 아주 좋은 녀석을 발견하였다.

여러가지 테마를 사용할수 있지만 구미에 맞도록 CSS를 바꿔 보았다. extjs의 경우 UI자체를 수정하기가 어려운 반면 이녀석은 상당히 수월하게 바꿀수 있었다.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>서학리조트 컨텐츠</title>
<link rel="stylesheet" type="text/css" href="style/css/contents.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style/css/grid.css" media="screen" />
<script type="text/javascript" src="style/js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="style/js/jquery.jqGrid.js" charset="utf-8"></script>
<script type="text/javascript" src="style/js/contents_04.js" charset="utf-8"></script></head>
<body>
    <table class="tbl_tit02"><tr><td>담보 사항</td></tr></table>
    <div class="gridJ" style="width:780px"><table id="gridList" class="scroll" ></table></div>

    <div id="rsperror" title="서버에러나오는곳"></div>

    <input type="button" value="선택된Row 데이터가져오기" id="a1" />
    <input type="button" value="Row삭제" id="a2" />
    <input type="button" value="마지막Row추가" id="a3" />
    <input type="button" value="id가 13인 Row선택하기" id="a4" /><br />
    <input type="button" value="tax컬럼 숨기기" id="a5" />
    <input type="button" value="tax컬럼 나타내기" id="a6" />
    <input type="button" value="id가 13 에디팅하기" id="a7" />
    <input type="button" value="저장" id="a8" />
    <input type="button" value="취소" id="a9" /><br />
    <input type="button" value="header값 스타일변경" id="a10" />
    <input type="button" value="셀값 스타일변경" id="a11" />
    <input type="button" value="데이타초기화" id="a12" />
    <input type="button" value="그리드 width/height조절" id="a13" /><br />

    <input type="button" value="HTML 테이블을 그리드화하기" id="a14" />
</body>
</html>

js file

var lastsel3;
$(document).ready(function(){
    $("#gridList").jqGrid({
        url:'server.json',
        mtype: 'GET',
        datatype: "json",
        colNames:['인벤토리','날짜', '고객', '수량','세금','합계','비고'],
        colModel:[
        {name:'id',index:'id', width:100,align:"center",key:true},
        {name:'invdate',index:'invdate', width:120,editable:true,sorttype:"date",formatter:'date', formatoptions:{srcformat:"Y-m-d",newformat:"d-M-Y"}},
        {name:'name',index:'name asc, invdate', width:100,editable:true,editoptions:{size:"20",maxlength:"30"}},
        {name:'amount',index:'amount', width:100, align:"right",editable:true,editable:true,editrules:{number:true,minValue:100,maxValue:350},formatter:'currency',formatoptions:{thousandsSeparator:","}},
        {name:'tax',index:'tax', width:100, align:"right",editable:true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
        {name:'total',index:'total', width:100,align:"right",editable:true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
        {name:'note',index:'note', width:150, sortable:false,editable:true,edittype:"textarea", editoptions:{rows:"1",cols:"20"}}
        ],
        rowNum:30, <-- 가끔씩 이넘이 말썽부릴때가... -1로 해놓으면 가져온 데이타 모두 뿌려줍니다
        height:278,
        sortname: 'id',
        sortorder: "desc",
        viewrecords: true,
        multiselect: false,//앞에 체크박스처리
        multikey: "",//multikey: "ctrlKey/shiftKey",
        editurl: "server.json",
        /*onSelectRow: function(id){ //row가 선택되었을 경우
      if(id && id!==lastsel3){
       jQuery('#gridList').restoreRow(lastsel3);
       jQuery('#gridList').editRow(id,true,pickdates);
       lastsel3=id;
      }
     },*/
        /*jsonReader: {//스크롤할때마다 가져오기
      repeatitems : true,
      cell:"",
      id: "0"
    },*/
       afterInsertRow: function(rowid, aData){
        switch (aData.name) {
          case 'Client 1':
           jQuery("#gridList").setCell(rowid,'total','',{color:'green'});
          break;
          case 'Client 2':
           jQuery("#gridList").setCell(rowid,'total','',{color:'red'});
          break;
          case 'Client 3':
           jQuery("#gridList").setCell(rowid,'total','',{color:'blue'});
          break;

        }
        },
        loadError : function(xhr,st,err) {
        jQuery("#rsperror").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
        },
        imgpath: 'style/grid'
    });
    $("#a1").click( function(){
    var id = jQuery("#gridList").getGridParam('selrow');
    if (id) {
      var ret = jQuery("#gridList").getRowData(id);
      alert("id="+ret.id+" invdate="+ret.invdate+"...");
    } else { alert("Row를 선택해주세요");}
    });
    $("#a2").click( function(){
    var su=jQuery("#gridList").delRowData(12);
    if(su) alert("id가 12인 Row삭제"); else alert("이미 지워졌삼~");
    });
    $("#a3").click( function(){
    var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
    var su=$("#gridList").addRowData(99,datarow);
    if(su) alert("마지막Row추가 성공- 서버쪽 업데이트처리해주세요"); else alert("처리가 되지 않았음.");
    });
    $("#a4").click( function() {
        $("#gridList").resetSelection();
    $("#gridList").setSelection("13");
    });
    $("#a5").click( function() {
    $("#gridList").hideCol("tax");
    });
    $("#a6").click( function() {
    $("#gridList").showCol("tax");
    });
    jQuery("#a7").click( function() {
    jQuery("#gridList").editRow("13");
    this.disabled = 'true';
    jQuery("#a8,#a9").attr("disabled",false);
    });
    jQuery("#a8").click( function() {
    jQuery("#gridList").saveRow("13");
    jQuery("#a8,#a9").attr("disabled",true);
    jQuery("#a7").attr("disabled",false);
    });
    jQuery("#a9").click( function() {
    jQuery("#gridList").restoreRow("13");
    jQuery("#a8,#a9").attr("disabled",true);
    jQuery("#a7").attr("disabled",false);
    });
    jQuery("#a10").click( function() {
    $("#gridList").setLabel("tax","Tax Amt",{'font-weight': 'bold','font-style': 'italic'});
    });

    jQuery("#a11").click( function() {
    $("#gridList").setCell("12","tax","",{'font-weight': 'bold',color: 'red','text-align':'center'});
    });

    jQuery("#a12").click( function() {
    $("#gridList").clearGridData();
    });
    jQuery("#a13").click( function() {
    $("#gridList").setGridWidth(500);
    $("#gridList").setGridHeight(400);
    });
    jQuery("#a14").click(function (){
    tableToGrid("#htmlGrid");
    $("#htmlGrid").setGridWidth(810);
    });
});

function pickdates(id){
alert(id);
}

server.json

{
    "page": "1",
    "total": 27,
    "records": "13",
    "rows": [
        {
            "id": "5",
            "cell": [
                "5",
                "2007-10-06",
                "Client 3",
                "200.00",
                "0.00",
                "200.00",
                null
            ]
        },
        {
            "id": "4",
            "cell": [
                "4",
                "2007-10-05",
                "Client 2",
                "120.00",
                "12.00",
                "134.00",
                null
            ]
        },
        {
            "id": "3",
            "cell": [
                "3",
                "2007-10-05",
                "Client 1",
                "50.00",
                "10.00",
                "60.00",
                null
            ]
        },
        {
            "id": "2",
            "cell": [
                "2",
                "2007-10-05",
                "Client 3",
                "100.00",
                "0.00",
                "100.00",
                "no tax"
            ]
        },
        {
            "id": "1",
            "cell": [
                "1",
                "2007-10-04",
                "Client 3",
                "150.00",
                "0.00",
                "150.00",
                "no tax"
            ]
        }
    ]
}

선택된 Row
jQuery("#grid_id").getGridParam("selrow");

선택된 Row 해제
jQuery("#grid_id").resetSelection();

새 Row 선택
jQuery("#grid_id").setSelection("2");

Row 삭제
jQuery("#grid_id").delRowData("2");

Row 수정
jQuery("#grid_id").setRowData("rowid", {myname:"myvalue"});

Row 추가
addRowData( rowid, data, position, srcrowid )

myfirstrow = { invid:"1", invdate:"2

007-10-01", note:"note", amount:"200.00", tax:"10.00", total:"210.00"} jQuery("#list").addRowData("1", myfirstrow);

position: 'first', 'last', 'before', 'after'
srcrowid : position이 'before', 'after'일때만 설정함

출처 : http://techbug.tistory.com/158