FAQ

그리드에서 페이징을 구현할 수 있는 방식은 두가지가 있습니다.

1. 페이지를 누를 때 마다 setDataURLEx 함수를 이용하여 데이터를 가져오는 방식

지금 샘플 보기

2. PagingCollection을 이용하여 전체 데이터를 한꺼번에 가져와 페이지를 구현하는 방식

<BIX5>
    <DataGrid id="dg1" verticalAlign="middle" sortableColumns="true" textAlign="center">
        <columns>
           ...
        </columns>
        <dataProvider>
	<!-- rowsPerPage: 1페이지에서 보여줄 레코드 수.(기본값 20) -->
            <PagingCollection rowsPerPage="25" source="{$gridData}"/>
        </dataProvider>
    </DataGrid>
</BIX5>

지금 샘플 보기

숫자에 천단위 콤마표시를 하려면 NumberFormatter의 useThousandsSeparator를 이용하 천단위 콤마를 표시하려는 곳에 formatter를 적용하면 표시할 수 있습니다.

예시)

<BIX5>
<!-- useThousandsSeparator true이면 천단위 구분 기호를 사용 (true,false중 택일, 기본 true) -->
    <NumberFormatter id="numfmt" useThousandsSeparator="true"/>
    <DataGrid id="dg1" horizontalScrollPolicy="auto" verticalAlign="middle">
        <columns>
	<!-- 적용하려는 컬럼에 formatter적용-->
            <DataGridColumn dataField="Seoul" textAlign="right" formatter="{numfmt}"/>
        </columns>
    </DataGrid>
</BIX5>

위 예제는 데모 사이트에서 확인하실 수 있습니다.

지금 샘플 보기

그리드는 Javascript를 이용한 편집, 직접 편집, 팝업편집, 다중라인 편집 등 다양한 입력방식을 제공하고 있습니다.

그 중 셀에 직접 편집하는 것은 DataGrid의 editable 속성을 통해 지정가능하고 각 컬럼별로 편집 여부를 제어할 수 있습니다. 

편집모드는 더블클릭(설정을 통해 클릭으로도 가능) 혹은 F2 키로 , enter키로 다음행, tab키로 다음셀, shift 키와 함께 이전행, 이전셀로 이동하게 됩니다. 컬럼에 editable 속성을 false로 주면 해당 컬럼은 편집이 되지 않습니다.

예제)

<BIX5>
    <!-- 편집 모드를 사용하기 위해 editable 속성을 true로 지정 -->
    <DataGrid editable="true" doubleClickEnabled="true">
        <columns>
	    <!-- 해당 컬럼이 편집되지 않도록 editable 속성을 false  -->
            <DataGridColumn dataField="Region" editable="false" backgroundColor="#EFEFEF"/>
            <DataGridColumn dataField="Territory" width="150"/>
        </columns>
    </DataGrid>
</BIX5>

※ 여러 셀이 동시에 편집모드가 되는 것은 HTML 특성 상 불가능 합니다.

위 예제는 데모 사이트에서 확인하실 수 있습니다.

지금 샘플 보기

특정 row만 수정 불가하게 하려면 DataGrid의 itemEditBeginningJsFunction을 이용하시면 조건에 따라 편집가능 여부를 제어할 수 있습니다. 

레이아웃

<BIX5>
    <NumberFormatter id="numfmt" useThousandsSeparator="true"/>
    <DataGrid id="dg1" editable="true" doubleClickEnabled="true" itemEditBeginningJsFunction="itemEditBeginningFunction">
        <columns>
            ...
            <DataGridColumn dataField="CC"/>
            ...
        </columns>
    </DataGrid>
</BIX5>

// itemEditBeginningJsFunction 기능을 이용하여 에티팅시 편집 가능여부를 제어할 수 있습니다.
// 	rowIndex: 해당 행의 index번호
// 	columnIndex: 해당 열의 index번호
//	item: 해당 행의 data 객체
//	dataField: 필드명
// false를 반환할 경우 에디팅 불가이며, true를 반환할 경우 에디팅이 가능합니다.
function itemEditBeginningFunction(rowIndex, columnIndex, item, dataField) {
	if (columnIndex <= 1)
		return false;
	if (item.CC == "Jim")
		return false;
	return true;
}

위 예제는 데모 사이트에서 확인하실 수 있습니다.

지금 샘플 보기

셀에 콤보박스 추가는 ItemEditor의 ComboBoxEditor 또는 itemRenderer의 ComboBoxItemRenderer를 통하여 추가할 수 있습니다. ComboBoxEditor는 편집모드 진입시 콤보박스가 보이고 ComboBoxItemRenderer는 편집모드 진입 없이 콤보박스가 보인다는 차이가 있습니다.

ComboBoxEditor

<BIX5>
    <DataGrid id="dg1" editable="true" doubleClickEnabled="true">
        <columns>
          ...
            <DataGridColumn dataField="Subject" width="150" fontWeight="bold" itemEditor="ComboBoxEditor" 
                            editorDataField="selectedDataField" itemRendererDataField="code" 
                            itemRenderer="DataProviderItem" 
                            itemRendererDataProvider="[{'label':'GMC-1 R1','code':'GMC-1 Release1'},
                                                        {'label':'GMC-1 R2','code':'GMC-1 Release2'}, 
                                                        {'label':'GMC-1 R3','code':'GMC-1 Release3'}]"/>
	...
        </columns>
    </DataGrid>
