[w2ui] 그리드(Grid)의 Row(행), Column(열) 변경하기.

jQuery/w2ui 2016. 9. 26. 14:59

■ 그리드 Column(열) 위치 변경하기.




01. 해당 그리드의 컬럼의 위치를 변경하려면 reorderColumns 속성을 지정하고 true를 선언해 주기만 하면 된다.

 w2ui_reorder_columns.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
            , lineNumbers:true
            , selectColumn:true
        }
        , reorderColumns: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. 출력결과는 아래와 같다.

   맨앞측의 라인넘버와(lineNumbers), 체크박스열(selectColumn)은 이동이 불가능 하지만.

   다른 행은 자유롭게 이동하는것을 알 수 있다.







■ 그리드 Row(행) 위치 변경하기.



01. 해당 그리드의 로우의 위치를 변경하려면 reorderRows 속성을 지정하고 true를 선언해 주기만 하면 된다.

 w2ui_reorder_records.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
            , lineNumbers:true
            , selectColumn:true
        }
        , reorderRows: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] 그리드(Grid)에 로딩창 나타내기.

jQuery/w2ui 2016. 9. 26. 14:24

■ 해당 코드는


w2ui 그리드는 아래와 같이 로딩중 알림을 띄어서 불러오는 페이지를 표실할 수있다.




출 력 함 수

설      명

 .lock

 · 로딩중임을 표시하는 창이 나타난다.

 · 메세지 내용이 없으면 단순히 동그란 톱니바퀴만 돌아간다.

 .unlock

 · 화면에 나타나는 로딩중 표시를 해제한다.

 .error

 · 에러메시지 띄우는 팝업창



01. 해당 함수들을 적용한 코드는 아래와 같다.

w2ui_grid_lock.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>
<br/>
<button class="btn" onClick="w2ui.grid.lock('메세지', true);">Lock</button>
<button class="btn" onClick="w2ui.grid.unlock();">Unlock</button>
<button class="btn" onClick="w2ui.grid.lock('', true);">Just a Spinner</button>
<button class="btn" onClick="w2ui.grid.error('에러 메세지&nbsp;'+ (new Date()).getTime());">Error</button>
<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] 그리드(Grid) 내용 수정하기.

jQuery/w2ui 2016. 9. 23. 15:09

w2ui 그리드(Grid) 내용 수정하기.



 w2ui의 그리드에서 editable:속성 을 지정하는것으로 그리드의 내용을 수정할 수 있다.

editable 속성

 설 명

 checkbox

 체크박스를 생성하고 화면에 나타낸다.

 true몇 체크, false면 해제이다.

 text

 선택한 공간의 내용을 수정한다.

 int

 선택한 공간의 내용을 수정한다.

 숫자만 수정이 가능하다.

 money

 해당공간에 돈의 단위를 수정 할 수 있게 한다.

 기본 단위는 $달러 이다.

 percent

 해당공간의 백분율을 수정할 수 있게 한다.

 color

 RGB 컬러를 선택할 수 있다.

 date

 해당 컬럼의 날짜를 수정할 때 사용한다.

 time

 해당 컬럼의 시간을 수정할 때 사용한다.

 list

 해당 컬럼을 수정할 경우 예로 보여줄 리스트 항목을 보여준다.

 리스트 항목에 없는 내용또한 작성할 수 있다.

 select

 해당 내용의



01. 위 속성들을 적용한 예제는 아래와 같다.

 w2ui_inline_editing.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:450px;"></div>
<script type="text/javascript">
var group = [
      { id:1, text:"트와이스" }
    , { id:2, text:"러블리즈" }
    , { id:3, text:"여자친구" }
    , { id:4, text:"마마무" }
    , { id:5, text:"걸스데이" }
    , { id:6, text:"AOA" }
    , { id:7, text:"달샤벳" }
    , { id:8, text:"에이핑크" }
    , { id:9, text:"미스에이" }
];

