본문 바로가기
jQuery/w2ui

[w2ui] w2ui의 그리드(Grid) 그리기

사악미소 2016. 9. 19. 11:38
반응형

■ w2ui 그리드 나타내기



01. 아래코드를 사용하면 w2ui에 그리드(Grid)를 그려 나타낼 수 있다.

 w2ui_simple_grid.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"
        , columns : [               
              { field:"name", caption:"이름", size:"30%" }
            , { field:"autonym", caption:"본명", size:"30%", attr:"align=center" }
            , { field:"position", caption:"포지션", size:"40%", attr:"align=left" }
            , { field:"birthday", caption:"생일", size:"120px", attr:"align=right" }
        ]
        , 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. 출력결과는 아래와 같다.




※ 각 행의 타이틀을 가운데 정렬 해 보자.


01. w2ui의 css파일의 w2ui-col-header 부분을 찾고 아래에 굵게 표시된 내용을 윗줄에 삽입한다.

 w2ui-1.4.3.css

div.w2ui-col-header {
    text-align:center;
}
.w2ui-grid .w2ui-grid-body div.w2ui-col-header {
  height: auto !important;
  width: 100%;
  overflow: hidden;
  padding-right: 10px !important;
}
.w2ui-grid .w2ui-grid-body div.w2ui-col-header > div.w2ui-sort-up {
  border: 4px solid transparent;
  border-bottom: 5px solid #8D99A7;
  margin-top: -2px;
  margin-right: -7px;
  float: right;
}
.w2ui-grid .w2ui-grid-body div.w2ui-col-header > div.w2ui-sort-down {
  border: 4px solid transparent;
  border-top: 5px solid #8D99A7;
  margin-top: 2px;
  margin-right: -7px;
  float: right;
}




02. 이제 위 실행결과를 다시 새로고침하여 불러오면 아래와 같이 타이을이 중앙 정렬되어 나오는것을 볼 수 있다.









■ w2ui 그리드에서 특정 행 강조하기



01. records영역에 style 태그를 사용함으로서 CSS를 적용하여 특정 행을 강조 할 수 있다.

 w2ui_row_formation.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"
        , columns : [                
              { field:"name", caption:"이름", size:"30%" }
            , { field:"autonym", caption:"본명", size:"30%", attr:"align=center" }
            , { field:"position", caption:"포지션", size:"40%", attr:"align=left" }
            , { field:"birthday", caption:"생일", size:"120px", attr:"align=right" }
        ]
        , records: [
            {
                  recid:1
                , name:"나연"
                , autonym:"임나연"
                , position:"리드댄서, 리드보컬"
                , birthday:"1995-09-22"
                , style:"background-color:#FF99CC;text-align:center"
            }
            , { recid:2, name:"정연", autonym:"유정연", position:"리드보컬", birthday:"1966-11-01" }
            , {
                  recid:3
                , name:"모모"
                , autonym:"히라이 모모"
                , position:"서브보컬, 메인댄서"
                , birthday:"1996-11-09"
                , style:"font-weight:bold;color:#6666FF"
            }
            , {
                  recid:4
                , name:"사나"
                , autonym:"미나토자키 사나"
                , position:"서브보컬"
                , birthday:"1996-12-29"
                , style:"background-color:#C2F5B4"
            }
            , { 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"
                , style:"text-align:center"
            }
        ]
    });    
});
</script>
</body>
</html>



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












■ w2ui 그리드 하단에 푸터(footer) 나타내기



01. 그리드 하단에 선택한 그리드의 정보가 나타나는 푸터(footer)를 나타내 보자.

 w2ui_grid_footer.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: { footer:true }
        , columns : [               
              { field:"name", caption:"이름", size:"30%" }
            , { field:"autonym", caption:"본명", size:"30%", attr:"align=center" }
            , { field:"position", caption:"포지션", size:"40%", attr:"align=left" }
            , { field:"birthday", caption:"생일", size:"120px", attr:"align=right" }
        ]
        , 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 그리드 하단에 서머리(summary) 그리기



01. 위 푸터(footer)와 달리 사용자가 직접 커스터마이징한 서머리(summary)를 둘 수 있다.

 w2ui_grid_summary.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"
        , columns : [               
              { field:"name", caption:"이름", size:"30%" }
            , { field:"autonym", caption:"본명", size:"30%", attr:"align=center" }
            , { field:"position", caption:"포지션", size:"40%", attr:"align=left" }
            , { field:"birthday", caption:"생일", size:"120px", attr:"align=right" }
        ]
        , 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" }
            , {
                 summary:true
                , recid:"S-1"
                , name:"<span style='float:right;'>TWICE</span>"
                , autonym:"나연"
                , position:"<span style='float:right;'>직책</span>"
                , birthday:"맏내"
            }
            , {
                 summary:true
                , recid:"S-2"
                , name:"<span style='float:right;'>멤버</span>"
                , autonym:"9명"
                , position:"<span style='float:right;'>회사</span>"
                , birthday:"JYP"
            }
        ]
    });   
});
</script>
</body>
</html>




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









