소개

아래의 주요 속성을 사용하여 GridView의 여러 가지 유용한 기능을 편리하게 사용할 수 있습니다.

데이터 바인딩

GridView에 데이터를 표시하기 위해서는 DataList와의 바인딩이 필요합니다. DataList를 생성한 후, GridView와 바인딩하십시오. 좀 더 자세한 정보는 DataCollection과 Submission 부분을 참고하십시오.

구조

아래와 같이 GridView 최외곽을 선택하면 GridView 전체에 대한 속성을 지정할 수 있습니다.

Body

gridView.column에서 지정한 다양한 inputType을 통해 Body를 표현할 수 있습니다.

Header

Header 셀도 Body와 마찬가지로 inputType 지정을 통해 다양한 형식을 지정할 수 있습니다. 단, Body가 더 다양한 종류를 지원합니다.

Header 셀을 선택한 후 inputType을 지정하십시오. 헤더에서 사용할 수 있는 inputType 및 dataType의 종류는 다음과 같습니다. (기본 값은 text입니다.)

inputType 별 속성

Body 셀의 속성과 동일하나, Header 셀에 사용 가능한 속성은 제한적입니다. 아래 표를 참고하십시오.

Header 병합

동일한 열의 연속된 행을 <Ctrl>을 누른 채 선택하여 병합(rowSpan)할 수 있습니다. 같은 행의 연속된 열도 병합(colSpan)할 수 있습니다.

Header 텍스트 정렬

textAlign 속성으로 텍스트를 좌, 우, 중앙으로 정렬할 수 있습니다. 기본 값은 중앙(center)입니다.

Header 텍스트 설정

Header 셀에 출력할 텍스트는 아래 방법으로 설정가능합니다.

• 셀을 더블 클릭한 후, '값 수정' 대화 창에 텍스트를 입력합니다.

• 혹은, setHeaderValue( headerId , value ) API를 통해서 동적으로 변경할 수도 있습니다.

subTotal

subTotal 추가

GridView에 subTotal을 추가하여, 특정 컬럼에 속한 일부 데이터의 통계값을 계산할 수 있습니다.

1. GridView 우클릭 후, Add SubTotal 메뉴를 선택합니다.

2. Outline 뷰의 Design 탭에서 추가한 subTotal을 선택한 후, targetColumnID 속성 값으로 subTotal 통계값의 기준이 될 컬럼을 지정합니다.

3. subTotal을 표시할 컬럼의 inputType을 "expression"으로 지정합니다.

4. subTotal을 표시할 컬럼의 expression 속성 값을 정의합니다. subTotal 컬럼이 지원하는 통계 계산식을 사용하십시오.

5. 다음은 city 컬럼("col1")을 기준으로 sales 컬럼("col4")의 소계(sum("col4"))를 계산하여 subTotal에 표시한 모습입니다.

subTotal 컬럼의 expression 속성에 사용할 수 있는 계산식은 다음과 같습니다.

subtotal 표시/숨기기

setSubtotalVisible(true); 함수를 이용하여 subTotal을 표시할 수 있습니다.

setSubtotalVisible(false); 함수를 이용하여 subTotal을 숨길 수 있습니다.

subtotal 값을 기준으로 서로 다른 CSS 스타일 적용

subtotalStyleFormatter 속성으로 subtotal 데이터에 적용할 CSS 클래스를 판단하는 함수를 지정할 수 있습니다. 즉, 해당 함를 통해 subtotal 데이터에 따라 서로 다른 CSS를 적용할 수 있습니다.

subtotalStyleFormatter="scwin.styleFormatter"인 경우, 아래와 같이 scwin.styleFormatter() 함수를 정의하여, subtotal 데이터에 따라 서로 다른 CSS 클래스를 적용할 수 있습니다. 아래 예시의 경우, subtotal 데이터가 5000보다 크면 w2subtotalbig 클래스가 추가되고, subtotal 데이터가 500이하이면 w2subtotalsmall 클래스가 적용됩니다.

$r_title(subtotalStyleFormatter 속성값으로 지정한 함수 정의 예시)
scwin.styleFormatter = function(value, formattedValue) {
  if (value > 5000) {
    return "w2subtotalbig";
  } else {
    return "w2subtotalsmall"
  }
}

$r_title(스타일 정의 예시)
.w2subtotalbig {
  color: red;
}

.w2subtotalsmall {
  color: blue;
}

subtotal 컬럼을 기준으로 서로 다른 CSS 스타일 적용

subtotalStyleFormatter 속성 값으로 지정한 함수는 subtotal 컬럼의 ID(subtotalColumnId)를 세번째 인자로 받습니다. 이 세번째 인자를 사용하여 각 subtotal 컬럼마다 서로 다른 CSS 스타일을 적용할 수 있습니다.

$r_title(함수 구현 예)
scwin.styleFormatter = function(value, formattedValue, subtotalColumnId) {
  if (subtotalColumnId == "column16" || subtotalColumnId == "column18) {
    return "w2subtotalformatted";
  }
  else {
    return "w2subtotalnotformatted";
  }
};

footer

footer 추가

GridView에 footer를 추가하여, 특정 컬럼 데이터의 통계값을 계산할 수 있습니다.

1. GridView 우클릭 후, Insert Footer 메뉴를 선택합니다.

2. footer를 표시할 컬럼의 inputType을 "expression"으로 지정합니다.

3. footer를 표시할 컬럼의 expression 속성 값을 정의합니다. footer 컬럼이 지원하는 통계 계산식을 사용하십시오.

4. 다음은 sales 컬럼("col4")의 합계(sum("col4"))를 footer에 표시한 모습입니다.

footer 타이틀

푸터 요약(footerSummary) 생성

footerSummaryAuto 속성을 사용하면 아래와 같이 푸터 요약을 자동 생성할 수 있습니다.

부동 소수점 오류 자동 보정 (SUM 및 AVG 연산)

footer 컬럼의 inputType을 "expression"으로 지정한 후 expression=SUM("column") 혹은 expression=AVG("column") 설정을 추가하여 해당 컬럼의 합계 혹은 평균을 계산할 수 있습니다.

합계나 평균을 구하는 컬럼의 데이터가 소숫점 숫자일 경우, JavaScript의 부동 소수점 오류를 처리하기 위해 아래와 같은 설정이 필요합니다.

1. 바디의 컬럼 (gridView.column) – dataType="bigDecimal"

2. 푸터의 컬럼 (gridView.column) – dataType="bigDecimal"

3. config.xml 파일에 설정 추가 (하단 참조)

$r_title(config.xml (부동 소수점 오류 처리를 위한 설정))
<engine>
        <module src="/websquare/externalJS/big/big.min.js"/>
</engine>

단, 위의 처리는 모두 2020년 11월 전에 릴리즈된 엔진에 해당합니다. 2020년 11월 이후 출시된 에진의 경우 GridView의 SUM 및 AVG 연산에 대해 JavaScript의 부동 소수점 오류를 자동 처리합니다

inputType="expression" expression='SUM'("columnID")

inputType="expression" expression='AVG'("columnID")

조건부 합계 표시

footer 컬럼의 inputType을 "expression"으로 지정한 후 한 개 혹은 여러 조건을 설정하여 해당 조건을 만족하는 합계를 구할 수 있습니다.

$r_title("sumif" 사용 예 – 조건이 한 개인 경우)
// col3의 값이 Freezer인 경우, col4 컬럼의 합계.

expression="sumif('col4', 'Freezer', 'col3’)"

$r_title("sumif" 사용 예 – 조건이 여러 개인 경우)
// col3의 값은 TV이고 col1의 값은 Asia인 경우 col4 컬럼의 합계.

expression="sumifs('col4', 'TV', 'col3','Asia', 'col1')"

footer 값 확인

getFooterData() 함수를 사용하면, footer 컬럼의 ID 혹은 인덱스를 지정하여 해당 footer 값을 확인할 수 있습니다.

inputType

inputType 설정

각 컬럼의 inputType을 서로 다르게 지정할 수 있습니다.

inputType 별 속성

inputType에 따라 Body 칼럼에 지정할 수 있는 속성이 달라집니다. 좀 더 자세한 정보는 API 가이드에서 확인하십시오.

inpuType 동적 변경

inputType="custom"

inputType 동적 변경 (typeGetter)

$r_title(typeGetter="getType"인 경우 해당 함수 정의 예시)
getType = function(info) {
  var rowIndex = info.rowIndex;
  var colIndex = info.colIndex;
  var returnInfo;

  if (dataList1.getCellData(rowIndex, "Age") < 40 && dataList1.getCellData(rowIndex, "Age") > 29) {
    returnInfo = {
      id: "dynamic_select_" + rowIndex + "_" + colIndex,
      inputType: "button",
      options: {
        viewType: "icon"
      }
    };
  } else {
    returnInfo = {
      id: "dynamic_text_" + rowIndex + "_" + colIndex,
      inputType: "text",
      options: {}
    };
  }

  if (returnInfo) {
    console.log("[typeGetter] (" + rowIndex + ", " + colIndex + ") : " + returnInfo.inputType);
  }

  return returnInfo;
};

typeGetter로 지정할 함수의 인자와 반환값은 아래와 같습니다.

$r_title(typeGetter의 반환 값 예제)
returnInfo = {
    id: "dynamic_select_" + cnt,
    inputType: "select",
    options: {
        viewType: "icon"
    },
    itemSet: {
        nodeset: "data:dataList2",
        label: "label",
        value: "value"
    },
    value: "select"
}

inputType 동적 변경 (setCellInputTypeCustom & setCellInputType())

GridView의 컬럼이 inputType="custom"인 경우, setCellInputTypeCustom="true" 설정과 setCellInputType() 함수를 사용하여 해당 컬럼에 속한 특정 셀의 inputType을 동적으로 변경할 수 있습니다.

inputType 종류

열의 inputType의 종류는 다음과 같습니다. 기본 값은 text입니다.

inputType="autoComplete"

소개

directOpen

viewType="icon" 및 viewTypeIconImage="true" 설정을 사용할 경우, GridView의 autoComplete 상자에 화살표 이미지가 표시됩니다. 이 경우, directOpen="true" 설정을 추가하면 화살표 이미지 클릭만으로 아이템 목록을 바로 펼칠 수 있습니다.

directOpen="false"인 경우, 화살표 이미지를 클릭하면 해당 셀만 선택합니다. 화살표 이미지를 더블 클릭해야 아이템 목록이 펼쳐집니다.

displayMode 및 delimiter 동적 설정

setDisplayMode() 및 setDelimiter() 함수를 사용하면 그리드뷰 컬럼(gridView.column)의 displayMode 및 delimiter 속성을 동적으로 변경할 수 있습니다. 단, 아래의 inputType 컬럼에 한해 지원합니다.

• inputType="autoComplete"

• inputType="checkcombobox"

• inputtype="select"

displayMode

$r_title(사용 예)
// gridView1의 컬럼 중
// index가 2인 컬럼의 displayMode 속성값을 "value delim label"로 지정. 

gridView1.setDisplayMode(2, "label delim value");

delimiter

$r_title(사용 예)
// gridView1의 컬럼 중
// index="2" 컬럼에 delimiter=" || "  설정. 

gridView1.setDelimiter(2, " || ");

inputType="calendar"

날짜 입력 순서 및 표시 형식 지정

