본문 바로가기
jQuery/w2ui

[w2ui] 그리드(Grid)에 검색기능 추가하기

사악미소 2016. 9. 21. 11:59
반응형

■ w2ui 그리드(Grid)에 검색창 추가하기.



w2ui의 그리드에 위와같은 검색창을 달아보자.

방법은 아래와같다.



01. show영역에 toolbar를 true로 설정하는걸로서 툴바를 나타내고 multiSearch를 선언한뒤

   searches 부분에 검색영역을 지정함으로서 검색기능을 사용 할 수 있다.

 w2ui_simple_search_true.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<div id="grid" style="width:100%;height:350px;"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#grid").w2grid({
          name : "grid"
        , show : {
              toolbar:true
            , footer:true
        }
        , multiSearch:false

        , searches : [
              { field:"recid", caption:"ID", type:"int" }
            , { field:"name", caption:"이름", type:"float" }
            , { field:"autonym", caption:"본명", type:"text" }
            , { field:"position", caption:"포지션", type:"text" }
            , { field:"birthday", caption:"생일", type:"date" }
        ]

        , columns : [
              { field:"name", caption:"이름", size:"30%" }
            , { field:"autonym", caption:"본명", size:"30%" }
            , { field:"position", caption:"포지션", size:"40%" }
            , { field:"birthday", caption:"생일", size:"120px" }
        ]
        , records: [
              { recid:1, name:"나연", autonym:"임나연", position:"리드댄서, 리드보컬", birthday:"1995-09-22" }
            , { recid:2, name:"정연", autonym:"유정연", position:"리드보컬", birthday:"1966-11-01" }
            , { recid:3, name:"모모", autonym:"히라이 모모", position:"서브보컬, 메인댄서", birthday:"1996-11-09" }
            , { recid:4, name:"사나", autonym:"미나토자키 사나", position:"서브보컬", birthday:"1996-12-29" }
            , { recid:5, name:"지효", autonym:"박지효", position:"리더, 메인보컬", birthday:"1997-02-01" }
            , { recid:6, name:"미나", autonym:"묘이 미나", position:"서브보컬, 메인댄서", birthday:"1997-03-24" }
            , { recid:7, name:"다현", autonym:"김다현", position:"리드래퍼, 서브보컬", birthday:"1998-05-28" }
            , { recid:8, name:"채영", autonym:"손채영", position:"메인래퍼, 서브보컬",  birthday:"1999-04-23" }
            , { recid:9, name:"쯔위", autonym:"저우 쯔위", position:"서브보컬, 리드댄서", birthday:"1999-06-14" }
        ]
    });
});
</script>
</body>
</html>



02. 출력결과는 아래와 같다.








■ w2ui 그리드(Grid)에 상세 검색 기능 추가하기


※ w2ui 그리드 조회 검색 타입.

타입

연산자

설명

 text

 is, begins, contains, ends

 · 가장 기본적으로 특정 문자열이 존재하는지 검색한다.

 int

 is, in, not in, betwwen

 · 특정 숫자값을 조회할때 사용한다.

 · 숫자만 입력가능

 float

 is, between

 소수점(수정예정)

 hex

 is

 

 money

 is, between

 · 통화형식으로 데이터를 찾는다.

 · 기본값은 $달러로 되어있다.

 · 숫자만 입력가능

 currency

  is, between

 · 통화형식으로 데이터를 찾는다.

 · 기본값은 $달러로 되어있다.

 · 숫자만 입력가능

 percent

  is, between

 · 백분율(%) 데이터를 찾는다.

 · 숫자만 입력가능

 alphanumeric

 is, begins, contains, ends

 · 문자와 숫자 구분없

 date

 is, between

 · 특정날자의 데이터를 조회한다.

 time

 is, between · 특정시간의 데이터를 조회한다.

 list

 is

 · 사용자가 정의한 미리 배열로 지정한 리스트 목록과 일치하는 데이터를 조회한다.

 combo

 is, begins, contains, ends 
 enum

 in

 



