MiPlatform - Chapter6. Component별 주요기능(2-1)

>> Dataset Component

1) Sort

    (1) Sort() - Asc
   
    function button1_1_OnClick(obj)
    {
        ds.Sort("col1,col2", true);
    }
   
    (2) Sort() - Desc
    function button1_2_OnClick(obj)
    {
        ds.Sort("col1:D,col2:D");
    }

    (3) 응용샘플 : 헤더클릭 시 Sort (Sample->sample_grid_sort)

    //  Subcell을 이용하는 Grid Sorting 함수
    function Grid_Sort(Grid_obj,Dataset_obj,cell,subcell)
    {
        var val;   
        var col_id;
       
        val = Grid_obj.GetSubCellProp("head", cell, subcell, "text");
        col_id = Grid_obj.GetCellProp("body", cell, "colid");
        if( val == "▼" )
        {
            Dataset_obj.Sort(col_id,false);
            Grid_obj.SetSubCellProp("head", cell, subcell, "text", "▲");
        }
        else if( val == "▲" )
        {
            Dataset_obj.Sort(col_id,true);
            Grid_obj.SetSubCellProp("head", cell, subcell, "text", "▼");
        }
    }   
    // Grid2 Head Click
    function Grid_OnHeadClick(obj,nCell,nX,nY)
    {
        Grid_Sort(Grid,ds_sort,nCell,1);
    }

2) Filter : 조건에 맞는 것만 보이기
   
    (1) Filter()
    function button2_1_OnClick(obj)
    {
        ds.Filter("col1 > '1'");   
    }
   
    (2) UnFilter()
    function button2_2_OnClick(obj)
    {
        ds.UnFilter();
    }
   
    (3) 주의 ! 필터를 걸어놓은 상태에서 레코드번호체계는 눈에 보이는 상태대로..
    function button2_getcolumn_OnClick(obj)
    {
        alert(ds.GetColumn(0, "col1"));
    }
    => 필터를 걸었을 때와 안걸었을때 값이 다르게나옴.

    (4) GetColumnNF(0,col1) : 필터에 걸려 눈에 안보이는 데이터가져오려고 할때
    function button2_getcolumnNF_OnClick(obj)
    {
        alert(ds.GetColumnNF(0, "col1"));
    }
   
    (5) 응용샘플(고난이도) : 헤더클릭 시 Sort (Sample->sample_grid_drilldown)
        >>source
    (6) 응용샘플(실전용) : Tip->tip_master_detail
        >>source
       
        Master Dataset - Detail Dataset 구조에서
        Detail Dataset 만들때 Relation Column만들어야지.
   
        서버에서 데이터 가져올 때 해당 Detail데이터만 가져오는게 아니라 전체 Detail데이터를 다 가져오는거야.
        데이터가 너무 크다면 적당히 잘라야지. 보통은 한꺼번에 가져와도 무리없어.

3) Sum/Avg/Min/Max
    (1) Sum()
    function button3_1_OnClick(obj)
    {
        alert(ds.Sum("iif(col1 > '1', col1)"));
    }

    ★★메뉴얼에 나온 함수를 사용하는게 생짜로 짜는것(for문 돌려서 합하기같은)보다 빨라.
   
    (2) CaseSum()
    function button3_2_OnClick(obj)
    {
        alert(ds.CaseSum("col1 > '1'", "col1"));
    }
   
    조건이 들어가야한다면 (2)보다 (1)이 빨라

4) Record제어
    (1) Row
    function button4_1_OnClick(obj)
    {
        alert(ds.Row);
    }
   
    (2) GetRowCount()
    function button4_2_OnClick(obj)
    {
        alert(ds.GetRowCount());
    }
   
    (3) GetColumn()
    function button4_3_OnClick(obj)
    {
        alert(ds.GetColumn(ds.Row, "col1"));
    }
   
    (4) SetColumn()
    function button4_4_OnClick(obj)
    {
        ds.SetColumn(ds.Row, "col1", "A");
    }
   
    (5) SearchRow()
    function button4_5_OnClick(obj)
    {
        alert(ds.SearchRow("col1 > 1"));
    }
   
    (6) FindRow()
    function button4_6_OnClick(obj)
    {
        alert(ds.FindRow("col1","4"));
    }

