다중 열 헤더가 있는 jQuery 그리드

열과 레이아웃의 매우 간단한(그리고 논리적인) 설정을 통해 이 기능을 사용하면 공통 부모 아래에 있는 열 헤더를 시각적이고 때로는 기능적으로 그룹화할 수 있습니다.

그 자체로는 대부분 시각적인 것일 수 있지만 Ignite UI Grid 및 Hierarchical Grid의 다른 부분/모듈이 이를 인식하므로 정말 흥미로운 상호 작용이 있을 수 있습니다. 이것들은 실제 위젯 코드의 일부가 아닐 수도 있지만 다른 기능을 사용하는 동안 열 헤더를 그룹화하는 부산물입니다. 그리고 아래에서는 한 곳에서 참조 할 수 있도록 몇 가지 기능 이름을 더 던질 것입니다.

Quick Start

어쨌든 당신은 어딘가에서 시작해야하며, 당신이 나와 같고 기능을 확인하기 위해 API로 바로 이동한다면 약간의 충격을 받게 될 것입니다. 현재 Multi-Column Headers 위젯은 실제로 많은 것을 제공하지 않습니다. 그렇다면 어떻게 설정합니까? 글쎄, 당신이 위젯 자체를 켜기 / 끄기 스위치로 사용하기 시작하고 (정확히 그것이하는 일) 열 정의가 항상 있던 곳에 있을 때 모든 것이 매우 합리적이 됩니다.. 칼럼 컬렉션에! 'group'속성에 할당 된 컬렉션이있는 컬렉션을 간단히 추가 할 수 있습니다. 내부에는 그룹 등이 있는 더 많은 열을 가질 수 있습니다 – 이 기능은 사실상 무제한의 중첩 헤더를 허용해야 합니다. 그런 다음 키 및 행 범위와 같은 몇 가지 추가 속성도 있습니다. ASP.NET MVC Helper가 있는 부분 스니펫(중요한 줄은 5와 6임):