※ 연산자

 -. is : 조회 값이 해당열의 텍스와 완전 일치하는 값들만 조회한다.

 -. begins : 조회 값이 해당열의 텍스트 맨 앞에 들어가 있는 값들만 조회한다.

 -. contains : 조회 값이 해당열의 텍스트에 일치하는 값이 있으면 조회한다.

 -. ends : 조회 값이 해당열의 텍스트 맨 끝에 들어가 있는 값들만 조회한다.

 -. in : 조회 값이 해당열의 데이터가 일치하는 값들만 조회한다.

 -. not in : 조회 값이 해당열의 데이터가 일치하지 않는 값들만 조회한다.

 -. betwwen : 해당열의 데이터 중에서 입력한 두개의 조회값에 포함되는 값만 조회한다.




※ 상세검색의 영문함수로 나오는 부분을 한글로 변환하고 싶다면.

   [w2ui] 그리드(gride)의 상세검색 한글로 변환하기를 참고하면 된다.



01. 이제 multiSeearch를 true로 설정하여 세부검색 코드를 작성해 보자 코드는 아래와 같다.

w2ui_advanced_search.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<div id="grid" style="width:100%;height:350px;"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#grid").w2grid({
          name : "grid"
        , show : {
              toolbar:true
            , footer:true
        }
        , multiSearch:true
        , searches : [
              { field:"recid", caption:"ID", type:"int" }
            , { field:"name", caption:"이름", type:"float" }
            , { field:"autonym", caption:"본명", type:"text" }
            , { field:"position", caption:"포지션", type:"text" }
            , { field:"constellation", caption:"별자리", type:"list",
                    options : {
                        items : [
                              "양자리", "황소자리", "쌍둥이자리", "게자리", "사자자리", "처녀자리"
                            , "천칭자리", "전갈자리", "사수자리", "염소자리", "물병자리", "물고기자리"
                        ]
                    }
            }
            , { field:"birthday", caption:"생일", type:"date" }
        ]
        , columns : [
              { field:"recid", caption:"ID", size:"50px", sortable:true, attr:"align=center" }
            , { field:"name", caption:"이름", size:"20%" }
            , { field:"autonym", caption:"본명", size:"20%" }
            , { field:"position", caption:"포지션", size:"30%" }
            , { field:"constellation", caption:"별자리", size:"30%" }
            , { field:"birthday", caption:"생일", size:"120px" }
        ]
        , records: [
              { recid:1, name:"나연", autonym:"임나연", position:"리드댄서, 리드보컬", constellation:"처녀자리", birthday:"1995-09-22" }
            , { recid:2, name:"정연", autonym:"유정연", position:"리드보컬", constellation:"전갈자리", birthday:"1966-11-01" }
            , { recid:3, name:"모모", autonym:"히라이 모모", position:"서브보컬, 메인댄서", constellation:"전갈자리", birthday:"1996-11-09" }
            , { recid:4, name:"사나", autonym:"미나토자키 사나", position:"서브보컬", constellation:"염소자리", birthday:"1996-12-29" }
            , { recid:5, name:"지효", autonym:"박지효", position:"리더, 메인보컬", constellation:"물병자리", birthday:"1997-02-01" }
            , { recid:6, name:"미나", autonym:"묘이 미나", position:"서브보컬, 메인댄서", constellation:"양자리", birthday:"1997-03-24" }
            , { recid:7, name:"다현", autonym:"김다현", position:"리드래퍼, 서브보컬", constellation:"쌍둥이자리", birthday:"1998-05-28" }
            , { recid:8, name:"채영", autonym:"손채영", position:"메인래퍼, 서브보컬",  constellation:"황소자리", birthday:"1999-04-23" }
            , { recid:9, name:"쯔위", autonym:"저우 쯔위", position:"서브보컬, 리드댄서", constellation:"쌍둥이자리", birthday:"1999-06-14" }
        ]
    });
});
</script>
</body>
</html>



02. 출력결과는 아래와 같다.

반응형
저작자표시

'jQuery > w2ui' 카테고리의 다른 글

[w2ui] 그리드(Grid) 외부 데이터 불러와서 조회하기  (0) 2016.09.21
[w2ui] 그리드(Gride)의 상세검색 한글로 변환하기  (0) 2016.09.21
[w2ui] 그리드(Grid) 오름차순, 내림차순 정렬 기능 추가하기.  (0) 2016.09.19
[w2ui] w2ui의 그리드(Grid) 그리기  (0) 2016.09.19
[w2ui] 팝업창에 기능에 따른 버튼 추가하기  (0) 2016.09.13

'jQuery/w2ui' Related Articles

티스토리툴바