jQuery(document).ready(function() {
    jQuery("#grid").w2grid({
          name : "grid"
        , multiSearch:true
        , columns : [
              { field:"check", caption:"check", size:"60px", editable:{ type:"checkbox" } }
            , { field:"text", caption:"문자", size:"120px", editable:{ type:"text" } }
            , { field:"int", caption:"숫자", size:"80px", render:"int", editable:{ type:"int", min:0, max:32756 } }
            , { field:"money", caption:"돈", size:"80px", render:"money", editable:{ type:"money" } }
            , { field:"percent", caption:"확률", size:"80px", render:"percent:1", editable:{ type:"percent", precision:1 } }
            , { field:"color", caption:"색상", size:"80px", editable:{ type:"color" } }
            , { field:"date", caption:"날짜", size:"90px", render:"date", style:"text-align:right", editable:{ type:"date" } }
            , { field:"time", caption:"시간", size:"70px", editable:{ type:"time"} }
            , { field:"list", caption:"리스트", size:"50%", editable:{ type:"list", items:group, showAll:true }
                , render:function(record, index, col_index) {
                    var html = this.getCellValue(index, col_index);
                    return html.text || "";
                }
            }
            , { field:"select", caption:"select", size:"100px", editable:{ type:"select", items:people }
                , render:function(record, index, col_index) {
                    var html = "";
                    for(var g in :group) {
                        if(group[g].id == this.getCellValue(index, col_index)) {
                            html = group[g].text;
                        }
                    }
                    return html;
                }
            }
        ]
        , records: [
              { recid:1, check:true, text:"사나팬", int:100, money:100, percent:55, date:"1996-12-29", time:"12:29 pm"
                , list:{ id:1, text:"트와이스" }
            }
            , { recid:2, check:true, text:"혜리팬", int:180, money:170, percent:65, date:"1994-06-09", time:"06:09 am" }
            , { recid:3, check:false, text:"나연팬", int:200, money:454.40, percent:15, date:"1995-09-22", time:"09:22 pm"
                , list:{ id:1, text:"트와이스" }
            }
            , { recid:4, check:true, text:"모모팬", int:300, money:1040, percent:98, date:"1996-11-09", time:"11:09 am" }
            , { recid:5, check:true, text:"Kei팬", int:350, money:140, percent:58, date:"1995-03-20", time:"03:20 pm"
                , list:{ id:3, text:"러블리즈" }
            }
            , { recid:6, check:true, text:"초롱팬", int:930, money:930, percent:42, date:"1991-03-03", time:"03:03 pm" }
            , { recid:7, check:true, text:"보미팬", int:280, money:450, percent:82, date:"1993-08-03", time:"08:03 am"
                , list:{ id:8, text:"에이핑크" }
            }
            , { recid:8, check:true, text:"예린팬", int:120, money:270, percent:61, date:"1996-08-19", time:"08:19 pm" }
            , { recid:9, check:true, text:"수지팬", int:900, money:980, percent:98, date:"1994-10-10", time:"10:10 pm" }
            , { recid:10, check:false, text:"우희팬", int:600, money:3400, percent:100, date:"1991-11-21", time:"11:21 am"
                , list:{ id:6, text:"AOA" }
            }
            , { recid:11, check:false, text:"민아팬", int:500, money:790, percent:39, date:"1993-05-13", time:"05:13 pm"
                , list:{ id:5, text:"걸스데이" }
            }
            , { recid:12, check:false, text:"휘인팬", int:550, money:4040, percent:12, date:"1995-04-22", time:"04:22 pm"
                , list:{ id:4, text:"마마무" }
            }
            , { recid:13, check:true, text:"모모팬", int:300, money:1040, percent:98, date:"1996-11-09", time:"11:09 am" }
            , { recid:14, check:false, text:"민아팬", int:600, money:3400, percent:100, date:"1993-09-21", time:"09:21 am"
                , list:{ id:6, text:"AOA" }
            }
            , { recid:15, check:false, text:"세리팬", int:400, money:500, percent:78, date:"1990-09-16", time:"09:16 am"
                , list:{ id:7, text:"달샤벳" }
            }
        ]
    });
});
</script>
</body>
</html>