@(Html.Infragistics().Grid<MultiColumnHeaders.Models.Department>()
    .Columns(column =>
    {
        column.For(x => x.DepartmentID).HeaderText("DEP Id");
        column.MultiColumnHeader("Dep").HeaderText("Dep")
            .Group(innerColumn =>
            {
                innerColumn.For(x => x.Name).HeaderText("Name");
                innerColumn.For(x => x.GroupName).HeaderText("GroupName");
            });
    })
    //...

그리고 그것은 스크립트에서 간단합니다 (9 행).

$('#grid').igHierarchicalGrid({
    columns: [{
        key: 'DepartmentID',
        dataType: 'number',
        headerText: 'DEP Id'
    }, {
        key: 'Dep',
        headerText: 'Dep',
        group: [{
            key: 'Name',
            dataType: 'string',
            headerText: 'Name'
        }, {
            key: 'GroupName',
            dataType: 'string',
            headerText: 'GroupName'
        }]
    }],
    //..

위의 레이아웃이 작동하려면 해당 컬렉션에 "MultiColumnHeaders" 기능을 추가하기만 하면 됩니다.

//....
.Features(feature => feature.MultiColumnHeaders().Inherit(true))
//  ---- OR -----
 features: [{
            name: 'MultiColumnHeaders'
        }],
//...

Hierarchical Grid와 관련하여 평소와 같이 두 가지 옵션이 있습니다 – 부모의 컬렉션에서 기능을 정의하고 상속을 허용하거나 특정 레이아웃에 추가할 수 있습니다. 전반적으로 도움말에서 igGrid 다중 열 헤더 주제를 확인할 수 있으며 이미 상당히 자세한 가이드가 포함되어 있습니다. 또는 아래의 샘플 및 데모 섹션을 참조하고 예제🙂로 배울 수도 있습니다

그렇게 빠르진 않아!

먼저, 이 기능이 정확히 어떤 작업을 수행하는지 조금 이해해 보겠습니다: 그리드 테이블의 THEAD에서 마크업을 수정합니다. Multi-Column Headers 기능은 즉시 사용 가능한 정렬을 제공합니다 -예상할 수 있듯이 대부분의 부분은 실제 열 헤더를 정렬하는 완벽한 방법을 찾는 것과 관련이 있습니다 - "colspan "및 행 범위를 설정하며, 후자는 조정할 수 있습니다 (자세한 내용은 아래 참조). 실제로 필요한 유일한 설정은 그룹 컬렉션입니다. 글쎄, 나는 헤더 텍스트가 정말로 좋다고 생각하는데, 그렇지 않으면 'undefined'라는 헤더로 끝날 것이기 때문입니다.

그리고 열쇠도 있습니다. 일반적인 열 설정과 달리 이 경우 키는 데이터 속성에 해당하지 않습니다. 그렇다면 왜 필요할까요? 다중 열 헤더에 키 (식별자 역할도 함)를 할당하지 않으면 그리드가 자체적으로 제시하는 모든 것에 갇히게됩니다. 즉, 식별자가 생성되고(숫자 ID 증가) 항상 예상대로 할당되는 것은 아닙니다. 또한 여러 열 식별자 / 키를 허용하는 몇 가지 방법 (특히 Hiding 및 Moving 과 같은 열을 조작하는 API 사용)을 보았을 것입니다. 키가 없으면 때때로 이상한 동작이 발생할 수 있으므로 필요하다고 생각하는 것이 가장 좋습니다. 또한 쉬운 헤더 타겟팅의 기회를 놓치고 싶지 않습니다.

키를 정의할 때 헤더에는 매우 빠르고 쉬운 타겟팅에 사용할 수 있는 id-s(Ignite UI 그리드의 Id와 열의 조합)도 할당됩니다. 이렇게하면 "data-isheadercell"속성이 true로 설정된 데이터 바인딩 헤더와 일치하게됩니다.

선과 악의 줄은 뻗어 있습니다

'rowspan' 속성은 기본 테이블 셀 속성에 대한 직접 참조이지만 기능 자체는 행의 셀 정렬을 파악합니다(예상한 방식으로 셀을 확장하고 정렬하기 위해 행은 때때로 데이터 바인딩 헤더와 그룹 헤더를 모두 포함하게 됨). 그래서 바로 여기에 몇 가지 '잡았다'가 있습니다. 예를 들어, 아래의 경우(일부 열은 숨겨져 있고 다른 열은 찌그러져 샷에 맞을 수 있음)를 예로 들면, 원래 단일 행 범위에서 "레코드 정보" 그룹 헤더를 2로 설정하여 자식 열을 더 낮게 누르고 나머지와 정렬합니다.

모든 '실제' 헤더를 깔끔한 행에 정렬하려는 의도가 전체 헤더 테이블을 확대하는 결과를 낳은 것에 주목하십시오. 이렇게하면 마지막 두 개의 열 머리글이 깔끔한 행의 나머지 부분과 정렬되기 때문에 실제로 마크 업에서 동일한 테이블 행으로 끝났습니다. 그리고 그것들은 더 많은 텍스트로 약간 더 컸기 때문에 행이 확장되어 늘어남이 발생했습니다. 또한 공간을 차지할 다른 항목이 없거나 나머지를 수용할 공간이 충분하지 않은 열에 대해 행 범위를 정의하는 경우 왜곡된 레이아웃을 방지하기 위해 다른 곳에서 보정해야 할 수 있습니다. 일반적으로 그리드에 의존하여 이를 수행하는 것이 좋습니다.

API에 대한 추가 정보

​문서에서 자세히 언급 한 바와 같이 $(".selector").igGrid("option", "columns") 를 사용하여 igGrid 위젯 열 컬렉션을 얻는 것처럼 헤더와 해당 그룹을 가져 오기 위해 기능 자체의 getMultiColumnHeaders 를 사용해야합니다.

계층적 그리드와 유사한 경우이지만 다른 이유가 있습니다. 실제로 평소와 같이 열 옵션을 가져올 수 있으며 그룹 헤더와 그 자식이 포함되지만 헤더 계층 구조를 확인해야 하는 경우에만 유용합니다. col / row span, identifier 또는 level과 같은 추가 정보의 경우 getMultiColumnHeaders 메소드를 다시 사용해야합니다.

이상하게도 API가 누락 된 또 다른 방법이 있지만 문서에는 그렇지 않으며 언급하는 것이 좋다고 생각했습니다 - "renderMultiColumnHeader"라고하며 그리드 초기화를 위해 제공하는 것과 동일한 열 컬렉션을 사용합니다. 이를 통해 런타임에서 Multi-column 헤더의 배열을 변경하거나 아무 것도 없이 열을 정의할 수 있습니다 – 그리드 리바인딩 비용이 든다는 점을 명심하십시오. 사용법도 매우 간단합니다.

$('#Grid1').igGrid("renderMultiColumnHeader", [{
    key: 'DepartmentID',
    dataType: 'number',
    headerText: 'DEP Id'
}, {
    headerText: "Dep",
    group: [
    //...
    ]
}]);

API에서 일반적으로 볼 수 있는 다른 설정이 있습니다.이 설정은 설정할 수 있는 모든 열(ASP.NET MVC 도우미와 함께)에 대해 공유되지만 일반적으로 무시됩니다(템플릿, 포맷터 등은 그다지 의미가 없습니다). 몇 가지 방법이 있지만 여전히 적용되지 않습니다 (예 : width 속성). 다중 열 헤더의 너비는 그룹에 의해 결정되며 너비를 정의하려면 하위 열에 설정하기만 하면 됩니다.

Styling

이 기능은 CSS로 대상으로 할 수 있는 헤더에 단일 특정 클래스("ui-iggrid-multiheader-cell")를 적용합니다. 이를 통해 특정 스타일이 그룹 헤더를 나머지 스타일과 구별 할 수 있으며, 이는 기본 Infragistics 테마에 필요하다고 생각합니다. 당신은 정말로 무엇이든 할 수 있지만, 나는 미묘한 밑줄이 다음과 같은 스타일로 아주 잘 할 것이라고 결정했습니다 (나는 현대 UI 테마에서 완전히 훔쳤습니다!).

.ui-iggrid th.ui-iggrid-multiheader-cell {
    border-bottom-color: #2cbdf9;
    border-bottom-width: 1px;
}

당신은 이와 비슷한 것을 얻습니다. 더 많은 그룹이있는 경우 몇 가지 가상 클래스를 사용하여 스타일을 대체 할 수도 있습니다.이 작업은 샘플에서도 수행했으므로 아래에서 확인하십시오.

기능 상호 작용

지난 블로그에서 이미 언급했듯이 Column Moving은 다중 헤더와 잘 어울립니다. 그리고 상상할 수 있듯이 모든 자식을 한 번에 이동하기 위해 부모 헤더를 드래그할 수도 있습니다. 그렇다면 또 어떤 흥미로운 점이 있을까요?

​숨기기 기능을 사용하면 헤더에 전체 그룹을 숨기는 데 사용할 수 있는 멋진 아이콘이 표시되고 모든 중첩 열이 숨겨져 있으면 부모가 사라집니다. 또한 열의 'hidden'속성을 설정하여 기본적으로 숨길 수 있으며 해당 부분에는 해당 기능이 필요하지 않습니다 (그러나 열을 표시하지 않는 UI 및 상호 작용이 부족합니다).

열 작업을 수행하는 두 기능의 API 메서드는 키 대신 다중 열 헤더 식별자도 허용합니다.

​크기를 조정할 때 사용자는 개별 열 또는 그룹 헤더와 상호 작용할 수 있으며 둘 다 만족스러운 반응을 얻을 수 있습니다 - 중첩 된 열의 크기를 조정하면 부모의 너비가 수정되고 그 반대의 경우도 마찬가지입니다.

UI 측면에서 Hiding과 Column Moving은 블로그의 맨 위 이미지에서 볼 수 있듯이 상호 작용을 위한 고유한 헤더 아이콘을 생성합니다. 단일 톱니바퀴 아이콘에 추가 기능을 누적하는 데이터 바인딩된 열과 달리, 그룹 열은 위의 두 개 이상을 지원하지 않으므로 기능 선택기를 얻지 못합니다! 대량 수행하기에 적합한 더 많은 기능이 그리드에 추가됨에 따라 변경될 수 있습니다(*힌트 힌트*도 곧 발생할 수 있음).

몇 가지 생각을 듣고 싶으니 아래에 댓글을 남겨주세요 또는@DamyanPetev.

그리고 언제나처럼 Twitter에서 저희를 팔로우할 수 있습니다@ Infragistics그리고 계속 연락하세요페이스북,구글+그리고링크드인!