dataType="date" inputType="calendar" 컬럼의 경우, setColumnIoFormat(options); 함수를 이용하여 (1) 날짜 입력 형식 (2) 입력란의 날짜 출력 형식 (3) 달력의 날짜 출력 형식을 지정할 수 있습니다.

$r_title(setColumnIoFormat)
gridView1.setColumnIoFormat(
    {
      colIndex: "col2" , 
      ioFormat:"ddMMyyyy", 
      dateMask:"dd-MM-yyyy", 
      useMonthYearFormat:true, 
      calendarDisplayFormat:"dd-MM-yyyy"
    }
);

연도 및 월 선택 방식 설정

inputType="calendar" 컬럼의 경우, pickerType 및 fixPickerStatus 속성을 사용하여 연도와 월 선택 방식을 설정할 수 있습니다.

inputType="checkbox"

checkboxLabelColumn

inputType="checkbox" 컬럼의 경우, 다른 칼럼의 값을 조합하여 CheckBox 라벨 값으로 사용할 수 있습니다. checkboxLabelColumn 속성으로 조합할 GridView 바디 컬럼의 ID를 지정하십시오.

checkAll()

checkAll() 함수를 사용하면 inputType="checkbox"의 컬럼의 체크박스를 한번에 선택하거나 선택 해제할 수 있습니다.

$r_title(checkAll() 사용 예시)
// id="chk" 컬럼의 체크박스를 모두 선택.
gridView1.checkAll("chk", true);

// id="chk" 컬럼의 체크박스를 모두 선택 해제.
gridView1.checkAll("chk", false);

checkAllType

헤더가 inputType="checkbox"의 경우, 헤더의 체크박스를 통해 전체 셀을 선택할 때 disabled이거나 readOnly 상태의 셀을 셀 상태 판단에 포함할지 여부를 결정할 수 있습니다.

아래의 예제에서 두 행은 선택 상태가 아니고 이 두 행의 상태를 셀 상태 판단에 포함("include")됩니다. 그 결과, 두 셀을 포함하면, 모든 셀이 선택된 것으로 볼 수 없기 때문에 부분 선택 기호가 표시되었습니다.

아래의 예제에서 두 행은 선택 상태가 아니고 이 두 행의 상태는 셀 상태 판단에서 제외("exclude")됩니다. 그 결과 두 셀을 제외한 모든 셀이 선택된 것으로 볼 수 있기 때문에 전체 선택 기호가 표시되었습니다.

partialCheckNextClick

GridView의 inputType="checkbox" 컬럼에서 일부 행들을 선택한 후, 헤더의 체크박스를 선택할 경우, 전체 행들의 체크박스를 모두 선택할 것인지 혹은 모두 선택 해제할 것인지를 결정할 수 있습니다. 모두 선택할 경우 particalCheckNextClick 속성을 "check"로, 모두 선택 해제할 경우 "uncheck"로 선택해야 합니다.

inputType="checkbox" 혹은 inputType="selet" 열에서 체크한 행의 인덱스 및 데이터 확인

inputType="checkbox" 혹은 inputType="select" 칼럼의 경우 아래 함수를 이용하여 체크한 행의 데이터를 확인할 수 있습니다.

• getCheckedIndex();

• getCheckedData();

• getCheckedJSON();

• getCheckedXML();

체크한 행 삭제/제거

inputType="checkbox" 컬럼을 추가한 후, 해당 컬럼에서 체크된 행들을 삭제/제거(delete/remove)할 수 있습니다.

관련 API

inputType=“checkbox” (gridView.column)

rowStatusVisible=“true” (gridView)

getCheckedIndex(“colID”); (gridView)

ignoreStatus=“true” (dataList)

deleteRows(Arr); (dataList)

removeRows(Arr); (dataList)

Shift 키를 사용하여 여러 셀들을 한번에 체크하여 선택

useShiftKeyCheck="true" 속성 설정을 적용하면 inputType="checkbox" 컬럼의 체크박스를 Shift 키를 사용하여 선택할 경우, 선택된 체크박스 사이의 연속된 셀들을 모두 선택할 수 있습니다.

inputType="checkcombobox"

소개

inputType="drilldown"

소개

GridView의 각 행을 메뉴 형식으로 접고 펼수 있는 드릴다운 형태의 컬럼을 설정할 수 있습니다. 단, 메뉴단계에 대한 데이터를 담고 있는 컬럼이 존재해야 하며, 해당 컬럼을 depthColumn 속성으로 지정해야 합니다. 이 외에도 관련된 속성은 아래와 같습니다.

Enter 키로 목록 열기/닫기

drilldownToggle="enter" 설정을 추가하면, inputType="drilldown" 컬럼의 목록을 Enter 키를 통해 열고 닫을 수 있습니다.

모바일 환경에서 셀 터치로 목록 열기/닫기

단, 모바일 환경에서는 drilldownToggle="enter" 설정 외에 hammerEnabled="true" 설정을 추가하십시오. 이 경우, inputType=“drilldown” 컬럼에서 목록 기호가 있는 셀을 터치하여 목록을 열고 닫을 수 있습니다.

inputType="expression"

일반 컬럼, subTotal, 혹은 footer 컬럼의 경우 inputType을 "expression"으로 지정한 후, 직접 계산식을 정의하여 사용할 수 있습니다.

일반 컬럼

subTotal 및 footer 컬럼

inputType="radio"

radioLabelColumn

inputType="radio" 컬럼의 경우, 다른 칼럼의 값을 조합하여 Radio 라벨 값으로 사용할 수 있습니다. radioLabelColumn 속성으로 조합할 GridView 바디 컬럼의 ID를 지정하십시오.

inputType="select"

inputType="spinner"

최소값 및 최대값 설정

inputType="spinner" 컬럼의 경우, min 및 max 속성으로 최소값과 최대값을 지정할 수 있습니다.

아이콘 표시

inputType="spinner" 컬럼의 viewType="icon" 설정을 추가하면 해당 컬럼의 셀에 화살표 아이콘을 표시할 수 있습니다.

inputType="text"

사용 금지 문자 지정

gnoreChar 속성 혹은 setIgnoreChar() 함수를 사용하여 inputType이 "text", "textImage", 혹은 "secret"인 컬럼에서 금지할 문자를 지정할 수 있습니다.

$r_title(사용 예)
// column1의 inputType은 "text", "textImage", "secret" 중 하나.
// column1에 영문 대소문자 입력 제한.
gridView1.setIgnoreChar("column1", "a-zA-Z");

inputType="textImage"

텍스트와 이미지 표시 순서 (imageAlign)

inputType="textImage" 컬럼에서 imageAlign 설정을 이용하여 컬럼의 아이콘 이미지를 컬럼의 왼쪽이나 오른쪽에 표시할 수 있습니다.

셀 렌더링 방식 (textImageRenderType)

inputType="textImage" 컬럼의 셀들을 렌더링하는 방법을 지정할 수 있습니다. textImageRenderType 속성 값을 아래와 같이 지정하십시오.

• "component" (기본 값) : <table> 태그로 렌더링

• "div" : 텍스트 영역은 <div> 태그로, 이미지는 <button> 태그로 렌더링.

다음은 GridView를 브라우저에서 렌더링한 후 개발자 도구를 통해 HTML 태그들을 확인한 모습입니다.

inputType에 따른 아이콘 표시

viewType

inputType에 따른 일부 선택 항목 숨기기

gridView.column의 inputType이 아래 중 하나이고, DataList와 바인딩하여 선택 항목을 표시할 경우, setColumnVisibleColumn() 함수를 사용하여 일부 선택 항목을 숨길 수 있습니다.

• inputType="autoComplete"

• inputType="checkbox"

• inputType="checkcombobox"

• inputType="radio"

• inputType="select"

숨길 항목은 GridView 컬럼과 바인딩된 DataList의 특정 컬럼의 값을 기준으로 결정할 수 있습니다. 아래와 같이 setColumnVisibleColumn() 함수의 파라미터로 GridView 컬럼과, DataList의 컬럼, 그리고 숨김 처리 조건으로 사용할 DataList 컬럼의 값을 명시하십시오.

$r_title(사용 예)
// (조건)
// GridView의 column1은 inputType="select"이고, 
// column1은 dataList1과 바인딩되어 있음.

// (실행)
gridView1.setColumnVisibleColumn("column1", "Type", "true");

// (결과)
// dataList1에서 Type 컬럼의 값이 "true"인 행들은,
// GridView의 column1의 선택 항목 목록에서 숨김 처리되어 표시되지 않음.

inputType에 따른 일부 선택 항목 비활성화하기

gridView.column의 inputType이 아래 중 하나이고, DataList와 바인딩하여 선택 항목을 표시할 경우, setColumnEnableColumn() 함수를 사용하여 일부 선택 항목을 비활성화할 수 있습니다.

• inputType="autoComplete"

• inputType="checkbox"

• inputType="checkcombobox"

• inputType="radio"

• inputType="select"

비활성화할 항목은 GridView 컬럼과 바인딩된 DataList의 특정 컬럼의 값을 기준으로 결정할 수 있습니다. 아래와 같이 setEnableColumn() 함수의 파라미터로 GridView 컬럼과, DataList의 컬럼, 그리고 비활성화 조건으로 사용할 DataList 컬럼의 값을 명시하십시오.

$r_title(사용 예)
// (조건)
// GridView의 column1은 inputType="select"이고, 
// column1은 dataList1과 바인딩되어 있음.

// (실행)
gridView1.setColumnEnableColumn("column1", "Type", "false");

// (결과)
// dataList1에서 Type 컬럼의 값이 "false"인 행들은,
// GridView의 column1의 선택 항목 목록에서 비활성화되어 표시됨.

gridView.column

GridView의 각 컬럼을 선택한 후 해당 컬럼의 속성을 설정할 수 있습니다.

GridView 컬럼의 dataType 확인 및 변경

setDataType 및 getDataType 함수를 사용하여 GridView 컬럼의 dataType을 변경할 수 있습니다.

$r_title(사용 예)
gridView1.getDataType ( “col1” );
// 리턴 값 (예시) : "text"

gridView1.setDataType ( “col1”, “float” );
// col1 컬럼의 dataType을 float로 변경.

dataType="date"로 변경하고 displayFormat 설정

$r_title(사용 예)
var options = {
    displayFormat: "dd-MM-yyyy"
}

gridview1.setDataType("New", "date", options);

컬럼 숨기기

hidden 속성을 이용하여 열을 숨길 수 있습니다. 또한, setColumnVisible(colIndex, colVisible) API를 사용하여 열 숨기기 기능을 동적으로 사용할 수 있습니다.

$r_title(사용 예)
<w2:column id="openDate" style="height:70px" inputType="calendar" width="70" rowSpan="2" displayFormat="yyyy.MM.dd" hidden="true"></w2:column>
<w2:column id="nation" style="height:70px" inputType="text" width="70" rowSpan="2" hidden="true"></w2:column>

또한, setColumnVisible(colIndex, colVisible) API를 사용하여 열 숨기기 기능을 동적으로 사용할 수 있습니다.

텍스트 정렬

textAlign 속성으로 텍스트를 좌, 우, 중앙으로 정렬할 수 있습니다. 기본 값은 중앙(center)입니다.