</BIX5>

지금 샘플 보기

ComboBoxItemRenderer

<BIX5>
    <DataGrid id="dg1" editable="true" doubleClickEnabled="false">
        <columns>
            ...
            <DataGridColumn dataField="Subject" itemRenderer="ComboBoxItem" rendererIsEditor="true" 
                 itemRendererDataProvider="[{'label':'GMC-1 Release1'},{'label':'GMC-1 Release2'},{'label':'GMC-1 Release3'}]"/>
            <DataGridColumn dataField="ReceiveDate" headerRenderer="ComboBoxHeader" 
                 headerRendererDataProvider="[{'label':'2013년'},{'label':'2014년'}]"/>
            ...
        </columns>
    </DataGrid>
</BIX5>

지금 샘플 보기

그리드 내에서 체크박스 선택 여부 값을 얻을 때 true/false가 아닌 다른 값을 받으려면 체크박스 아이템 렌더러를 사용하는 DataGridColumn에 trueValue, falseValue 속성을 사용하여 값을 지정할 수 있습니다.

레이아웃

<BIX5>
    <!--
    doubleClickEnabled은 반드시 false로 설정되어야 합니다.
    itemRenderer속성에 체크박스 렌더러를 설정합니다.
    rendererIsEditor속성을 true로 설정합니다.
    -->
    <DataGrid id="dg1" editable="true" doubleClickEnabled="false">
        <columns>
           <DataGridColumn dataField="Selected" headerText="" itemRenderer="CheckBoxItem" rendererIsEditor="true"
           editorDataField="selected" width="40" textAlign="center" backgroundColor="#EDEDF0" 
            trueValue="Y" falseValue="N"/>
        </columns>
    </DataGrid>
</BIX5>

BIX5 그리드는 sparkLine, sparkColumn, sparkWinLoss의 총 3가지 종류의 스파크 차트를 지원하고 있습니다. DataGridSparkColumn에 itemRenderer 속성에 따라 결정되며 유효값은 SparkColumn, SparkLine, SparkWinLoss입니다. 

예시

<BIX5>
    <DataGrid>
        <columns>
        ...
            <DataGridSparkColumn dataFields="Y2004,Y2005,Y2006" headerText="Spark Line" … itemRenderer=”sparkColumn” />
        ...
        </columns>
    </DataGrid>
</BIX5>

위 예제는 데모 사이트에서 확인하실 수 있습니다.

지금 샘플 보기

그리드의 컬럼 지정 기능을 이용하여 엑셀 export 시 보여지는 컬럼을 지정할 수 있습니다.

dataGrid.exportColumns = [0,1,2,3,4,5,9,10]와 같은 방법으로 사용하시면 됩니다.

컬럼 지정에 의해 export되는 컬럼은 visible이 false여도 숨기기로 처리되지 않습니다.

스크립트

function gridReadyHandler(id) {
	// BIX5Grid 관련 객체
	gridApp = document.getElementById(id);	// 그리드를 포함하는 div 객체
	gridRoot = gridApp.getRoot();	// 데이터와 그리드를 포함하는 객체

	gridApp.setLayout(layoutStr);
	gridApp.setData(gridData);

	var layoutCompleteHandler = function(event) {
		dataGrid = gridRoot.getDataGrid();	// 그리드 객체
	}

	gridRoot.addEventListener("layoutComplete", layoutCompleteHandler);
}

var gridApp, gridRoot, dataGrid;

// 엑셀 export
function excelExport() {
	// export할 컬럼을 지정합니다. - 컬럼의 번호를 배열로 지정
	dataGrid.exportColumns = [0,1,2,3,4,5,9,10];

	// excel 파일 종류 지정
	for (var i = 0; i < inputForm.export_type.length; i++) {
		if (inputForm.export_type[i].checked) {
			dataGrid.exportType = inputForm.export_type[i].value;
			break;
		}
	}
	dataGrid.exportFileName = "export." + dataGrid.exportType;

	// 엑셀 exportSave
	// excelExportSave(url:String, async:Boolean);
	//    url : 업로드할 서버의 url, 기본값 null
	//    async : 비동기 모드로 수행여부, 기본값 false
	gridRoot.excelExportSave("http://demo.bix5.net/SDK/Samples/Grid/ServerSamples/saveExcel.jsp", false);
}

위 예제는 데모 사이트에서 확인하실 수 있습니다.

지금 샘플 보기

그리드에서 붙여넣기할 때 넣어지는 값에 대해 변형을 하고자 할 경우에는 pasteParseJsFunction 기능을 이용하여 값을 조정하실 수 있습니다. 

레이아웃