02. editable에 속성이 적용된 열들은 각자의 기능이 수행되는것을 확인 할 수 있다.




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

jQuery/w2ui 2016. 9. 23. 14:34

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



01. 그리드 상단 검색창에 버튼을 추가로 올려보자. 코드는 아래와 같다.

 w2ui_grid_toolbar.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
            , toolbarAdd:true           // 등록 버튼
            , toolbarDelete:true        // 삭제 버튼
            , toolbarEdit:true           // 수정 버튼
            , toolbarSave:true          // 저장 버튼
            , toolbarReload:true
        }
        , columns : [               
              { field:"name", caption:"이름", size:"30%" }
            , { field:"autonym", caption:"본명", size:"30%" }
            , { field:"position", caption:"포지션", size:"40%" }
            , { field:"birthday", caption:"생일", size:"120px" }
        ]
        , onAdd:function(event) {
            w2alert("그리드에 행을 추가합니다.", "추가");
        }
        , onEdit:function(event) {
            w2alert("그리드에 행을 수정합니다.", "수정");
        }
        , onDelete:function(event) {
            console.log("Delete has default behaviour");
        }
        , onSubmit:function(event) {
            w2alert("그리드의 변경사항을 저장합니다.", "저장");
        }
        , records : [
              { recid:1, name:"나연", autonym:"임나연", position:"리드댄서, 리드보컬", birthday:"1995-09-22" }
            , { recid:2, name:"정연", autonym:"유정연", position:"리드보컬", birthday:"1996-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) 검색창에 사용자 지정 버튼 기능 추가.



01. 아래소스는 위의 코드에서 버튼 기능을 커스텀 버튼으로 위와 똑같이 구현한 내용이다.

 w2ui_grid_custom_toolbar.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
        }
        , toolbar : {
            items : [
                  { type:"break" }
                , { type:"button", id:"add", caption:"Add New", icon:"w2ui-icon-plus" }
                , { type:"button", id:"edit", caption:"Edit", icon:"w2ui-icon-pencil", disabled:true }
                , { type:"button", id:"del", caption:"Delete", icon:"w2ui-icon-cross", disabled:true }
                , { type:"break" }
                , { type:"button", id:"save", caption:"save", icon:"w2ui-icon-check" }
            ]
            , onClick:function(event) {
                switch(event.target) {
                    case "add" :
                        w2alert("그리드에 행을 추가합니다.", "추가");
                        break;
                    case "edit" :
                        w2alert("그리드에 행을 수정합니다.", "수정");
                        break;
                    case "del" :
                        console.log("Delete has default behaviour");
                        break;
                    case "save":
                        w2alert("그리드의 변경사항을 저장합니다.", "저장");
                        break;
                }
            }
        }
        , columns : [               
              { field:"name", caption:"이름", size:"30%" }
            , { field:"autonym", caption:"본명", size:"30%" }
            , { field:"position", caption:"포지션", size:"40%" }
            , { field:"birthday", caption:"생일", size:"120px" }
        ]
        , onAdd:function(event) {
            w2alert("그리드에 행을 추가합니다.", "추가");
        }
        , onEdit:function(event) {
            w2alert("그리드에 행을 수정합니다.", "수정");
        }
        , onDelete:function(event) {
            console.log("Delete has default behaviour");
        }
        , onSubmit:function(event) {
            w2alert("그리드의 변경사항을 저장합니다.", "저장");
        }
        , records : [
              { recid:1, name:"나연", autonym:"임나연", position:"리드댄서, 리드보컬", birthday:"1995-09-22" }
            , { recid:2, name:"정연", autonym:"유정연", position:"리드보컬", birthday:"1996-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" }
        ]
        , onClick:function(event) {
            w2ui["grid"].toolbar.enable("edit", "del");
        }
    });   
});
</script>
</body>
</html>



02. 출력결과는 아래와 같다. 모든기능이 위와 동일하다.