■ w2ui 그리드 선택 열 그룹화 하기



01. w2ui에서는 columnGroups를 통해 선택 열을 그룹화 할 수 있다.

 w2ui_grid_group.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"
        , columnGroups : [
              { caption:"Name", span:2 }
            , { caption:"", master:true }
            , { caption:"", master:true }
        ]
        , columns : [               
              { field:"name", caption:"이름", size:"30%" }
            , { field:"autonym", caption:"본명", size:"30%", attr:"align=center" }
            , { field:"position", caption:"포지션", size:"40%", attr:"align=left" }
            , { field:"birthday", caption:"생일", size:"120px", attr:"align=right" }
        ]
        , 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. 출력결과는 아래와 같다.




03. 다음과 같이 좀더 구분할 수도 있다.

 w2ui_column_groups.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:920px;"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#grid").w2grid({
          name : "grid"
        , searches: [               
              { field:"lname", caption:"Last Name", type:"text" }
            , { field:"fname", caption:"First Name", type:"text" }
            , { field:"email", caption:"Email", type:"text" }
        ]
        , show : { footer: true }
        , sortData : [ { field:"recid", direction:"asc" } ]
        , columnGroups : [
              { caption:"번호", span:1 }        // 병합되지 않고 공간을 차지한다.
            , { caption:"소속", span:2 }        // 그룹, 회사가 병합된다.
            , { caption:"", master:true }        // 병합
            , { caption:"", master:true }        // 병합
            , { caption:"개인정보", span:3 }    // 생일, 나이, 혈액형이 병합된다.
            , { caption:"", master:true }        // 병합
        ]
        , columns: [               
              { field:"recid", caption:"", size:"50px", sortable:true, attr:"align=center", resizable:true }
            , { field:"group", caption:"그룹", size:"30%", sortable:true, resizable:true }
            , { field:"company", caption:"회사", size:"15%", sortable:true, resizable:true }
            , { field:"name", caption:"이름", size:"15%", sortable:true, resizable:true }
            , { field:"position", caption:"포지션", size:"15%", sortable:true, resizable:true }
            , { field:"birthday", caption:"생일", size:"15%", sortable:true, resizable:true }
            , { field:"age", caption:"나이", size:"10%", sortable:true, resizable:true }
            , { field:"blood", caption:"혈액형", size:"10%", sortable:true, resizable:true }
            , { field:"anote", caption:"비고", size:"90px", sortable:true, attr:"align=center", resizable:true }
        ]
        , records: [
              { recid:1, company:"JYP", group:"트와이스", name:"나연", autonym:"임나연", position:"리드댄서, 리드보컬, 맏내, 비주얼", birthday:"1995-09-22", age:"21", blood:"A형", anote:"♥" }
            , { recid:2, company:"JYP", group:"트와이스", name:"정연", autonym:"유정연", position:"리드보컬", birthday:"1996-11-01", age:"20", blood:"O형"  }
            , { recid:3, company:"JYP", group:"트와이스", name:"모모", autonym:"히라이 모모", position:"서브보컬, 메인댄서", birthday:"1996-11-09", age:"20", blood:"A형", anote:"★" }
            , { recid:4, company:"JYP", group:"트와이스", name:"사나", autonym:"미나토자키 사나", position:"서브보컬", birthday:"1996-12-29", age:"20", blood:"B형", anote:"♥" }
            , { recid:5, company:"JYP", group:"트와이스", name:"지효", autonym:"박지효", position:"리더, 메인보컬", birthday:"1997-02-01", age:"19", blood:"O형" }
            , { recid:6, company:"JYP", group:"트와이스", name:"미나", autonym:"묘이 미나", position:"서브보컬, 메인댄서", birthday:"1997-03-24", age:"19", blood:"A형" }
            , { recid:7, company:"JYP", group:"트와이스", name:"다현", autonym:"김다현", position:"리드래퍼, 서브보컬", birthday:"1998-05-28", age:"18", blood:"O형" }
            , { recid:8, company:"JYP", group:"트와이스", name:"채영", autonym:"손채영", position:"메인래퍼, 서브보컬",  birthday:"1999-04-23", age:"17", blood:"B형" }
            , { recid:9, company:"JYP", group:"트와이스", name:"쯔위", autonym:"저우 쯔위", position:"서브보컬, 리드댄서", birthday:"1999-06-14", age:"17", blood:"A형" }
            , { recid:10, company:"울림", group:"러블리즈", name:"베이비소울", autonym:"이수정", position:"리더, 리드보컬", birthday:"1992-07-06", age:"24", blood:"O형", anote:"★" }
            , { recid:11, company:"울림", group:"러블리즈", name:"유지애", autonym:"유지애", position:"서브보컬", birthday:"1993-05-21", age:"23", blood:"A형"  }
            , { recid:12, company:"울림", group:"러블리즈", name:"서지수", autonym:"서지수", position:"서브보컬, 메인댄서", birthday:"1994-02-11", age:"22", blood:"O형" }
            , { recid:13, company:"울림", group:"러블리즈", name:"이미주", autonym:"이미주", position:"서브보컬, 메인댄서", birthday:"1994-09-23", age:"22", blood:"O형" }
            , { recid:14, company:"울림", group:"러블리즈", name:"Kei", autonym:"김지연", position:"메인보컬, 리드댄서, 애교", birthday:"1995-03-20", age:"21", blood:"O형", anote:"♥" }
            , { recid:15, company:"울림", group:"러블리즈", name:"Jin", autonym:"박명은", position:"메인보컬", birthday:"1996-06-12", age:"20", blood:"B형" }
            , { recid:16, company:"울림", group:"러블리즈", name:"류수정", autonym:"류수정", position:"리드보컬", birthday:"1997-11-19", age:"19", blood:"B형" }
            , { recid:17, company:"울림", group:"러블리즈", name:"정예인", autonym:"정예인", position:"서브보컬, 리드댄서",  birthday:"1998-06-04", age:"18", blood:"B형" }
            , { recid:18, company:"쏘스뮤직", group:"여자친구", name:"소원", autonym:"김소정", position:"리더, 서브보컬", birthday:"1995-12-07", age:"21", blood:"A형" }
            , { recid:19, company:"쏘스뮤직", group:"여자친구", name:"예린", autonym:"정예린", position:"서브보컬, 리드댄서", birthday:"1996-08-19", age:"20", blood:"O형" }
            , { recid:20, company:"쏘스뮤직", group:"여자친구", name:"은하", autonym:"정은비", position:"리드보컬", birthday:"1997-05-30", age:"19", blood:"O형" }
            , { recid:21, company:"쏘스뮤직", group:"여자친구", name:"유주", autonym:"최유나", position:"메인보컬", birthday:"1997-10-04", age:"19", blood:"B형" }
            , { recid:22, company:"쏘스뮤직", group:"여자친구", name:"신비", autonym:"황은비", position:"메인댄서, 서브보컬", birthday:"1998-06-03", age:"18", blood:"AB형" }
            , { recid:23, company:"쏘스뮤직", group:"여자친구", name:"엄지", autonym:"김예원", position:"서브보컬", birthday:"1998-08-19", age:"18", blood:"O형" }
            , { recid:23, company:"SM", group:"레드밸벳", name:"아이린", autonym:"배주현", position:"리더", birthday:"1991-03-29", age:"25", blood:"A형" }
            , { recid:23, company:"SM", group:"레드밸벳", name:"슬기", autonym:"강슬기", position:"-", birthday:"1994-02-10", age:"22", blood:"A형", anote:"★" }
            , { recid:23, company:"SM", group:"레드밸벳", name:"웬디", autonym:"손승완", position:"-", birthday:"1994-02-21", age:"22", blood:"O형" }
            , { recid:23, company:"SM", group:"레드밸벳", name:"조이", autonym:"박수영", position:"-", birthday:"1996-09-03", age:"20", blood:"A형" }
            , { recid:23, company:"SM", group:"레드밸벳", name:"예림", autonym:"김예림", position:"-", birthday:"1999-03-05", age:"19", blood:"O형" }
            , { recid:23, company:"RBW", group:"마마무", name:"솔라", autonym:"김용선", position:"리더, 보컬", birthday:"1991-02-21", age:"25", blood:"B형" }
            , { recid:23, company:"RBW", group:"마마무", name:"문별", autonym:"문별이", position:"메인래퍼, 메인댄서", birthday:"1992-12-22", age:"24", blood:"B형" }
            , { recid:23, company:"RBW", group:"마마무", name:"휘인", autonym:"정휘인", position:"메인보컬, 댄서", birthday:"1995-04-17", age:"21", blood:"B형", anote:"★" }
            , { recid:23, company:"RBW", group:"마마무", name:"화사", autonym:"안혜진", position:"보컬, 랩", birthday:"1995-07-23", age:"21", blood:"A형" }
        ]
    });
});
</script>
</body>
</html>




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






■ w2ui 그리드 라인넘버 나타내기


01. 그리드 좌측 라인에 라인 넘버를 나타내 보자.

    방법은 아래와 같이 show영역에 lineNumbers를 추가하고 true로 선언하면 된다.

 w2ui_line_numbers.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 : {
            lineNumbers:true
        }
        , 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 그리드 헤더 추가하기



w2ui_grid_header.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"
        , header : "TWICE - 귀로 한번, 눈으로 한번 매력을 느낀다."
        , show : {
            header:true
        }
        , 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. 출력결과는 아래와 같다. 상단영역에 헤더가 추간된 것을 확인 할 수 있다.




반응형
저작자표시

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

[w2ui] 그리드(Grid)에 검색기능 추가하기  (0) 2016.09.21
[w2ui] 그리드(Grid) 오름차순, 내림차순 정렬 기능 추가하기.  (0) 2016.09.19
[w2ui] 팝업창에 기능에 따른 버튼 추가하기  (0) 2016.09.13
[w2ui] w2ui로 팝업창 오픈하기  (0) 2016.09.12
[w2ui] TEXTBOX에 리스트 나타내기  (0) 2016.09.12

'jQuery/w2ui' Related Articles

티스토리툴바