SPAN

기본적인 컬럼 그룹핑은 컬럼 레이아웃으로 구현할 수 있습니다. 그러나 아래 데모와 같이 각 컬럼간 끝나는 경계가 다른 경우는 약간 다른 방법이 필요 합니다.

구현 방법은 각 컬럼 그룹간 최소공배수를 구하고, 구한 최소 공배수를 컬럼 수에 맞게 나눠서 처리해야 합니다. 아래의 예제를 보면 첫번째 컬럼그룹의 컬럼수 2, 두번째 컬럼그룹의 컬럼수는 3 입니다. 2, 3의 최소 공배수는 6입니다. 그렇기에 첫번째 컬럼그룹의 컬럼수는 2, 그렇기에 첫번째 그룹의 각 컬럼은 3개의 cellSpan을 가지게 됩니다.

var layout_Org = [
  {
    name: "companyGroup",
    direction: "vertical",
    items: [
        {
            
            items: [
                {
                    column: "Country",
                    cellSpan: 3,
                    width: 50
                },
                50,50,
                {
                    column: "CompanyName",
                    cellSpan: 3,
                    width: 50
                },
                50,50,
            ],
            header: false
        },
        {
            items: [
                {
                    column: "CustomerID",
                    cellSpan: 2,
                    width: 50
                },
                50,
                {
                    column: "OrderDate", 
                    cellSpan: 2,
                    width: 50
                },
                50,
                {
                    column: "OrderID", 
                    cellSpan: 2,
                    width: 50
                },
                50,
            ],
            header: false
        }
    ]
    }
];

gridView.setColumnLayout(layout_Org);

이러한 레이아웃을 조금 편하게 만들수 있는 function()은 아래와 같습니다.

function getMultiLevelColumns (colNames) {
        "use strict";

        function leastCommonMultiple(arr) {
                var result = lcm(arr[0], arr[1]);

                for (var i = 2; i < arr.length; i++) {
                        result = lcm(result, arr[i]);
                }

                return result;
        };

        function gcd(a, b) {
                while (b != 0) {
                        var temp = a % b;
                        a = b;
                        b = temp;
                }

                return a;
        };

        function lcm(a, b) {
                return a * b / gcd(a, b);
        };

        //var arrLen = colNames.map(x => x.length); //각 배열의 길이
        var arrLen = colNames.map(function (x) { return x.length }); //각 배열의 길이
        var lcmValue = leastCommonMultiple(arrLen); //최소공배수 

        var parentGrpColObj = {}
        parentGrpColObj.direction = "vertical";
        parentGrpColObj.items = [];
        parentGrpColObj.header = { visible: false };

        for (var i = 0; i < colNames.length; i++) {
                var grpColObj = {};
                grpColObj.direction = "horizontal";
                grpColObj.items = [];
                grpColObj.header = {visible: false};

                for (var j = 0; j < colNames[i].length ; j++) {
                        var cellSpan = lcmValue / colNames[i].length;;
                        var column = {};

                        column.column = colNames[i][j];
                        column.cellSpan = cellSpan;
                        column.width = 50;

                        grpColObj.items.push(column);
                        for (var k = 0; k < cellSpan - 1; k++) {
                                grpColObj.items.push(50);
                        }
                }
                parentGrpColObj.items.push(grpColObj);
        }
        
        return [parentGrpColObj];
}

//그룹별로 컬럼명을 array로 전달
var layout = getMultiLevelColumns([["Country", "CompanyName"], ["CustomerID", "OrderDate", "OrderID"]]);
gridView.setColumnLayout(layout);

컬럼너비 자동조절과 한줄로 보기

• 그리드안에 컬럼이 채워지고 남는 영역이 있는 경우 컬럼의 크기를 키워 빈 영역을 채울 수 있습니다. 자세한 내용은 컬럼 너비 자동 조정데모에서 확인하세요.

• 컬럼 레이아웃으로 구성된 그리드를 한 줄로 표시하고 싶은 경우 gridView.linearizeColumns()으로 간단하게 구현할 수 있습니다.

function fitStyle() {
  gridView.displayOptions.fitStyle = "even";
}

function linearizeColumns() {
  gridView.linearizeColumns();
}

function setColumnlayout() {
  gridView.setColumnLayout(layout);
}