$r_title(사용 예)
<w2:column id="orgtitle" style="height:35px" inputType="text" width="200" defaultValue="영화제목" textAlign="left"></w2:column>
<w2:column id="userRating" style="height:70px" width="60" inputType="text" rowSpan="2" dataType="number" displayFormat="##.#" defaultValue="0" textAlign="right"></w2:column>

포맷/포맷터

displayFormat

gridView.colum의 displayFormat 속성을 사용하여 해당 컬럼의 데이터 표시 형식을 설정할 수 있습니다.

displayFormatter

gridView.colum의 displayFormatter 속성으로 함수명을 지정한 후 해당 함수를 별도로 정의하여, 해당 컬럼의 데이터 표시 형식을 설정할 수 있습니다.

customFormatter

gridView.colum의 customFormatter 속성으로 함수명을 지정한 후 해당 함수를 별도로 정의하여, 해당 컬럼의 데이터 표시 형식을 설정할 수 있습니다.

단, 해당 컬럼의 inputType이 아래와 같은 경우에만 유효합니다.

• "text"

• "link"

• "textImage"

• "textarea"

• "select"

• "expression"

• "spinner"

displayFormatter 및 customerFormatter 동적 변경

setCellDisplayFormatter 및 setCellCustomFormatter 함수를 사용하여 각 셀의 displayFormatter 및 customerFormatter 속성을 동적으로 변경할 수 있습니다.

$r_title(사용 예 (setCellDisplayFormatter))

scwin.displayFormatter = function(param){
        	
        	return "** " + param + " **";
 };

....

grd.setCellDisplayFormatter( 2, 2, 'scwin.displayFormatter');		

...

$r_title(사용 예 (setCellCustomFormatter))

scwin.customFormatter = function(data, formattedData, rowIndex, colIndex ){
        	
        	return "[[ " + data + " ]]";
};

....

grd.setCellCustomFormatter( 2, 2, 'scwin.customFormatter' );		

...

dataList.column - importFormatter

dataList.column의 importFormatter 속성으로 사용자 정의 함수를 지정한 후, 해당 함수를 통해 컬럼의 데이터를 변경할 수 있습니다.

GridView 이벤트

GridView를 우클릭한 후 Event – 추가할 이벤트를 선택 후, 해당 로직을 추가하여 이벤트를 추가할 있습니다.

onsort

sortable="true" 속성 설정이 적용된 헤더를 클릭하거나 더블 클릭하여 정렬을 수행할 경우 onsort 이벤트가 발생합니다.

oncellclick

GridView 셀을 클릭할 경우 oncellclick 이벤트가 발생하며 클릭된 셀의 행 인덱스, 열 인덱스, 컬럼 ID를 인자로 전달합니다.

oncelldblclick

GridView 셀을 더블-클릭할 경우 oncelldblclick 이벤트가 발생하며 클릭된 셀의 행 인덱스, 열 인덱스, 컬럼 ID를 인자로 전달합니다.

onscrollstart

onscrollstart 이벤트는 세로 스크롤이 그리드뷰 상단에 닿을 때 발생합니다. alwaysTriggerScrollStart="true" 설정을 적용하면 세로 스크롤이 상단에 닿을 때마다 onscrollstart 이벤트가 발생합니다.

ondateselect & onmonthselect & onyearselect

oncontextopen

oncontextopen 이벤트는 GridView의 컨텍스트 메뉴가 표시될 때 발생하며, 반환하는 값은 아래와 같습니다.

• rowIndex : 클릭된 셀의 행 인덱스. (헤더인 경우 -1을 반환.)

• colIndex : 클릭된 셀의 열 인덱스.

• focusedCell : 포커스된 셀의 좌표를 담은 1차원 배열.

• info.isHeader : 클릭된 셀이 헤더인지 여부.

• info.headerId : 클릭된 셀이 헤더일 경우, 헤더의 ID.

$r_title(사용 예)
scwin.gridView1_oncontextopen = function(rowIndex, colIndex, focusedCell,
info) {
     var logStr = "rowIndex=" + rowIndex + ", colIndex=" + colIndex
     + ", isHeader=" + info.isHeader + ", headerId=" + info.headerId;
     WebSquare.logger.printLog(logStr);
     console.log(logStr);
}

onheadermouseover & onheadermouseout

onheadermouseover 및 onheadermouseout 이벤트는 GridView 헤더에 마우스를 대거나 (마우스 오버) 마우스를 뺄 때 (마우스 아웃) 발생하며, 반환하는 값은 아래와 같습니다.

• info.id : GridView의 ID.

• info.header_id : 클릭된 GridView 헤더의 ID.

$r_title(사용 예)
scwin.gridView1_onheadermouseover = function(info) {
    alert(info.id + " & " + info.header_id);
};

scwin.gridView1_onheadermouseout = function(info) {
    alert(info.id + " & " + info.header_id);
};

GridView 주요 기능

틀 고정

열 고정

고정된 열의 이동을 허용하거나 방지하기

fixedColumn 및 columMove 속성을 사용하여 열(들)을 고정할 경우, fixedColumnNoMove 속성을 사용하여 고정된 열(들)의 이동을 허용하거나 방지할 수 있습니다.

행 고정

스크롤 숨기기

fixedColumnScrollHidden 속성 설정을 통해 고정된 영역에는 스크롤을 표시하지 않을 수 있습니다.

행 번호 및 상태 표시

속성을 통한 설정 (rowNumVisible & rowStatusVisible)

$r_title(상태 변경 (예))
grid1.setCellData(1, 'userRating', 5.88); // 갱신 상태.
grid1.deleteRow(2);                       // 삭제 상태.
grid1.insertRow(grid1.getRowCount());     // 삽입 상태.

동적 설정

행 번호 컬럼 (setRowNumVisible())

행 상태 컬럼 (setRowStatusVisible())

헤더 값, 폭, 배경색 지정

행 번호 컬럼

rowNumVisible="true" 속성 설정을 통해 GridView 각 행의 번호를 표시하는 컬럼을 사용할 경우, 아래 속성들을 설정하여 행 번호 표시 컬럼의 헤더 값과 폭, 배경색 또한 지정할 수 있습니다.

• rowNumHeaderValue (헤더 값)

• rowNumWidth (폭)

• rowNumBackgroundColor (배경색)

행 상태 컬럼

rowStatusVisible="true" 속성 설정을 통해 GridView 각 행의 상태를 표시하는 컬럼을 사용할 경우, 아래 속성들을 설정하여 행 상태 표시 컬럼의 헤더 값과 폭을 지정할 수 있습니다.

• rowStatusHaderValue (헤더 값)

• rowStatusWidth (폭)

$r_title(번호 및 상태 컬럼 표시 (예))
<w2:grid id="grid1" baseNode="item"
  repeatNode="filmo"
  style="position: absolute ;left:0px;top:0px;width: 800px;height: 400px;"
  valueNode="" sortable="true" resize="true"
  readOnlyBackgroundColor="#D9E6F3"
  readOnly="false" hideHeader="false"
  rowNumVisible="true"
  rowNumHeaderValue="No."
  rowStatusVisible="true"
  rowStatusHeaderValue="상태">

행 번호 표시 컬럼에 마우스-오버 색상 적용

rowNumRowMouseOverColor="true" 속성 설정을 통해 GridView 각 행의 번호를 표시하는 셀이 마우스-오버될 경우 지정한 색상을 적용할 수 있습니다.

다국어 지원

$r_title(사용 예 (행 순서/상태 컬럼의 헤더를 순번/상태 대신 Number/Status로 표시))
...
<script 
	...
	scwin.init = function(){
      	WebSquare.WebSquareLang = {
			'rowNum' : 'Number',
        	'rowStatus' : 'Status' 
        	};
	};
        
scwin.init();]]></script>

<w2:gridView 
	... 
	rowNumLocaleRef="rowNum" rowStatusLocaleRef="rowStatus" 
	rowNumVisible="true" rowStatusVisible="true" 
	rowNumHeaderValue="순번" rowStatusHeaderValue="상태"
	... 
</w2:gridView>

...

컬럼

컬럼 폭 자동 맞춤 (autoFit)

autoFit

autoFit & autoFitMinWidth

autoFit="allColumn" & autoFitCellMinWidth

autoFitCellMinWidth 속성을 사용하면 autoFit="allColumn" 설정을 적용하기 위해 필요한 GridView 셀의 최소 너비를 지정할 수 있습니다. GridView 셀의 너비가 autoFitCellMinWidth 속성 값보다 작을 경우, autoFit="allColumn" (모든 열의 너비를 자동으로 맞추는) 설정이 작동하지 않고 가로 스크롤이 생성됩니다.

setAutoFit() & clearAutoFit()

드래깅을 통한 컬럼 폭 조정

드래깅을 통한 행 번호 컬럼 폭 조정

최소 컬럼 폭 지정

컬럼 이동

GridView의 헤더를 드래깅하여 해당 컬럼을 이동할 수 있습니다. 드래깅 시 헤더의 value로 지정한 값이 툴팁으로 나타납니다. 세로 틀로 고정된 컬럼의 경우, 드래깅 가능 여부를 별도로 지정할 수 있습니다.

관련 API

columnMove="true": 해당 컬럼의 이동을 허용.

fixedColumn & fixedColumnNoMove: 세로 틀 고정된 컬럼의 드래깅 허용 여부.

세로 틀 고정된 컬럼의 드래깅

fixedColumn: 세로 틀 고정 대상 컬럼을 지정.

columnMove="true": 틀 고정된 컬럼도 columnMove="true"인 경우 드래깅을 통해 이동 가능.

fixedColumnNoMove="true": fixedColumn을 통해 고정된 컬럼의 경우 columnMove="true" 설정을 적용받지 않음. 즉, 드래깅을 통한 이동 불가능.

헤더 드래깅을 통한 컬럼 이동

헤더가 병합된 컬럼을 푸터와 함께 이동

특정 컬럼의 스타일 직접 설정

setColumnStyle() 함수를 사용하면 지정한 컬럼에 원하는 스타일을 직접 설정할 수 있습니다.

$r_title(사용 예)
// index=1 컬럼에 “color: red;” 스타일 적용. 
grid1.setColumnStyle(1, "color", "red");

행

삭제 상태의 행 표시 (hideDeletedRow)

GridView와 바인딩된 DataList의 deleteRow() 혹은 deleteRows() 함수를 사용하여 GridView의 행을 삭제할 경우, 행의 상태(rowStatus)가 삭제("D" )로 변경되지만 해당 행들은 계속 gridView에 표시됩니다. 이 경우, hideDeletedRow 속성을 사용하면 삭제 상태의 행을 GridView에 표시할 수 있습니다.

동적 행 추가 및 삭제

GridView와 DataList가 바인딩된 경우, insertRow(); 및 removeRows(); 함수를 사용하여 행을 새로 추가하거나 삭제할 수 있습니다.

표시할 행 수 지정

다음은 visibleRowNum 속성 값을 "8"로 지정하여, 8개의 행만 GridView에 표시한 모습입니다.

속성을 통한 지정 (visibleRowNum)

다음은 visibleRowNum 속성 값을 "8"로 지정하여, 8개의 행만 GridView에 표시한 모습입니다.

함수를 통한 지정 (setVisibleRowNum())

행 표시하기 숨기기

행 추가, 삭제, 저장 버튼