5) Dataset 전체제어
    (1) AppendDataset()
    function button5_1_OnClick(obj)
    {
        ds.AppendDataset("ds1");
    }
   
    (2) ClearData()
    function button5_2_OnClick(obj)
    {
        ds.ClearData();
    }
   
    (3) DeleteAll()
    function button5_3_OnClick(obj)
    {
        ds.DeleteAll();
    }
   
    (4) Copy()
    function button5_4_OnClick(obj)
    {
        ds.Copy("ds1");
    }
   
    (5) Merge()
    function button5_5_OnClick(obj)
    {
        ds.Merge("ds1");
    }

6) Transaction처리 관련
    ★ 입력
    function button6_addrow_OnClick(obj)
    {
        ds.AddRow();
    }
   
    ★ 삭제
    function button6_deleterow_OnClick(obj)
    {
        ds.DeleteRow(ds.Row);
    }
   
    (1) ApplyChange()
    function button6_1_OnClick(obj)
    {
        ds.AddRow();
        alert("stat를 변경합니다.");
        ds.ApplyChange();
    }
   
    (2) GetDelRowCount()
    function button6_2_OnClick(obj)
    {
        alert(ds.GetDelRowCount());
    }
   
    (3) GetRowType()
    function button6_3_OnClick(obj)
    {
        alert(ds.GetRowType(ds.Row));
    }
   
    (4) GetOrgColumn()
    function button6_4_OnClick(obj)
    {
        alert("Grid의 값을 변경후 눌러보시면 변경되기전 값을 보실 수 있습니다.");
        alert(ds.GetOrgColumn(ds.Row, "col1"));
    }
   
    (5) Reset()
    function button6_5_OnClick(obj)
    {
        var row=ds.AddRow();
        ds.SetColumn(row, "col1", "123");
        alert("원래의 Data로 돌아갑니다.");
        ds.Reset();
    }