[w2ui] 상세 데이터를 표시하는 그리드(Grid) 그리기.

jQuery/w2ui 2016. 9. 22. 17:56

■ w2ui에서 상세 데이터를 표시하는 그리드 그리기.



01. w2ui의 그리드는 행과 열의 위치를 변경하여 상세 데이터를 나타내는 형태의 그리드를 그릴 수 있다.

 w2ui_master_details.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_all" style="width:100%;height:470px;"></div>
<br/>
<div id="grid_details" style="width:100%;height:150px;"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#grid_all").w2grid({
          name : "grid_all"
        , header : "TWICE & LOVELYZ"
        , show: { header:true, columnHeaders: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:"1992-07-06" }
            , { recid:2, name:"유지애", autonym:"유지애", position:"서브보컬", birthday:"1993-05-21"  }
            , { recid:3, name:"서지수", autonym:"서지수", position:"서브보컬, 메인댄서", birthday:"1994-02-11" }
            , { recid:4, name:"이미주", autonym:"이미주", position:"서브보컬, 메인댄서", birthday:"1994-09-23" }
            , { recid:5, name:"Kei", autonym:"김지연", position:"메인보컬, 리드댄서, 애교", birthday:"1995-03-20" }
            , { recid:6, name:"나연", autonym:"임나연", position:"리드샌서, 리드보컬", birthday:"1995-09-22" }
            , { recid:7, name:"Jin", autonym:"박명은", position:"메인보컬", birthday:"1996-06-12" }
            , { recid:8, name:"정연", autonym:"유정연", position:"리드보컬", birthday:"1996-11-01" }
            , { recid:9, name:"모모", autonym:"히라이 모모", position:"서브보컬, 메인댄서", birthday:"1996-11-09" }
            , { recid:10, name:"사나", autonym:"미나토자키 사나", position:"서브보컬", birthday:"1996-12-29" }
            , { recid:11, name:"지효", autonym:"박지효", position:"리더, 메인보컬", birthday:"1997-02-01" }
            , { recid:12, name:"미나", autonym:"묘이 미나", position:"서브보컬, 메인댄서", birthday:"1997-03-24" }
            , { recid:13, name:"류수정", autonym:"류수정", position:"리드보컬", birthday:"1997-11-19" }
            , { recid:14, name:"다현", autonym:"김다현", position:"리드래퍼, 서브보컬", birthday:"1998-05-28" }
            , { recid:15, name:"정예인", autonym:"정예인", position:"서브보컬, 리드댄서",  birthday:"1998-06-04" }
            , { recid:16, name:"채영", autonym:"손채영", position:"메인래퍼, 서브보컬",  birthday:"1999-04-23" }
            , { recid:17, name:"쯔위", autonym:"저우 쯔위", position:"서브보컬, 리드댄서", birthday:"1999-06-14" }
        ]
        , onDblClick : function(event) {
            w2ui["grid_details"].clear();
            var record = this.get(event.recid);
            w2ui["grid_details"].add([
                  { recid:0, name:"ID : ", value:record.recid }
                , { recid:1, name:"Name : ", value:record.name }
                , { recid:2, name:"Autonym : ", value:record.autonym }
                , { recid:3, name:"Position : ", value:record.position }
                , { recid:4, name:"Birthday : ", value:record.birthday }
            ]);
        }
    });

    jQuery("#grid_details").w2grid({
          name : "grid_details"
        , header : "Details"
        , show : { header:true, columnHeaders:false }
        , columns : [               
              { field:"name", caption:"name", size:"100px", style:"background-color:#EFEFEF;border-bottom:1px solid white;padding-right:5px;", attr:"align=right" }
            , { field:"value", caption:"value", size:"100%" }
        ]
    });
});
</script>
</body>
</html>



02. 출력결과는 아래와 같이 위 상단의 그리드에서 해당 이름을 더블 클릭하면

    아래 상세 그리드에. 클릭한 데이터가 나타나 지는 구조이다.