버튼은 Trigger 혹은 다른 컴포넌트로 나타낼 수 있습니다. 이들 컴포넌트는 다른 컴포넌트와 연계하여 사용할 수 있으며, 이벤트를 사용하여 그리드를 조작할 수 있습니다.

<xf:trigger id="trigger1"
  style="position: absolute ;left:0px;top:0px;width: 100px;height: 25px;"
  type="button">
  <xf:label>행 추가</xf:label>
  <script ev:event="onclick"
    type="javascript"><![CDATA[
      grid1.insertRow( 0 );
  ]]></script>
</xf:trigger>
<xf:trigger id="trigger2"
  style="position: absolute ;left:100px;top:0px;width: 100px;height: 25px;"
  type="button">
  <xf:label>행 삭제</xf:label>
  <script ev:event="onclick"
    type="javascript"><![CDATA[
      var chkDataArr = grid1.getCheckedData("chk");
      var dataArr = [];
      for ( var i = 0; i < chkDataArr.length; i++) {
        dataArr[i] = chkDataArr[i][2];
      }
 
      var qStr = dataArr.join(", ") + " ("
          + chkDataArr.length + "건)을 삭제하시겠습니까? ";
      output1.setValue(qStr);
      if (chkDataArr.length == 0) {
        output1.setValue("선택된 건수가 없습니다.");
        group3.hide();
      } else {
        group3.show();
      }
 
      gridReadOnly(true);
      floatingLayer1.show();
   ]]></script>
</xf:trigger>
<xf:trigger id="trigger3"
  style="position: absolute ;left:200px;top:0px;width: 100px;height: 25px;"
  type="button">
  <xf:label>저장</xf:label>
  <script ev:event="onclick"
    type="javascript"><![CDATA[
      for ( var i = 0; i < grid1.getRowCount(); i++) {
        var doc = dataList1.getRowXML(i);
        var ret = validCheck(doc, i);
        if (ret == false) {
          alert('필수 입력 항목이 존재합니다.');
          return;
        }
      }
 
      var modifiedXML = dataList1.getModifiedXML();
 
      alert(WebSquare.xml.indent(modifiedXML));
    ]]></script>
</xf:trigger>

셀

셀 너비/높이 설정

속성 기본값 width와 style = "height"를 통해 셀의 너비와 높이를 조절할 수 있습니다. (예: width="70" style="height:20px")

셀의 기본 값 설정

새로 추가되는 셀의 기본 값은 defaultValue를 통해 설정할 수 있습니다.

셀에 데이터가 바인되지 않았을 경우 기본값이 표시됩니다.

XML 데이터: 열의 id와 같은 노드명이 없는 경우

JSON 데이터: 열의 id와 같은 속성 이름이 없는 경우

아래와 같이 defaultValue 속성을 정의하십시오.

<w2:column id="orgtitle"
  style="height:35px" inputType="text"
  width="200" defaultValue="영화제목">
</w2:column>

셀 선택

동적 셀 선택

$r_title(사용 예 (1) - 영역 선택)
gridView1.setFocusedMultiCell(3,2,4,3);

// 실행 결과:  (3,2), (3,3), (4,2), (4,3) 셀들이 선택.

$r_title(사용 예 (2) - 전체 선택)
gridView1.setFocusedMultiCell(0,0,totalRow-1,totalCol-1);

// 실행 결과:  전체 셀을 선택.

$r_title(사용 예 (3) - 컬럼 선택)
gridView1.setFocusedMultiCell(0,1,totalRow-1,1);

// 실행 결과: 두 번째 컬럼의 모든 셀을 선택

$r_title(사용 예 (4) - GridView의 focusMode 속성이 "row" 혹은 "both"인 경우)
gridView1.setFocusedMultiCell(1, 1, 16, 2, {ignoreFocusMode:true});

// focusMode 설정에 상관 없이 영역 안의 셀들만 선택됨

읽기 전용 셀 선택

셀 선택 금지

드래깅을 통한 셀 텍스트 선택 방지 (noSelect)

noSelect="true" 속성 설정을 통해 마우스 드래깅을 통한 셀 텍스트 선택을 방지할 수 있습니다.

속성을 통한 금지 (blockSelect)

gridView.column의 blockSelect 속성을 사용하면, 해당 컬럼의 셀들이 사용자 선택되는 것을 금지할 수 있습니다.

함수를 통한 동적 금지 (setBlockSelect())

$r_title(사용 예)
gridView1.setBlockSelect("a", true); 
// id가 "a"인 컬럼의 blockSelect 속성 값을 "true"로 설정.

GridView의 setBlockSelect() 함수를 사용하면 각 컬럼의 셀 선택을 막는 blockSelect 속성 값을 동적으로 설정하여, 셀 선택을 동적으로 차단할 수 있습니다.

셀 제목

헤더, 해당 셀의 데이터, label, inputType 등을 조합하여 각 셀의 <td>에 title 속성을 추가합니다.

관련 API

titleAuto

해당 셀의 inputType에 따른 타이틀 생성 규칙은 아래와 같습니다.

"text" / "link" / "button"

(1) 헤데 셀에 데이터가 있을 때: "헤더 컬럼의 title 값 + 해당 셀의 데이터"

(2) 헤데 셀에 데이터가 없을 때: "헤더 컬럼의 title 값 + 해당 컬럼의 inputType"

"check" / "radio"

(1) 헤데 셀에 label 값이 있을 때: "선택한 값 + label 값"

(2) 헤데 셀에 label 값이 없을 때: "선택한 값 + 해당 컬럼의 inputType"

"select"

(1) 헤더 셀의 label 값이 있을 때: "헤더 컬럼의 title 값 + label 값"

(2) 헤더 셀의 label 값이 없을 때: "헤더 컬럼의 title 값 + 해당 컬럼의 inputType"

특정 셀 비활성화

setCellDisabled() 함수를 사용하여, 필터에 의해 숨겨진 셀을 포함한 특정 셀을 동적으로 비활성화할 수 있습니다.

$r_title(사용 예)
gridView1.setCellDisabled(
    0, // 행 인덱스
    0, // 컬럼 인덱스
    true, // 비활성화 여부 
    false // 실제 인덱스 사용 여부
);

셀 변경 상태 표시

cellStatusVisible="true" 속성 설정을 적용하면, 셀 데이터가 추가, 수정, 삭제될 경우, 우측 상단에 아이콘을 표시할 수 있습니다. 이 때, cellStatusIconPosition 속성을 사용하여 해당 아이콘을 표시할 위치를 지정할 수 있습니다.

드래깅

동일한 GridView 내에서, 혹은 서로 다른 GridView 사이에서 한 개 이상의 행을 드래그-앤-드롭을 통해 이동할 수 있습니다.

관련 속성 및 함수

dataDragDrop 및 함수 (드래그-앤-드롭 허용)

dragDisplayColumn (툴팁에 표시할 컬럼 ID 지정)

dragStartFunction / dragEndFunction (드래깅 시작/종료 시 실행할 함수 지정)

useShiftKey (Shift 키 사용을 통한 행 선택 허용)

setDrillDownDragDrop() (inputType="drilldown" 컬럼을 포함한 행의 이동 허용)

dataDragSelect (여러 개의 셀들을 드래깅을 통해 선택)

dataDragSelectAutoScroll (드래깅 시 마우스가 그리드뷰를 벗어나도 자동으로 스크롤을 수행)

마우스 드래깅을 통한 행 이동

동일한 GridView 내 혹은 다른 GridView로의 드래깅 (dataDragDrop)

동일한 GridView 내에서, 혹은 서로 다른 GridView 사이에 GridView 행 전체를 드래그-앤-드롭하여 이동할 경우, dataDragDrop="true"로 설정하십시오. Shift 키를 사용할 경우, useShiftKey="true" 설정도 추가합니다.

동일한 GridView 내에서만 드래깅 (dataDragDropSelf)

dataDragDropSelf="true"로 설정을 적용하면 동일한 GridView 내에서만 드래깅으로 행을 이동할 수 있습니다.

다른 GridView로의 드래깅 (dataDragDropOther)

dataDragDrop="true" 속성 설정을 통해 GridView의 행 이동을 허용할 경우, dataDragDropOther="true" 설정을 추가하면, 다른 GridView로의 행 이동만 허용할 수 있습니다. 즉, 동일한 GridView 내에서의 행 이동은 금지할 수 있습니다.

inputType="drilldown" 컬럼을 포함한 GridView에서의 드래깅

inputType="drilldown" 컬럼을 포함한 행들을 GridView 내에서, 혹은 서로 다른 GridView 사이에서 드래깅하여 이동할 수 있습니다. setDrillDownDragDrop() 함수를 사용하십시오. 단, GridView에는 dataDragDrop="true" 설정이 있어야 합니다.

$r_title(사용 예)
gridView1.setDrillDownDragDrop(true);

행 이동을 위한 마우스 드래깅 시작/종료 시 실행할 함수 지정

드래깅 시작/종료 시 실행할 함수는 dragStartFucntion 및 dragEndFunction 속성을 통해 지정할 수 있습니다. 단, 해당 함수는 직접 정의해야 합니다.

$r_title(사용 예)
// gridView1
  dataDragDrop="true" 
  dragDisplayColumn="orgtitle"
  dragStartFunction="dragStart1"
  dragEndFunction="dragEnd1"
  ...
 
// gridView2 
  dataDragDrop="true"
  dragDisplayColumn="orgtitle, openDate"
  dragStartFunction="dragStart2"
  dragEndFunction="dragEnd2" 
  ...

$r_title(dragStart1(), dragEnd1(), dragStart2(), dragEnd2() 정의)
function dragStart1(rowIndex, rowXML) {
  return rowXML;
}
 
function dragEnd1(rowIndex, rowXML) {
  return false;
}
 
function dragStart2(rowIndex, rowXML) {
  grid2.removeRow(rowIndex);
  return rowXML;
}
 
function dragEnd2(rowIndex, rowXML) {
  grid2.setRowXML(rowIndex, rowXML, false);
  return false;
}

마우스 드래깅을 통한 행 이동 시 rowStatus 유지

dataDragDropStatus="true" 설정을 추가할 경우, 하나의 GridView 내에서 드래그-앤-드롭으로 행을 이동할 때 rowStatus를 유지할 수 있습니다. dataDragDropStatus 속성을 기본 값이 "false"로 설정할 경우, 드래그-앤-드롭으로 행이 이동되면 rowStatus가 "C"로 변경됩니다.

마우스 드래깅을 통한 여러 셀들의 선택

드래깅 및 Shift 키를 통한 여러 셀들의 선택

아래 속성과 함수를 사용하여 사용자가 마우스 드래깅 혹은 Shift 키를 통해 여러 개의 셀을 선택하도록 허용할 수 있습니다.

• useShiftKey="true"

• dataDragSelect="true"

• setDataDragSelect()

• setUseShiftKey()

useShiftKey="true" 및 dataDragSelect="true" 속성을 설정하면 마우스 드래깅 혹은 Shift 키를 통해 여러 개의 셀을 선택하고, 선택한 여러 셀들을 한꺼번에 삭제할 수 있습니다.

또한, 마우스 드래깅으로 여러 개의 셀들을 선택할 수 있도록 허용하는 dataDragSelect 속성 및 Shift 키를 사용하여 여러 개의 셀들을 선택할 수 있도록 허용하는 useShiftKey 속성은 각 setDataDragSelect() 함수 및 setUseShiftKey() 함수를 이용하여 동적으로 설정할 수 있습니다.