7) Event 처리
    (1) CanColumnChange/OnColumnChanged
    function button7_1_OnClick(obj)
    {
        ds_event.SetColumn(ds_event.Row, "col1", "A");
    }
   
    function ds_event_CanColumnChange(obj,nRow,strColumnID,varOldValue,varNewValue)
    {
        alert("CanColumnChanged Event발생 \n" +
              "[strColumnID = " + strColumnID + "]\n" +
              "[varOldValue = " + varOldValue + "]\n" +
              "[varNewValue = " + varNewValue + "]");
        return true;
    }
   
    function ds_event_OnColumnChanged(obj,nRow,strColumnID,varOldValue,varNewValue)
    {
        alert("OnColumnChanged Event발생 \n"  +
              "[strColumnID = " + strColumnID + "]\n" +
              "[varOldValue = " + varOldValue + "]\n" +
              "[varNewValue = " + varNewValue + "]");   
    }
   
    (2) CanRowPosChange/OnRowPosChanged
    function button7_2_OnClick(obj)
    {
        ds_event.Row = ds_event.Row+1;
    }
   
    function ds_event_CanRowPosChange(obj,nOldRow,nRow)
    {
        alert("CanRowPosChange Event발생 \n"  +
              "[nOldRow = " + nOldRow + "]\n" +
              "[nRow = " + nRow + "]");   
        return true;
    }
   
    function ds_event_OnRowPosChanged(obj,nOldRow,nRow)
    {
        alert("OnRowPosChanged Event발생 \n"  +
              "[nOldRow = " + nOldRow + "]\n" +
              "[nRow = " + nRow + "]");   
    }
   
    (3) OnLoadCompleted/OnError
    function button7_3_OnClick(obj)
    {
        ds_event.Load("SvcJsp::tip_adapter.jsp");
    }
   
    // ※ 주의사항 : ErrorCode가 음수일때만 발생
    function ds_event_OnError(obj,nErrorCode,strErrorMsg)
    {
        alert("OnError Event발생(ErrorCode가 음수일때만 발생) \n"  +
              "[nErrorCode = " + nErrorCode + "]\n" +
              "[strErrorMsg = " + strErrorMsg + "]");   
    }
   
    function ds_event_OnLoadCompleted(obj,nErrorCode,strErrorMsg,nReason)
    {
        if( nReason == 0 )
            alert("OnLoadCompleted Event발생 \n"  +
              "[strErrorMsg = " + strErrorMsg + "]\n" +
              "[nReason = " + nReason + "]");   
    }
   
    (4) OnRowDeleting/OnRowDeleted
    function button7_4_OnClick(obj)
    {
        ds_event.DeleteRow(ds_event.Row);
    }
   
    function ds_event_OnRowDeleting(obj,nRow,nCount)
    {
        alert("OnRowDeleting Event발생 \n"  +
              "[nRow = " + nRow + "]\n" +
              "[nCount = " + nCount + "]");
    }
   
    function ds_event_OnRowDeleted(obj,nRow,nCount)
    {
        alert("OnRowDeleted Event발생 \n"  +
              "[nRow = " + nRow + "]\n" +
              "[nCount = " + nCount + "]");
    }
   
    (5) OnRowInserted
    function button7_5_OnClick(obj)
    {
        ds_event.AddRow();
    }
   
    function ds_event_OnRowInserted(obj,nRow,nCount)
    {
        alert("OnRowInserted Event발생 \n"  +
              "[nRow = " + nRow + "]\n" +
              "[nCount = " + nCount + "]");
    }
   
    (6) FireEvent : 강제로 이벤트를 발생하지 않게할때.  건수가 많을 경우 속도를 좀더 빠르게 할 수 있다.
    function button7_6_OnClick(obj)
    {
        ds_event.FireEvent = false;   
        alert("FireEvent를 false로 하면 Event가 발생되지 않습니다.");
        ds_event.AddRow();
        ds_event.FireEvent = true;   
    }

   
   

>> Grid Component

1-1) Binding   

1-2) AutoFit
    [AutoFit : True]

1-3) Fix/Resizing/Moving Column
    Fix
        Grid Contents Editor : Column : [Fix : Left]
    Resizing
        Grid : [ColSizing : True]
    Moving
        Grid : [CellMoving : True]
       

1-4) Multi Header, Multi Row
    Grid Contents Editor : 마우스오른쪽버튼->Add Head Row
    다중선택 후 Merge Cells 등 가능.    
   

1-5) Multi Select
    (1) Multi Select
        Grid : [MultiSelect : True]

    (2) Area Select
        Grid : [AreaSelect : True]

    (3) select 된 레코드 가져오기, 설정하기
        function Button5_1_getselect_OnClick(obj)
        {
            var        i;
            var     select_Cnt=0;
            var     msg="선택된 Record는\n";
           
            for( i = 0 ; i < ds_multi.RowCount() ; i++ )
            {
                if( ds_multi.GetSelect(i) == true )
                {
                    msg += "Row : "+i+"\n";
                    select_Cnt++;
                }
            }
            msg += "선택된 Row갯수 : " + select_Cnt;
            alert(msg);
        }
       
        // 5)-(1) --> Select 설정
        function button5_1_setselect_OnClick(obj)
        {
            ds_multi.SelectRow(0, true);
            ds_multi.SelectRow(1, true);
            ds_multi.SelectRow(2, true);
        }
       
        // 5)-(2) --> Select 가져오기
        function button5_2_getselect_OnClick(obj)
        {
            var msg;
           
            msg =  "Start = " + "Column : " + Grid5_2.AreaStartCol +
                                ", Row : " + Grid5_2.AreaStartRow;
            msg += "\n";
            msg += "End   = " + "Column : " + Grid5_2.AreaEndCol +
                                ", Row : " + Grid5_2.AreaEndRow;
            alert(msg);
        }