<BIX5>
    <DataGrid id="dg1" editable="true" doubleClickEnabled="true" pasteEnabled="true" 
                pasteParseJsFunction="pasteParseFunction">
        <columns>
            <DataGridColumn dataField="Region"/>
            <DataGridColumn dataField="Territory" width="150"/>
            <DataGridColumn dataField="Territory_Rep" headerText="Territory Rep" width="150"/>
            <DataGridColumn dataField="Actual" textAlign="right"/>
            <DataGridColumn dataField="Estimate" textAlign="right"/>
            <DataGridColumn dataField="Real" textAlign="right"/>
            <DataGridColumn dataField="Price" textAlign="right"/>
        </columns>
    </DataGrid>
</BIX5>

// pasteParseJsFunction 기능을 이용하여 붙여넣기하는 셀의 값을 받아 편집하실 수 있습니다.
// parsedValue: 붙여넣기할 필드의 값
// parsedObj: 붙여넣기할 행 data 객체
// item: 붙여넣기 할 행의 원본 data 객체
// column: 붙여넣기할 컬럼
// 반환되는 값으로 해당 필드의 값이 적용됩니다.

function pasteParseFunction(parsedValue, parsedObj, item, column) {
    //여기서 붙여지는 텍스트에 대한 변형을 함
	if (column.getDataField() == "Territory")
		return parsedValue + "-1";
	else
		return parsedValue;
}

위 예제는 데모 사이트에서 확인하실 수 있습니다.

지금 샘플 보기

계층형 데이터인 경우 BIX5그리드에서는 폴더 형식으로 표현이 가능합니다. XML 데이터 또는 JSON데이터로 표현 가능하고, XML데이터는 dataProvider는 HierarchicalData, JSON 데이터는 SpanHierarchicalData를 사용합니다. 

XML 계층형 데이터 레이아웃 예시

<BIX5>
    <DataGrid id="dg1" displayItemsExpanded="false">
        <columns> 
            <!--    XML의 attribute로 있는 자료를 필드에 넣을 경우에는 attribute명 앞에 @를 붙여서 넣어줍니다 -->
            <DataGridColumn id="dg1col1" dataField="@Year" textAlign="center" headerText="Year"/>
	    ...
        </columns>
        <dataProvider>
    <!-- 그리드의 자료를 일반 dataProvider가 아닌 별도의 컴포넌트에 입력해야 할 경우 아래와 같이 source에 $gridData를 넣어줍니다 -->
            <HierarchicalData source="{$gridData}"/>
        </dataProvider>
    </DataGrid>
</BIX5>

<BIX5>
    <DataGrid id="dg1" displayItemsExpanded="false">
        <columns> 
            <DataGridColumn id="dg1col1" dataField="Year" textAlign="center" headerText="Year"/>
	    ...
        </columns>
        <dataProvider>
    <!-- 그리드의 자료를 일반 dataProvider가 아닌 별도의 컴포넌트에 입력해야 할 경우 아래와 같이 source에 $gridData를 넣어줍니다 -->
            <SpanHierarchicalData source="{$gridData}"/>
        </dataProvider>
    </DataGrid>
</BIX5>

위 예제는 데모 사이트에서 확인하실 수 있습니다.

지금 샘플 보기

많은 양의 데이터를 그리드에 출력하는 경우 CSV를 사용하면 필드명이 없으므로 가장 빠르게 파싱이 가능해집니다. 또한 스크롤 속도가 문제가 되는 경우 DataGrid의 liveScrolling 속성을 false로 주시면 마우스 조작이 완료된 후 스크롤 위치가 이동하도록 설정하여 이를 해결하실 수 있습니다.

스크립트 ( 데이터타입을 fastCsv로 사용한 예시 )

fastCsv : CSV 형식으로 파싱하며, 필드 데이터에 '"',',',' ' 가 포함되지 않아 레코드 구분은 ' ', 필드 구분은 ','로만 분리가 가능할 경우 사용합니다.

// ----------------------- 그리드 설정 시작 -------------------------------------

// BIX5에서 그리드 생성 준비가 완료될 경우 호출할 함수를 지정합니다.
var jsVars = "BIX5OnLoadCallFunction=gridReadyHandler";

jsVars += "&dataType=fastCsv";

BIX5.grid.create("grid1", "gridHolder", jsVars, "100%", "100%");

function gridReadyHandler(id) {
	// BIX5Grid 관련 객체
	gridApp = document.getElementById(id);	// 그리드를 포함하는 div 객체
	gridRoot = gridApp.getRoot();	// 데이터와 그리드를 포함하는 객체

	gridApp.setLayout(layoutStr);
	gridApp.setDataURLEx(gridDataURL);
}

var gridApp, gridRoot;

레이아웃 (liveScrolling 미적용하여 마우스 조작이 완료된 후 스크롤 위치가 이동하도록 설정) 

<BIX5>
<!-- showScrollTips 마우스의 thumb 움직임에 따라 툴팁을 보여줄지 여부 (true,false중 택일, 기본 true) -->
    <DataGrid id="dg1" showScrollTips="true" selectionMode="singleRow" liveScrolling="false">
        <columns>
            <DataGridColumn dataField="F0" headerText="종목코드" width="150"/>
            <DataGridColumn dataField="F1" headerText="SEQ" width="50"/>
	...
        </columns>
    </DataGrid>
</BIX5>