$r_title(사용 예)
gridView1.setDataDragDrop(false);
gridView1.setDataDragSelect(true);
gridView1.setUseShiftKey(true);

드래깅한 여러 셀들의 선택을 유지

드래깅(dataDragSelect="true") 혹은 Shift 키를 사용(useShiftKey="true")하여 여러 개의 셀들을 선택한 후 마우스 우클릭하면 셀 선택이 해제됩니다. 이 경우, keepDataDragSelection 속성 값을 "true"로 설정하면 마우스를 우클릭해도 여러 셀들이 선택된 상태를 유지할 수 있습니다.

드래깅 시 자동 스크롤링

드래깅으로 셀을 선택할 경우, 마우스가 GridView 밖을 벗어나면 마우스 방향에 따라 그리드뷰가 상하, 좌우, 대각선 방향으로 자동 스크롤링됩니다.

마우스가 화면을 벗어나도 자동으로 드래깅되도록 허용하는 dataDragSelectAutoScroll 속성은 setDragSelectAutoScroll() 함수를 사용하여 동적으로 설정할 수 있습니다.

$r_title(사용 예)
gridView1.setDataDragSelectAutoScroll(true);

정렬

정렬 기능 추가 및 정렬 아이콘 표시

예제 (1)

예제 (2)

예제 (3) - 정렬 기능을 동적으로 설정

setSortable() 함수를 사용하면 정렬 기능(sortable="true")을 동적으로 설정할 수 있습니다.

$r_title(사용 예)
// 지정한 headerID 헤더에 sortable="true" 설정.
gridView1.setSortable(headerId, true);

// 지정한 headerID 헤더에 sortable="false" 설정.
gridView1.setSortable(headerId, false);

여러 컬럼을 정렬

한 개의 컬럼을 정렬한 후에 추가로 다른 컬럼의 헤더를 더블 클릭하여 여러 개의 컬럼을 정렬할 수 있습니다. 단, useCtrlOnMultisort="true" 설정을 사용할 경우에는 Ctrl 키를 누른 채로 컬럼 헤더를 더블 클릭해야 여러 컬럼 정렬이 가능합니다.

헤더 컬럼이 병합된 경우 정렬 기준 컬럼 지정

여러 개의 헤더 컬럼이 병합된 경우, orderByColumn 속성을 통해 정렬 기준이 되는 컬럼을 지정할 수 있습니다. 아래 예제와 같이 세 개의 컬럼 헤더가 병합된 경우, 정렬 아이콘을 클릭할 경우 세 개의 컬럼 중 정렬의 기준이 될 컬럼을 GridView의 Body Column ID로 지정할 수 있습니다.

라벨 값을 기준으로 정렬

GridView 컬럼의 inputType이 "autoComplete"이거나 "select"인 경우, 라벨 값을 기준으로 정렬할 수 있습니다. inputType="custom" 컬럼의 inputType을 "autoComplete"이거나 "select"로 변경한 경우에도 해당합니다. gridView.column의 sortLabel 속성을 "true"로 설정하십시오.

데이터가 없을 경우 정렬 버튼 숨기기

sortable과 showSortableImage 속성을 사용하여 정렬 버튼을 표시할 경우, GridView에 데이터가 없는 경우에도 정렬 버튼이 표시됩니다. 이 때 hideSortIconOnNoData="true" 속성 설정을 적용하면, GridView와 바인딩된 데이터가 없을 경우 정렬 버튼을 숨길 수 있습니다.

필터링

필터 아이콘 표시

GridView 컬럼의 헤더에 useFilter="true" 설정을 추가하면 필터 아이콘이 표시되고, 해당 아이콘을 클릭하면 직접 필터를 설정할 수 있습니다.

필터 아이콘 및 필터링 항목 표시

GridView 컬럼의 헤더에 useFilter="true" 설정을 추가한 후, GridView의 useFilterList 속성을 "true"로 설정할 경우, 필터 아이콘을 클릭하면 직접 필터를 설정할 수 있는 메뉴와 함께 필터링 항목이 목록으로 표시됩니다.

정렬/필터링 아이콘 표시 (showSortableUseFilter)

GridView가 정렬 기능(sortable="true")을 사용하면서 정렬 아이콘을 헤더에 표시하고(showSortableImage="true"), 또 그리드뷰 컬럼이 필터링 기능(useFilter="true")을 사용할 경우, 정렬 아이콘과 필터링 아이콘을 모두 헤더에 표시할 수 있습니다. showSortableUseFilter 속성을 "true"로 설정하십시오.

사용자 정의 필터 저장

필터링 후의 컬럼 데이터만 반환

GridView와 DataList가 바인딩된 경우, DataList의 getFilteredColData() 함수를 사용하면 필터링 결과만 반환할 수 있습니다.

필터링 후의 데이터만 반환

GridView와 DataList가 바인딩된 경우, DataList의 getAllFilteredData() 함수를 사용하면 필터링 결과만 JSON 형식으로 반환할 수 있습니다. inputType="drilldown" 컬럼에서 특정 노드만 표시할 경우, 표시된 노드들만 필터링된 데이터로 반환할 수 있습니다.

숫자 필터링 조건 vs. 알파벳 필터링 조건

필터링 조건이 알파벳 등의 문자인 경우 '<', '<=', '>', '>=' 네 개의 연산자가 표시되지 않고 '=' 및 '<>'만 표시됩니다.

필터링 조건 표시 및 검색

useFilterList="true" 설정을 사용하면 필터링 조건을 목록으로 표시할 수 있습니다.

useFilterList="true"와 useFilterSearch="true" 설정을 동시에 사용할 경우, 필터링 조건 목록과 함께 필터링 조건을 입력할 수 있는 상자가 표시됩니다.

필터링 조건 입력 상자는 검색 기능을 함께 제공합니다. 다음은 알파벳 "J"를 입력했을 때 대문자 "J"를 포함하는 필터링 조건이 검색된 모습입니다.

필터 상자 폭 자동 맞춤

그리드뷰 컬럼 헤더에 autoFitFilterList="true" 설정을 적용하면, 필터 항목 텍스트 길이에 따라 필터 상자의 폭을 자동으로 조절할 수 있습니다.

데이터가 없을 경우 필터 버튼 숨기기

각 헤더에 useFilter="true" 속성 설정을 적용하고 GridView에 showSortableUseFilter="true" 속성 설정을 적용하여 필터 버튼을 표시할 경우, GridView에 데이터가 없는 경우에도 필터 버튼이 표시됩니다. 이 때 hideFilterIconOnNoData="true" 속성 설정을 적용하면, GridView와 바인딩된 데이터가 없을 경우 필터 버튼을 숨길 수 있습니다.

동적으로 필터링 적용

DataList의 setColumnFilter() 함수를 사용하여, DataList와 바인딩된 GridView의 특정 컬럼에 필터링을 동적으로 적용할 수 있습니다. 다음은 정규 표현식("regExp")을 사용하여 "col3" 컬럼의 값이 "Freezer" 혹은 "TV"인 데이터만 필터링하기 위한 조건을 정의한 코드입니다.

$r_title(사용 예)
// "col3"의 값이 "Freezer" 혹은 "TV"인 데이터만 필터링

dataList1.setColumnFilter({
    type: 'regExp',
    colIndex: 'col3',
    key: /Freezer|TV/gi,
    condition: 'and'
});

그룹핑

그룹핑 기능을 사용하면 한 개 이상의 컬럼을 기준으로 GridView의 데이터를 그룹으로 분류하고 각 그룹에 대한 통계 값을 확인할 수 있습니다. groupby() 함수를 사용할 경우 동적으로 그루핑을 수행할 수 있고, groupbyZone="true" 속성 설정을 사용할 경우 사용자가 직접 컬럼 헤더를 드래그-앤-드롭하여 데이터를 그룹핑할 수 있습니다.

groupby() 함수를 통한 그룹핑

groupby() 함수를 사용하여 그룹핑을 수행할 수 있습니다. 각 옵션에 대한 자세한 설명은 API 가이드를 참고하십시오.

$r_title(사용 예)
var options = {
    sortIndex: [0, 1],
    closeGroup: true,
    groupbyHeader: [{
        inputType: "expression",
        expression: 'toggle() + depthStr() + "    [ " + count() + " Cases ]  "',
        align: "left",
        colSpan: "4"
    }],
    groupbyFooter: {
        depth_0: [{
            colSpan: "3",
            value: "Total",
            align: "right"
        }, {
            inputType: "expression",
            expression: 'SUM("col4")'
        }],
        depth_1: [{
            colSpan: "3",
            value: "Sub Total",
            align: "right"
        }, {
            inputType: "expression",
            expression: 'SUM("col4")'
        }]
    }
};
gridView1.groupby(options);

그룹핑 헤더에 마지막 단계만 표시

groupby() 함수를 통해 그룹핑을 수행할 경우, showOnlyLastDepth 옵션을 true로 설정하면 헤더에 마지막 단계만 표시할 수 있습니다.

$r_title(사용 예)
var options = {
    sortIndex: [0, 1, 2],
    closeGroup: true,
    showOnlyLastDepth: true,
    groupbyHeader: [{
        inputType: "expression",
        expression: 'toggle() + depthStr() + "    [ " + count() + " Cases ]  "',
        align: "left",
        colSpan: "4"
    }],
    groupbyFooter: {
        depth_0: [{
            colSpan: "3",
            value: "Total",
            align: "right"
        }, {
            inputType: "expression",
            expression: 'SUM("col4")'
        }],
        depth_1: [{
            colSpan: "3",
            value: "Sub Total",
            align: "right"
        }, {
            inputType: "expression",
            expression: 'SUM("col4")'
        }]
    }
};
gridView1.groupby(options);

expression

그룹핑된 각 컬럼의 데이터에 대해 아래의 expression 계산식을 사용할 수 있습니다.

그룹핑 & 필터링

groupbyZone="true" 속성 설정을 사용할 경우, 한 개 이상의 컬럼 헤더를 드래그-앤-드롭하여 그룹핑을 수행할 수 있습니다. 단, ongroupby 이벤트를 추가하여 그룹핑 조건을 지정해야 합니다. 또한 ongroupby 이벤트를 통해 그룹핑 수행 시 groupby() 함수를 사용하십시오.

그룹핑 영역으로 드래깅된 헤더를 클릭하면 아래와 같이 필터가 표시됩니다. 즉, 사용자는 그룹핑을 수행한 후 필터를 선택하여 필터링도 수행할 수 있습니다.

$r_title(ongroupby 정의 (예시))
scwin.gridView1_ongroupby = function(options) {
  options.groupbyHeader = [{
    inputType: 'expression',
    expression: 'toggle() + depthStr() + "    [ " + count() + " Cases ]  "',
    align: 'left',
    colSpan: 4
  }];
  options.closeGroup = true,
    options.groupbyFooter = {
      depth_0: [{
        colSpan: 3,
        value: "(1) Maximum Value",
        align: "right"
      }, {
        inputType: 'expression',
        expression: 'MAX("col4")'
      }],
      depth_1: [{
        colSpan: 3,
        value: "(2) Maximum Value",
        align: "right"
      }, {
        inputType: 'expression',
        expression: 'MAX("col4")'
      }],
      depth_2: [{
        colSpan: 3,
        value: "(3) Maximum Value",
        align: "right"
      }, {
        inputType: 'expression',
        expression: 'MAX("col4")'
      }]
    };
  gridView1.groupby(options);

};

