본문 바로가기
jQuery/w2ui

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

사악미소 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. 출력결과는 아래와 같다.

    선택한 행을 클릭하여 드래그 함으로써 특정 위치로 이동 시킬 수 있다.




반응형
저작자표시

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

[w2ui] 그리드(Grid)에 로딩창 나타내기.  (0) 2016.09.26
[w2ui] 그리드(Grid) 내용 수정하기.  (0) 2016.09.23
[w2ui] 그리드 검색창(Grid) 검색창에 버튼 기능 추가하기.  (0) 2016.09.23
[w2ui] 상세 데이터를 표시하는 그리드(Grid) 그리기.  (0) 2016.09.22
[w2ui] 그리드(Grid) 열(Row) 클릭이벤트로 팝업창 오픈하기.  (0) 2016.09.22

'jQuery/w2ui' Related Articles

티스토리툴바