2-1) Display Property
    (1) image
        Grid Contents Editor : Body
            [ColId : image] [Display(e) : image]
        dataset보면 grid1_res가 들어가 있지. (Global Tab의 Images에 있는 이미지)
       
        Grid에는 image를 Url로 줄 수 없어. 리소스에 들어있는것만 가능해. 속도문제 때문이지.
   
    (2) bar
        Grid Contents Editor : Body
            [ColId : bar] [Display(e) : bar]
        dataset에는 숫자가 들어있어. 해당하는 막대그래프를 그려줘.

        실전에서는 첨부파일 업로드등의 progress bar대용 혹은 부서별 실적표시 등에 사용

2-2) Edit Property
    (1) IME 사용(초기값이 한글)
        Body : [UseIME : True] [imemode : native]
    (2) expand
        Edit에 없는 component 주는법 (ex. calendar)
            [Edit(e) : expand] - 조그만 expand버튼 생겨
           
            Calendar Component올려놓고 [Visible : False] 해놓고
            그 다음 OnExpandEdit Event에코딩해줘
           
            function Grid2_OnExpandEdit(obj,nRow,nCell,curval) // Expand선택시
            {
                if( nCell == 8 )    // 8번째 Cell이면
                {
                  var arr=array();
                  arr = Grid2.GetCellRect(nRow, nCell); // Grid Cell의 좌표 얻어오기
                  Calendar2.Top = Grid2.Top + arr[3];     // Calendar의 위치 선정
                  Calendar2.Left = Grid2.Left + arr[0]; // Calendar의 위치 선정
                  Calendar2.Visible = true;        // Calendar 나타나게 하기
                }
            }
    (3) 실전에서 많이 사용하는 expand 예제 (Tip->tip_modal)
       
2-3) SubCell (col 구분선 없애기)
    Merge Cells -> '예'
    Merge를 시켜놨을때 속안의 내용을 바꾸고 싶으면 'Edit Sub Cells' 띄워서 바꿔.
    ex) merge된 col2의 '남자'를 'a'로 바꾸고싶으면
        Gird Contents Editor : [SubCell : '...'버튼] -> Edit Sub Cells : [ColId : col3]로
           
    응용예 : sort의 '▲'컬럼 or sample_grid_calendar 의 '15 광복절'사이 등 주로 이쁘게 만들기 할때.