그룹핑 영역 높이 및 표시할 메시지 지정

groupbyZoneHeight 및 groupbyZoneMessage 속성들을 사용하여 그룹핑 영역의 높이와 그룹핑 영역에 표시할 메시지를 지정할 수 있습니다.

그룹핑 기준 컬럼 수 제한

groupbyZone 속성 설정을 통한 그룹핑 기능을 사용할 때, 그룹핑을 위해 드래깅할 수 있는 컬럼의 최대 개수를 지정할 수 있습니다. groupbyMaxCount 속성을 사용하십시오.

필터 박스 표시

groupbyZoneFilterBox="true" 속성 설정을 사용할 경우, 그룹핑 후 선택한 필터 조건을 표시하는 필터 박스가 표시됩니다. 필터 박스는 사용자가 설정한 필터링 조건을 표시하고, 사용자가 특정 필터링 조건을 선택할 때 해당 결과물만 화면에 출력합니다.

관련 속성

groupbyFilterBox

groupbyFilterBoxLocation

filterBoxVisibleRowNum

아래와 같이 groupbyFilterBox="false"인 경우, 그룹핑 후 헤더에서 필터링 조건을 선택했지만 필터링 조건이 별도로 표시되지 않습니다.

아래와 같이 groupbyFilterBox="true"인 경우, 그룹핑 후 헤더에서 필터링 조건을 설정할 경우, 해당 조건이 별도의 박스에 표시됩니다.

groupbyFilterBoxLocation 속성을 사용할 경우, 필터 박스를 표시할 위치("top"/"bottom")를 지정할 수 있습니다.

filterBoxVisibleRowNum 속성은 필터 박스에 표시할 최대 필터링 조건 수를 제한하는데 사용됩니다.

필터링을 유지한 채로 그룹핑 수행

GridView에 필터링이 설정된 경우, 필터링 조건을 선택한 후 해당 조건으로 필터링된 데이터에 대해서만 그룹핑을 수행할 수 있습니다. customFilterBox="true" 설정을 추가하십시오.

관련 속성은 아래와 같습니다.

필터링 관련

useFilterList="true"

useFilter="true" // 헤더에 설정

그룹핑 관련

groupbyZone="true"

groupbyFilterBox="true"

필터 유지 관련

customFilterBox="true"

아래와 같이 필터를 선택한 후 헤더를 드래깅하여 그룹핑을 수행할 수 있습니다.

customFilterBox="true"인 경우, 필터링이 유지된 채로 그룹핑이 수행됩니다.

하단의 필터 상자에는 "필터링" 조건과 "필터링 + 그룹핑" 조건이 모두 표시됩니다.

customFilterBox="false"인 경우, 필터링이 풀리고 전체 데이터에 대해 그룹핑이 수행됩니다.

그룹핑 취소

clearGroupby() 함수를 사용하여 groupbyZone="true" 속성 설정 혹은 groupby() 함수를 통해 수행한 그룹핑을 취소할 수 있습니다.

$r_title(사용 예)
gridView1.clearGroupby();

그룹핑 조건 확인

getGroupbyData() 함수는 groupbyZone 속성을 통해 현재 적용된 그룹핑 조건을 반환합니다.

$r_title(사용 예)
//JSON 형태로 반환. 
 var data = gridView1.getGroupbyData();
 
//string으로 반환.
 var data = gridView1.getGroupbyData(false);

그룹핑 후 Excel 파일로 다운로드

advancedExcelDownload 함수를 이용할 경우 그룹핑을 수행한 GridView를 Excel 파일로 다운로드할 수 있습니다. 단, 아래의 예제와 같이 options.groupby="true"로 설정하십시오.

$r_title(사용 예)
var options = {};
options.fileName = "test.xlsx";
options.type = "0";
options.startRowIndex = 0;
options.startColumnIndex = 0;
options.removeColumns = "";
options.groupby = "true";
gridView1.advancedExcelDownload(options);

병합

셀 병합

동일한 데이터가 연속적으로 반복될 경우, 아래 방식으로 동일한 데이터가 반복되는 셀을 병합할 수 있습니다.

셀 병합 방법

(1) 동일한 컬럼 내에서 연속적으로 동일한 데이터를 갖는 셀을 병합. (열 병합.)

(2) 동일한 행 내에서 연속적으로 동일한 데이터를 갖는 셀을 병합. (행 병합.)

(3) 열 병합 후, 행 병합.

(4) 행 병합 후, 열 병합.

(5) 왼쪽 열이 병합된 경우, 열 병합.

(6) 위쪽 행이 병합된 경우, 행 병합.

열 기준 병합

행 기준 병합

열 기준 병합 후, 행 기준 병합

아래와 같이 열 병합을 먼저 수행합니다.

이후 열 병합된 셀들을, 아래와 같이, 다시 행 기준으로 병합합니다.

행 기준 병합 후, 열 기준 병합

아래와 같이 행 병합을 먼저 수행합니다.

이후 행 병합된 셀들을, 아래와 같이, 다시 열 기준으로 병합합니다.

왼쪽 열 기준 열 병합

윗 행 기준 행 병합

셀 병합 해제

위에 설명한 방법으로 병합된 셀들을 mergeClear() 함수를 사용하여 병합을 해제할 수 있습니다.

$r_title(사용 예)
gridView1.mergeClear();

포커스된 셀 병합 및 병합 해제

특정 셀들의 병합 및 병합 해제

지정한 영역의 셀을 병합하거나 병합을 해제

$r_title(사용 예)
gridView1.mergeByFree(0,0,4,4);

$r_title(사용 예)
gridView1.unmergeByFree(0,0);

특정 열에서만 병합

$r_title(사용 예 (속성 지정))
mergeCells="bycol" mergeCol="col3,col5"

// (결과) 
// col3 및 col5 컬럼에서만 셀 병합이 수행됨.

틀 고정(행 고정)된 부분에서만 병합

$r_title(사용 예 (속성 지정))
fixedRow="4" mergeCellsFixedRows="bycol"

// (결과) 
// gridView1의 상단 4개의 행을 고정. 
// 행 고정된 부분에서만 행 병합("bycol")이 수행됨.

$r_title(사용 예 (함수 사용))
gridView1.setFixedRow(4);
gridView1.mergeCellsFixedRows("byrow");

// (결과) 
// gridView1의 상단 4개의 행을 고정. 
// 행 고정된 부분에서만 행 병합("byrow")이 수행됨.

틀 고정(열 고정)된 부분에서만 병합

$r_title(사용 예 (속성 지정))
fixedColumn="4" mergeCellsFixedCols="byrow"

// (결과) 
// gridView1의 좌측 4개의 열을 고정. 
// 열 고정된 부분에서만 행 병합("byrow")이 수행됨.

$r_title(사용 예 (함수 사용))
gridView1.setFixedCol(4);
gridView1.setFixedRightCol(5);
gridView1.mergeCellsFixedCols("bycol");

// (결과) 
// gridView1의 좌측 4개의 열을 고정. // gridView1의 우측 5개의 열을 고정. 
// 열 고정된 부분에서만 열 병합("bycol")이 수행됨.

병합에서 제외할 컬럼 지정

아래의 API를 사용하여 셀 병합에서 제외할 컬럼을 지정할 수 있습니다.

$r_title(사용 예)
mergeCol(3, false);
mergeByCol();

// (결과) 
// 4번째 컬럼을 제외하고 열 병합이 수행됨.

병합 상태 확인

아래의 API를 사용하여 특정 셀의 병합 상태를 확인할 수 있습니다.

동일 데이터를 갖는 행 병합

$r_title(colMerge & upperColumn)
<w2:column id="pubDate" style="height:70px"
  inputType="select" width="60" rowSpan="2"
  dataType="" allOption="" chooseOption=""
  colMerge="true">
	<w2:choices>
		<w2:itemset nodeset="pubYear/item">
			<w2:label ref="label"></w2:label>
			<w2:value ref="value"></w2:value>
		</w2:itemset>
	</w2:choices>
</w2:column>
<w2:column id="genre" style="height:70px"
  inputType="text" width="70" rowSpan="2"
  displayType="all" colMerge="true"
  upperColumn="pubDate">
</w2:column>

병합에서 제외할 값 지정

mergeExcludeValue 속성을 사용하여 셀 병합에서 제외할 값을 지정할 수 있습니다. 즉, mergeExcludeValue 속성으로 특정 값을 지정해여, 해당 값을 갖는 셀은 병합에서 제외할 수 있습니다.

$r_title(사용 예)
// Korea 혹은 빈 값을 갖는 셀을 병합에서 제외.
mergeExcludeValue = "Korea,$blank"

스타일

컬럼

컬럼 배경색 지정

setColumnBackgroundColor() 및 getColumnBackgroundColor() 함수를 사용하여 특정 컬럼의 배경색을 지정하고 확인할 수 있습니다.

$r_title(컬럼 배경색 설정)
// 인덱스 지정
setColumnBackgroundColor(2, "green"); 

// 아이디 지정
setColumnBackgroundColor("col_id", "green");

$r_title(컬럼 배경색 확인)
// 인덱스 지정
getColumnBackgroundColor(2);

// 아이디 지정
getColumnBackgroundColor("col_id");

컬럼 글자색 지정

setColumnColor() 및 getColumnColor() 함수를 사용하여 특정 컬럼의 글자색을 지정하고 확인할 수 있습니다.

$r_title(컬럼 글자색 설정)
// 인덱스 지정
setColumnColor(1, "red");

// 아이디 지정
setColumnColor("col_id", "red");

$r_title(컬럼 글자색 확인)
// 인덱스 지정
getColumnColor(1);

// 아이디 지정
getColumnColor("col_id");

특정 컬럼에 스타일 직접 적용

setColumnStyle() 함수를 사용하여 지정한 컬럼에 특정 스타일을 동적으로 적용할 수 있습니다.

$r_title(사용 예)
// 인덱스가 0인 컬럼의 폰트 크기를 20px로 변경.

gridView1.setColumnStyle(0, "font-size", "20px");

행

행 배경색 지정

setRowBackgroundColor() 함수를 사용하여, 필터에 의해 숨겨진 행을 포함한 특정 행의 배경색을 동적으로 변경할 수 있습니다.

$r_title(사용 예)
gridView1.setRowBackgroundColor(
    0, // 행 인덱스
    “green", // 배경색
    false // 실제 인덱스 사용 여부
);

행 글자색 지정

setRowColor() 및 getRowColor() 함수를 사용하여 특정 행의 글자색을 지정하고 확인할 수 있습니다.

$r_title(사용 예)
// 행 글자색 지정
setRowColor(5, "magenta");

// 행 글자색 확인
getRowColor(5);

마우스-오버된 행에 적용할 스타일 설정

마우스-오번된 행에 특정 스타일을 정의할 수 있습니다. 마우스-오버된 행에 적용할 스타일 클래스를 지정한 후, 이를 rowMouseOverClass 속성 값으로 설정하십시오.

$r_title(CSS 정의 예시)
.testFontStyle {
    color: magenta;
    font-size: 20px;
    font-weight: 600;
}

마우스-오버된 행에 적용할 배경색 설정

마우스-오번된 행에 특정 배경색을 적용할 수 있습니다. 마우스-오버된 행에 적용할 스타일 클래스를 지정한 후, 이를 rowMouseOverColor 속성 값으로 설정하십시오.

특정 행에 CSS 클래스 적용

아래 함수들을 사용하여 특정 행에 CSS 클래스를 적용하거나 취소하고, 지정한 행에 적용된 CSS 클래스를 확인할 수도 있습니다.

관련 함수

setRowClass() : CSS 클래스를 적용.

removeRowClass() : CSS 클래스 적용을 취소.

getRowClass() : 현재 적용된 CSS 클래스를 반환.

$r_title(사용 예 (CSS 클래스 적용))
// index="0" 행에 "cRed" 클래스를 적용
gridView1.setRowClass(0, "cRed");

//  index="1" 행에 "cRed" 및 "cBlue" 클래스를 적용
gridView1.setRowClass(1, "cRed cBlue");

$r_title(사용 예 (CSS 클래스 적용 취소))
// index="0" 행의 CSS 클래스 적용을 취소.
gridView1.removeRowClass(0);

$r_title(사용 예 (CSS 클래스 반환))
// index="0" 행에 적용한 CSS 클래스 이름을 반환. 
gridView1.getRowClass(0);

셀

셀 배경색 지정

setCellBackgroundColor() 함수를 사용하여, 필터에 의해 숨겨진 셀을 포함한 특정 셀의 배경색을 동적으로 설정할 수 있습니다.

$r_title(사용 예)
gridView1.setCellBackgroundColor(
    0, // 행 인덱스
    0, // 컬럼 인덱스
    "red", // 셀 배경색
    false // 실제 인덱스 사용 여부
);

셀 글자색 지정

setCellColor() 및 getCellColor() 함수를 사용하여 특정 셀의 글자색을 지정하고 확인할 수 있습니다.

$r_title(사용 예)
setCellColor(1, 1, "blue");
getCellColor(1,1);

특정 셀에 스타일 직접 적용

setCellStyle() 함수를 사용하여 지정한 컬럼에 특정 스타일을 동적으로 적용할 수 있습니다.

$r_title(사용 예)
// (0,0) 셀의 배경색을 하늘색으로 변경.
gridView1.setCellStyle(0, 0, "background", "lightblue");

// (1,1) 셀에 “font-size: 30px;” 스타일 적용. 
grid1.setCellStyle(1, 1, "font-size", "30px");

특정 셀에 CSS 클래스 적용

setCellClass() 함수를 사용하여 특정 GridView 셀에 지정한 스타일 클래스를 적용할 수 있습니다.

$r_title(사용 예)
gridView1.setCellClass(0, 0, "blue");

//// 스타일 클래스 정의 ////
.blue { 
	color : blue;
	font-weight: bolder;
	font-size: 40px;
	background-color: yellow;
}

포커싱, 포커스 이동, 편집 모드

GridView는 여러가지 키를 통하여 제어할 수 있습니다.

• 셀 포커스 이동: 상하좌우 방향키

• 편집 관련한 포커스 이동: Tab, Enter, Shift+Tab, Shift+Enter키

• 포커스된 셀을 수정 모드로 전환: Backspace, Insert 키를 포함한 문자키

• 수정 모드의 셀에서 값 선택 및 문자간 이동: 상하좌우 방향키

• 체크박스나 라디오의 값 토글: Space 키

그 밖에도 Home, End, PageUp, PageDown 키 등을 사용할 수 있습니다.

<w2:grid id="grid1" baseNode="item"
  repeatNode="filmo"
  style="position: absolute ;left:0px;top:0px;width: 800px;height: 400px;"
  valueNode="" sortable="true" resize="true"
  readOnlyBackgroundColor="#D9E6F3"
  readOnly="false" hideHeader="false"
  rowNumVisible="true"
  rowNumHeaderValue="No."
  rowStatusVisible="false"
  rowStatusHeaderValue="상태" fixedColumn="2"
  focusMode="both" 
  focusMove="true"
  keyMoveEditMode="true" 
  editModeEvent="ondblclick"
  enterKeyMove="down">
  ...

포커싱 (focusMode)

사용자가 GridView 상에서 셀을 선택할 경우, 선택된 셀 및 해당 셀이 속한 행을 포커싱하는 방법을 설정할 수 있습니다. focusMode, selectedCellColor, selectedRowColor 속성을 아래와 같이 설정하십시오.

• focusMode

  • "cell" (기본 값) : 셀을 선택.

  • "row" : 행을 선택.

  • "both" : 셀과 행을 모두 선택.

  • "none" : 아무 것도 선택하지 않음.

• selectedCellColor : 선택된 셀의 배경색. (예: "yellow")

• selectedRowColor : 선택된 행의 배경색. (예: "pink")

DataList의 rowPosition에 해당하는 행을 포커싱 (syncRowPositionOption)

GridView와 바인딩된 DataList의 rowPosition이 변경된 경우, GridView에서도 변경된 rowPosition에 해당하는 행을 포커싱할 수 있습니다. syncRowPositionOption 속성을 "style"로 설정하면 해당 행을 포커싱할 수 있습니다.

예를 들어, DataList의 setRowPosition() 함수로 GridView와 바인딩된 DataList의 rowPosition을 2로 변경하면 GridView의 index="2" 행이 포커싱됩니다.

$r_title(setRowPosition() 함수를 사용한 DataList의 rowPosition의 변경)
// GridView와 바인딩된 dataList1의 rowPosition을 2로 변경. 

dataList1.setRowPosition(2);

포커스 이동 방식 (focusFlow)

포커스가 GridView의 맨 왼쪽, 맨 오른쪽, 상단, 혹은 하단에 있을 경우 이후 포커스 이동 방식을 설정할 수 있습니다. focusFlow 속성을 아래와 같이 설정하십시오.

• "default" (기본 값) : 맨 좌측, 맨 우즉, 상단, 하단에서 더 이상 이동하지 않음.

• "linear" : 맨 좌측/우즉 혹은 상단/하단 이후, 위/아래 행 혹은 이전/이후 컬럼으로 이동.

포커스 설정 (setFocusedCell())

setFocusedCell() 함수를 사용하여 지정한 셀로 포커스를 이동할 수 있습니다. 또한, 이미 선택된 셀이 있는 상태에서 setFocusedCell() 함수로 다른 셀에 포커스를 추가하려면 keepFocusedCell 옵션을 true로 설정하십시오.

$r_title(사용 예)
gridView1.setFocusedCell(1, 1, false,
    {
        keepFocusedCell: true
    }
)

편집 모드 진입

editModeEvent & editModeEventIcon

keyMoveEdit & ModemoveKeyEditMode & moveKeyEditModeAll

moveKeyEditMode & moveKeyEditModeAll

Enter 키 입력 시 포커스 이동 방향 설정

사용자가 셀에서 Enter 키를 입력할 경우 포커스가 이동하는 방향 및 편집 모드 진입 여부를 설정할 수 있습니다. enterKeyMove 속성을 아래와 같이 설정하십시오.

• "down" (기본 값) : Enter 키 입력 시 아래쪽 셀로 이동.

• "right" : Enter 키 입력 시 오른쪽 셀로 이동.

• "none" : Enter 키를 입력해도 포커스 이동이 없음.

• "edit" : Enter 키 입력 시 편집 모드로 이동.

• "editRight" : 편집 모드로 진입한 후, 다시 Enter 키를 입력하면 오른쪽 셀로 이동.

• "editDown" : 편집 모드로 이동한 후, 다시 Enter 키를 입력하면 아래쪽 셀로 이동.

데이터 복사하기/붙여넣기

복사 기준 설정 (copyOption)

copyOption 속성을 설정하여 바인딩된 DatatList 값 혹은 현재 화면에 표시된 값 중 어떤 값을 복사할 수 있습니다.

copyOption

"dataList" (기본 값) : 바인딩된 DatatList 값을 복사.

"display" : 현재 화면에 표시된 값을 복사

복사 방식 결정 (copyType)

copyType 속성을 설정하여 셀 데이터를 복사하는 방식을 결정할 수 있습니다.

copyType

"default" (기본 값) : 포커싱된 셀 전체를 복사. 여러 셀을 복사할 경우, 여러 셀에 걸쳐 복사됨.

"native" : 드래깅한 텍스트만 복사. 드래깅된 텍스트는 하나의 셀에만 복사됨.

선택한 셀들을 다른 GridView로 복사

dataDragSelect="true" 혹은 useShiftKey="true" 속성 설정을 사용할 경우, 드래깅이나 Shift 키를 사용하여 여러 개의 셀들을 선택하고, 선택한 셀을 다른 GridView로 복사할 수 있습니다.

여러 개의 GridView 셀에 데이터 복사하기

checkEditOnPaste="true" 속성 설정을 추가하면, Excel 파일 등에서 n*n 개 데이터를 복사하여 GridView로 붙여넣기 할 경우, 해당 개수만큼의 GridView 셀에 붙여 넣을 수 있습니다.

데이터 추가

GridView와 DataList가 바인딩된 경우, setData();, setJSON(); 및 setXML(); 함수를 사용하여 데이터를 설정하거나 추가할 수 있습니다.

데이터가 없을 경우

"데이터 없음" 메시지 표시

GridView와 바인딩된 DataList, LinkedDataList, 혹은 AliasLinkedDataList에 데이터가 없는 경우, noResultMessage 및 noResultMessageVisibleAlways 속성 설정을 통해 "데이터 없음" 메시지를 표시할 수 있습니다.

특정 화면 파일 표시

GridView와 바인딩된 DataList, LinkedDataList, 혹은 AliasLinkedDataList에 데이터가 없는 경우, useNoResultMessageURL 및 noResultMessageURL 속성 설정을 통해 특정 화면 파일을 GridView에 표시할 수 있습니다.

Excel & CSV

Excel 업로드 (Import)

Excel 업로드 → GridView 참조.

Excel 다운로드 (Export)

GridView → Excel 다운로드 참조.

CSV 업로드

CSV 업로드 → GridView 참조.

CSV 다운로드

GridView → CSV 다운로드 참조.

여러 GridView를 Excel 파일로 다운로드

GridView 여러 개 → Excel 다운로드 참조.

일반 페이징

<w2:pageList pageSize="2"
  displayFormat="#" id="pageList1"
  style="position:absolute;left:1px;top:410px;width:600px;height:30px;"
  buttonShowType="3">
	<script ev:event="onchange(current,before)"
    type="javascript">
		<![CDATA[
 
        start = current;
        $p.executeSubmission("getMovies"); 
 
      ]]>
	</script>
</w2:pageList>