2-4) Multi Format (권한에 따른 경우등)
    (1) Predefine Format : 포멧을 미리 설정해놓은경우. 권한에 따라 grid 포멧이 왕창 차이날때 써.
        Grid Contents Editor에 마우스오른쪽-> Add New 로 포멧미리 만들어놓을 수 있어.
        사용은 Grid의 Format property 사용.

            function Button4_1_default_OnClick(obj)
            {
                Grid4_1.Format = "Default";
            }
           
            function Button4_1_format0_OnClick(obj)
            {
                Grid4_1.Format = "Format0";
            }
       

    (2) Cell 속성변경(Method 이용) : 실전에서 제일 많이 사용. (column 한두개 추가삭제 or 색깔변경 등)
        SetCellProp : cell의 property를 코딩으로 변경하고 싶을 때.
            //Multi Format --> Cell속성 변경 --> BkColor Button CLick처리
            function Button4_2_BkColor_OnClick(obj)
            {
                Grid4_2.SetCellProp("Body",0,"BkColor","lightblue");
            }
        SetColProp : Column의 property를 코딩으로 변경하고 싶을 때.
            //Multi Format --> Column속성 변경 --> Hidden Button CLick처리
            function Button4_2_Hidden_OnClick(obj)
            {
                Grid4_2.SetColProp(1, "Width",0);
            }
       
    (3) Create Format(Dataset 이용) : Dataset의 column모양에 따라 그때그때 grid포멧이 달라져야할때.
        //Multi Format --> Create Format --> ds_format Button CLick처리
        function Button4_3_ds_format_OnClick(obj)
        {
            Grid4_3.BindDataset = "ds_format";
            Grid4_3.CreateFormat();
        }
       
        // Multi Format --> Create Format --> ds_format1 Button CLick처리
        function Button4_3_ds_format1_OnClick(obj)
        {
            Grid4_3.BindDataset = "ds_format1";
            Grid4_3.CreateFormat();
        }

        응용 예 : sample_grid_freeformat
       

    (4) Contents변경 : Grid의 Contents property에 다 직접 만들어서 넣어.
   
        function Button4_4_Contents1_OnClick(obj)
        {
            var contents;
            contents =
                "<contents>\n" +
                "  <format id='Default'>\n" +
                "    <columns>\n" +
                "        <col width='80'/>\n" +
                "        <col width='80'/>\n" +
                "        <col width='80'/>\n" +
                "    </columns>\n" +
                "    <head>\n" +
                "        <cell col='0' display='text' text='col1'/>\n" +
                "        <cell col='1' display='text' text='col2'/>\n" +
                "        <cell col='2' display='text' text='col3'/>\n" +
                "    </head>\n" +
                "    <body>\n" +
                "        <cell col='0' colid='col1' display='text'/>\n" +
                "        <cell col='1' colid='col2' display='text'/>\n" +
                "        <cell col='2' colid='col3' display='text'/>\n" +
                "    </body>\n" +
                "  </format id='Default'>\n" +
                "</contents>\n";
            Grid4.Contents = Contents;
        }
       
        function Button4_4_Contents2_OnClick(obj)
        {
            var contents;
            contents =
                "<contents>\n" +
                "  <format id='Default'>\n" +
                "    <columns>\n" +
                "        <col width='80'/>\n" +
                "        <col width='80'/>\n" +
                "    </columns>\n" +
                "    <head>\n" +
                "        <cell col='0' display='text' text='col1'/>\n" +
                "        <cell col='1' display='text' text='col2'/>\n" +
                "    </head>\n" +
                "    <body>\n" +
                "        <cell col='0' colid='col1' display='text'/>\n" +
                "        <cell col='1' colid='col2' display='text'/>\n" +
                "    </body>\n" +
                "  </format id='Default'>\n" +
                "</contents>\n";
            Grid4.Contents = Contents;
        }
    응용 예 : sample_grid_freeformat 사용자가 column을 직접 선택하게할 경우.
        각각 사용자가 지정해놓은 설정을 xml로 저장해놓고, 다음에 그 파일을 로딩해서 사용하게.
       

3-1) Suppress : 반복되는 똑같은 값을 하나만 나오게 하기
    라면류 : [Suppress : 1] 숫자는 suppress 레벨
    심양 : [Suppress : 2]

    라면류를 가운데 오게 : [SuppressAlign(e) : Middle]
        스크롤 내리면 화면에 보이게 저절로 밑으로도 내려가.

    조건에 따라 가운데, 위에 오게.
        [SuppressAlign(e) 의 expr사용]
   

3-2) Total Sum (총계) + Sub Sum(소계) : Dataset의 기능이야.
    ds_suppress : [GroupKey : col1,col2]
    더하는 값이 숫자타입이어야 해.

    이쁘게 다듬기 : grid에서
    rowlevel : 그룹으로 만들어진 레코드의 구분값.
        rowlevel 한번 찍어볼까.
        column insert 하고 HEAD [Text : rowlevel], Body [Expr : rowlevel]

    이 rowlevel가지고 이쁘게 꾸며봐.

4-1) CrossTab Grid (V3.2 추가기능) : 세로로 된 데이터를 가로로 눕히기
    Dataset먼저 만들어야해.
        [DataObject : ds_org] - 원래 데이터
        [DatasetType : Pivot] - 눕힐 거야
        [GroupKey : product] - 세로로 고정할 거
        [PivotKey : month] - 가로로 눕힐 column

        그다음 적당히 다듬어

    Dataset에서 오른쪽버튼 누르고 Edit Pivot Dataset..해도 돼.