<xf:submission id="getMovies"
  ref="reqMovies" target="resMovies"
  action="" method="get" mediatype="text/xml"
  encoding="UTF-8" instance="" replace="instance"
  errorHandler="" customHandler=""
  mode="asynchronous" processMsg="조회중입니다.">
	<script type="javascript"
    ev:event="xforms-submit-done">
		<![CDATA[
      var totalCnt = WebSquare.ModelUtil
          .getInstanceValue('resMovies/rss/channel/total/@filmoTotal');
 
      if (totalSetYn != true) {
        var quotient = parseInt(totalCnt / display, 10);
        var remainderYn = (totalCnt % display) ? 1 : 0;
        var count = quotient + remainderYn;
        pageList1.setCount(count);
        totalSetYn = true;
      }
 
      var dataCnt = WebSquare.ModelUtil
          .getInstanceValue('resMovies/rss/channel/total/@filmoDisplay');
      if (dataCnt != 0) {
        var item = WebSquare.ModelUtil
            .findInstanceNode("resMovies/rss/channel/item");
        grid1.setXML(item);
      }        
  ]]>
	</script>
	<script type="javascript"
    ev:event="xforms-submit">
		<![CDATA[
 
      var sub = WebSquare.ModelUtil.getSubmission( "getMovies" );
      sub.action = "/developGuide/getPagingData.jsp?start="
    + start + "&display=" + display;
 
  ]]>
	</script>
</xf:submission>

무한 그리드

<w2:grid baseNode="item"
  repeatNode="filmo" id="grid1"
  style="position: absolute ;left:0px;top:0px;width: 600px;height: 340px;"
  valueNode="" sortable="true" resize="true"
  readOnlyBackgroundColor="#D9E6F3"
  readOnly="false" hideHeader="false"
  rowNumVisible="true"
  rowNumHeaderValue="No."
  rowStatusVisible="false"
  rowStatusHeaderValue="상태" fixedColumn="2"
  focusMode="both" focusMove="true"
  keyMoveEditMode="true" editModeEvent="ondblclick"
  enterKeyMove="down" tooltipDisplay="true"
  oddEvenColorDisplay="false" loadCount="1">
  ...
 
  <script type="javascript"
    ev:event="onscrollend"><![CDATA[ 
    start++;
    $p.executeSubmission("getMovies");	
   ]]></script>
</w2:grid>

<xf:submission id="getMovies"
  ref="reqMovies" target="resMovies"
  action="" method="get" mediatype="text/xml"
  encoding="UTF-8" instance="" replace="instance"
  errorHandler="" customHandler=""
  mode="asynchronous" processMsg="조회중입니다.">
  <script type="javascript"
    ev:event="xforms-submit-done"><![CDATA[
      var totalCnt = WebSquare.ModelUtil
          .getInstanceValue('resMovies/rss/channel/total/@filmoTotal');
      if (totalSetYn != true) {
        output2.setValue(totalCnt);
        totalSetYn = true;
      }
 
      var dataCnt = WebSquare.ModelUtil
          .getInstanceValue('resMovies/rss/channel/total/@filmoDisplay');
      if (dataCnt != 0) {
 
        var item = WebSquare.ModelUtil
            .findInstanceNode("resMovies/rss/channel/item");
        grid1.setXML(item, true);
        output1.setValue(grid1.getRowCount());
      }
	]]></script>
  <script type="javascript"
    ev:event="xforms-submit"><![CDATA[
 
    var sub = WebSquare.ModelUtil.getSubmission( "getMovies" );
    sub.action = "/developGuide/getPagingData.jsp?start="
    +start+"&display="+display ;
 
  ]]></script>
</xf:submission>

읽기 전용

readOnly 속성을 통해 특정 열을 읽기 전용으로 설정할 수 있습니다. 행, 열, 셀에 대한 읽기 전용 설정은 API를 통해서도 가능합니다. readOnly 설정은 그리드 전체, 행, 열, 셀 별로 적용가능합니다.

읽기 전용 셀 선택

읽기 전용 설정 동적 적용 및 해제

setReadOnly() 함수를 사용하면 GridView 전체, 혹은 특정 컬럼, 행, 셀에 대해 readOnly 속성을 동적으로 설정하고 해제할 수 있습니다.

표 제목

관련 속성

captionAuto: 표 제목을 자동으로 생성할지 여부.

captionTitle: 표 제목을 자동으로 생성할 때 사용할 텍스트

$r_title(사용 예)
 captionTitle="표 제목" captionAuto="true"

헤더가 항목 1, 항목2, 항목 3인 세 개의 칼럼을 포함하고 위와 같은 설정을 갖는 GridView의 경우 "표 제목 은(는) 항목 1, 항목 2, 항목 3 을(를) 나타낸 표"라는 제목이 생성됩니다.

0. N/A

   kbd>CaptionTitle
   : 표 제목을 자동으로 생성할 때 사용할 텍스트

$r_title(표 제목 생성 결과)
<caption id="caption1" style="position:relative; top:100px;" value="this is a grid caption." class="setcaption">정보 테이블은(는) 정보 1,정보 2,정보 3 을(를) 나타낸 표</caption>

$r_title(표 제목 생성 결과)
<caption id="caption1" style="position:relative; top:100px;" value="this is a grid caption." class="setcaption">정보 1,정보 2,정보 3 을(를) 나타낸 표</caption>

GridView에 titleAuto="true" 설정할 경우, 헤더의 inputType="text"인 컬럼의 각 셀의 <td>에 title 속성을 자동으로 생성할 수 있습니다.

inputType="text" / "link" / "button"

inputType="check" / "radio"

inputType="select"

툴팁

툴팁 표시하기

Body

아래 속성을 지정하여 GridView의 Body에 툴팁을 표시할 수 있습니다.

• Body

  • tooltipDisplay : 툴팁을 표시.

  • tooltipShowAlways : 텍스트 잘림에 상관 없이 툴팁을 항상 표시.

Header

아래 속성을 지정하여 GridView의 Header에 툴팁을 표시할 수 있습니다.

• Header

  • tooltipHeader : 툴팁을 표시.

  • tooltipHeaderShowAlways : 텍스트 잘림에 상관 없이 툴팁을 항상 표시.

  • tooltip : 툴팁으로 표시할 텍스트.

툴팁을 표시하지 않을 컬럼의 inputType 지정

헤더 숨기기

화폐 표시

금액을 표시하는 경우, 각 컬럼 별로 금액 표시 방법 및 화폐 단위를 동적으로 설정할 수 있습니다.

관련 API

changeCurrency: 화폐 단위 별 표시 방법 지정

euroMask, rupeeMask, tengeMask: 각 화페 별 금액 표시 방법

• changeCurrency (columnID, dataType, displayFormat, delimiter, decimalDelimiter, customModelFormatter, customModelUnFormatter)

  • columnID : 화폐 단위를 적용할 컬럼 ID

  • dataType : 적용할 화폐 단위

  • displayFormat : 칼럼에 적용할 포맷

  • delimiter : 통화 구분자

  • decimalDelimiter : 통화 소수 구분자

  • customModelFormatter : GridView와 바인딩된 DataList에 값이 저장되기 전에 실행되는 사용자 정의 함수.

  • customModelUnFormatter : GridView와 바인딩된 DataList에 값을 읽어올 때 값을 반환하기 전에 실행되는 사용자 정의 함수.

$r_title(사용 예 (1))
...
gridView1.changeCurrency("col1", "euro");

gridView1.changeCurrency("col2", "number");
gridView2.changeCurrency("col3", "rupee", "##,##,###.00");
gridView2.changeCurrency("col4", "tenge", "# ###-00");
...

<w2:gridView id="gridView1"
euroMask="#.###,00" numberMask="#,###.00"
...
</w2:gridView>

<w2:gridView id="gridView2"
...
</w2:gridView>

$r_title(사용 예 (2))
scwin.inputCustomFormat = function(realData, formattedData) {
  return realData.replace(",", ".");
};

scwin.inputCustomUnFormat = function(realData, formattedData) {
  return realData.replace(".", ",");
};

scwin.trigger1_onclick = function(e) {
  var info = {
    colID: "col1",
    type: "euro",
    format: "#.###,00",
    customModelFormatter: "scwin.inputCustomFormat",
    customModelUnformatter: "scwin.inputCustomUnFormat"
  }
  gridView1.changeCurrency(info);
};

맵핑

각 컬럼의 데이터를 서로 다른 컴포넌트와 맵핑할 수 있습니다. 즉, GridView의 특정 행을 선택할 경우, 해당 행 각 컬럼의 값을 서로 다른 컴포넌트에 표시할 수 있습니다.

컨텍스트 메뉴

컨텍스트 메뉴 표시 (바디)

contextMenu="true" 설정을 추가할 경우, GridView를 우클릭하면 컨텍스트 메뉴가 표시됩니다.

컨텍스트 메뉴 표시 (헤더)

contextMenu="true" 설정만 사용하면 GridView의 바디에 있는 셀을 우클릭할 때만 컨텍스트 메뉴가 표시됩니다. 헤더의 셀을 우클릭해도 컨텍스트 메뉴를 표시하려면 useHeaderContextMenu="true" 속성을 추가하십시오.

Alt 키 + 마우스 좌클릭을 통한 컨텍스트 메뉴 표시

contextMenuAltClick=“true” 설정을 추가할 경우, Alt 키 + 마우스 좌클릭을 통해 GridView의 컨텍스트 메뉴를 표시할 수 있습니다.

컨텍스트 메뉴를 통한 컬럼 폭 조정

컨텍스트 메뉴를 사용하여 autoFit 속성을 사용할 때와 마찬가지로 GridView 컬럼의 너비를 자동으로 조절할 수 있습니다.

GridView 높이

초기 height 값 설정

visibleRowNumFix=“true” 설정을 추가할 경우, visibleRowNum 속성 설정에 따라 GridView의 높이를 설정할 수 있습니다.

그리기

GridView 상태(스타일) 확인 및 적용

getCurrentGridStyle() 함수를 사용하면 (컬럼 순서, 컬럼 길이, 숨겨진 컬럼, 고정된 컬럼 등과 같은) 현재 GridView의 상태를 XML 문자열 형태로 반환할 수 있습니다. 또한 setGridStyle() 함수를 사용하면 GridView의 특정 상태를 지정하여 해당 상태로 GridView를 다시 그릴 수 있습니다.

1. GridView를 그립니다.

2. 컨텍스트 메뉴를 사용하여 GridView 컬럼을 숨기고 정렬을 수행하여 GridView의 상태를 변경합니다.

3. getCurrentGridStyle() 함수를 사용하여 현재 GridView 상태를 로컬에 저장하십시오.

$r_title(사용 예 (현재 GridView 상태를 로컬에 저장))
var gridStyle = gridView1.getCurrentGridStyle();
$p.local.setItem("gridStyle", gridStyle);

4. 화면 재로딩 등을 통해 GridView를 초기화합니다.

5. setGridStyle() 함수를 사용하여 앞의 3단계에서 저장한 GridView 상태를 불러와 이를 초기화된 GridView에 적용합니다.

$r_title(사용 예 (로컬에 저장한 GridView의 상태로 GridView를 다시 그리기))
var gridStyle = $p.local.getItem("gridStyle");
gridView1.setGridStyle(gridStyle);

렌더링 방법 (drawType)

drawType 속성을 사용하여 GridView를 그리는 방법을 결정할 수 있습니다. "virtual"은 화면에 보이는 부분만 그리고, "native"는 전체 GridView를 그립니다.

모바일

Press 이벤트 지원

hammerEnabled="true" 설정을 추가할 경우, 모바일 환경에서의 Press 이벤트를 PC에서의 셀 더블 클릭 이벤트와 동일하게 처리할 수 있습니다. Press 이벤트로 인식되기 위해 필요한 셀 누르기(Press) 시간은 hammerPressTime 속성으로 지정하십시오.