• 검색

이번 포스팅에서는 드롭다운에 다중 선택 TreeView 를 표시하는 DropDownTree 컨트롤 의 구현에 대해 알아봅시다.

DropDownTree 데모 확인

컨트롤이 준비되면 다음과 같이 보여집니다.

이를 위해,  두 개의 개별 Wijmo 모듈 ( input 및 nav)의 기능을 사용합니다 .

기본 클래스 선택

드롭다운(DropDown) 컨트롤을 확장하여 개발합니다. 드롭 다운 컨트롤은 콤보박스(Combobox) , InputColor 및 InputDate 컨트롤를 기본 클래스로서 사용합니다.

객체 모델 정의

DropDownTree 컨트롤은 드롭다운(DropDown)에서 TreeView를 호스팅하기 때문에 DropDownTree에서 TreeView 컨트롤의 주요 속성을 직접 노출하기로 결정했습니다.

• treeView 는 드롭 다운에 표시된 TreeView 컨트롤에 대한 참조를 가져 옵니다 .
• itemsSource 는 TreeView 를 채우는 데 사용되는 객체 배열에 대한 참조를 가져 오거나 설정합니다 .
• displayMemberPath 는 항목의 시각적 표현으로 사용되는 속성 이름을 가져오거나 설정합니다 (기본값은 'header').
• childItemsPath 는 데이터 소스의 각 항목에 대한 자식 항목이 포함된 속성 이름을 가져오거나 설정합니다 (기본값은 'items').
• showCheckboxes 는 컨트롤이 각 항목에 확인란을 추가해야하는지 여부를 결정하는 값을 가져오거나 설정하므로 사용자가 여러 항목을 선택할 수 있습니다 (기본값은 true).

또한 현재 선택된 항목과 컨트롤 헤더에 표시되는 방법을 정의하기 위해 몇 가지 추가 속성 및 이벤트를 추가했습니다. 이러한 속성은 MultiSelect 컨트롤 에서 해당 속성을 미러링합니다 .

• checkedItems 는 현재 선택된 항목을 포함하는 배열을 가져오거나 설정합니다.
• checkedItemsChanged 는 CheckedItems 속성 값이 변경 될 때 발생하는 이벤트입니다 .
• maxHeaderItems 는 컨트롤 헤더에 표시할 선택된 항목의 최대 수입니다.
• headerFormat 은 컨트롤에 maxHeaderItems 이상의 항목이 선택된 경우, 헤더 내용을 만드는데 사용되는 형식 문자열을 가져 오거나 설정합니다 .
• headerFormatter 는 컨트롤 헤더에 표시되는 텍스트를 가져 오는 함수를 가져 오거나 설정합니다. 이는 maxHeaderItems 및 headerFormat 특성 의 설정을 대체합니다 .

컨트롤 구현

컨트롤을 기본 클래스의 확장으로 선언하여 시작하겠습니다.

namespace wijmo.input {
    export class DropDownTree extends DropDown {
    }
}

"extends DropDown"문은 컨트롤이 속성, 이벤트, 메서드 및 모든 내부(internal) / 개인(private) 멤버를 포함하여 기본 DropDown 클래스의 모든 기능을 상속하도록합니다 .

TreeView 만들기

다음으로 DropDown 클래스에서 _createDropDown 메서드를 재정 의하여 드롭다운에 표시될 TreeView 컨트롤을 만듭니다 .

TreeView 를 만드는 것 외에도 onIsDroppedDownChanged 메서드를 재정의하여 드롭다운이 열리고, 컨트롤에 포커스가있을 때 포커스를 트리로 전송합니다. 이를 통해 사용자는 키보드를 사용하여 트리를 탐색할 수 있습니다. 컨텐츠를 입력하여 항목을 검색하거나 스페이스를 눌러 항목을 확인하거나 커서 키를 사용하여 트리를 탐색할 수 있습니다.

namespace wijmo.input {
    export class DropDownTree extends DropDown {
        private _tree: wijmo.nav.TreeView;

        // create the drop-down element
        protected _createDropDown() {

            // create child TreeView control
            let lbHost = document.createElement('div');
            setCss(lbHost, {
                width: '100%',
                border: 'none'
            });
            this._tree = new wijmo.nav.TreeView(lbHost, {
                showCheckboxes: true
            });
        }

        // switch focus to the tree when the drop-down opens
        onIsDroppedDownChanged(e?: EventArgs) {
            if (this.containsFocus() && this.isDroppedDown) {
                this._tree.focus();
            }
            super.onIsDroppedDownChanged(e);
        }
    }
}

TreeView와 그 속성 노출

다음 단계는 TreeView 와 주요 속성을 노출하는 속성을 추가하는 것입니다 .

namespace wijmo.input {
    export class DropDownTree extends DropDown {
        private _tree: wijmo.nav.TreeView;

        get treeView(): wijmo.nav.TreeView {
            return this._tree;
        }
        get itemsSource(): any[] {
            return this._tree.itemsSource;
        }
        set itemsSource(value: any[]) {
            this._tree.itemsSource = value;
        }
        // same for displayMemberPath, childItemsPath, 
        // and showCheckboxes

        // create the drop-down element
        protected _createDropDown() {…}
    }
}

이러한 속성은 포함된 TreeView 에 해당 속성을 가져 오거나 설정하는 바로가기 기능입니다. 그렇기 떄문에 매우 간단합니다. TreeView 가 스스로 처리하기 때문에 유형 검사(type-checking)도 신경 쓸 필요가 없습니다.

checkedItems 속성

컨트롤의 기본 속성은 checkedItems 이며, 사용자의 현재 선택 항목으로 배열을 가져 오거나 설정합니다. 위와 같은 통과 속성으로 구현할 수 있지만, 이 경우 다중선택과 단일 선택 모두가 가능해야 함으로, showCheckboxes 속성 의 값을 확인 하고 트리의 checkedItems 또는 selectedItem 속성을 사용해야 합니다.

checkedItems 속성 외에도 checkedItemsChanged 이벤트 및 관련 메소드 onCheckedItemsChanged를 구현합니다 . 이는 Wijmo 이벤트의 표준 패턴입니다. 모든 이벤트에는 이벤트 발생을 담당 하는 해당 on 메소드가 있습니다.

namespace wijmo.input {
    export class DropDownTree extends DropDown {
        private _tree: wijmo.nav.TreeView;

        // TreeView pass-through properties…

        get checkedItems(): any[] {
            let tree = this._tree;
            if (tree.showCheckboxes) {
                return tree.checkedItems;
            } else {
                return tree.selectedItem
                   ? [tree.selectedItem] : [];
            }
        }
        set checkedItems(value: any[]) {
            let tree = this._tree;
            if (tree.showCheckboxes) {
                tree.checkedItems = asArray(value);
            } else {
                tree.selectedItem = isArray(value)
                    ? value[0] : value;
            }
        }

        readonly checkedItemsChanged = new Event();
        onCheckedItemsChanged(e?: EventArgs) {
            this.checkedItemsChanged.raise(this, e);
        }

        // create the drop-down element
        protected _createDropDown() {…}
    }
}

단일 선택의 경우에도 checkedItems 속성은 배열 (비어 있거나 단일 요소를 포함)을 반환합니다.

컨트롤 헤더 업데이트

maxHeaderItems , headerFormat 또는 headerFormatter 속성 의 구현에 대해서는 간단하지 않습니다 . 흥미로운 논리는 이러한 속성을 사용 하는 _updateHeader 함수에 포함되어 있으며, 값이나 선택이 변경될 때 제어 헤더를 업데이트하기 위해 자동으로 호출됩니다.

namespace wijmo.input {
    export class DropDownTree extends DropDown {
        private _tree: wijmo.nav.TreeView;

        // TreeView pass-through properties…
        // checketItems property…

        private _updateHeader() {
            let items = this.checkedItems;
            if (isFunction(this._hdrFormatter)) {
                this.inputElement.value = this._hdrFormatter();
            } else {
                let hdr = '';
                if (items.length > 0) {
                    if (items.length <= this._maxHdrItems) {
                        if (this.displayMemberPath) {
                            let dmp = this.displayMemberPath,
                                binding = new Binding(dmp);
                            items = items.map((item) => {
                                return binding.getValue(item);
                            });
                        }
                        hdr = items.join(', ');
                    } else {
                        hdr = format(this.headerFormat, {
                            count: items.length
                        });
                    }
                }
                this.inputElement.value = hdr;
            }
        }

        // create the drop-down element
        protected _createDropDown() {…}
    }
}

생성자(Constructor)

컨트롤 생성이 거의 완료되었습니다. 마지막 단계는 생성자를 구현하는 것입니다. 생성자는 파트를 이벤트 리스너와 연결하고 initialize 메소드를 호출 하여 options 매개 변수에서 사용자가 제공한 값으로 특성 및 이벤트 핸들러를 초기화합니다 .

namespace wijmo.input {
    export class DropDownTree extends DropDown {
        private _tree: wijmo.nav.TreeView;
        private _readOnly: boolean;
        private _maxHdrItems = 2;
        private _hdrFmt = wijmo.culture.MultiSelect.itemsSelected;
        private _hdrFormatter: Function;

        constructor(element: HTMLElement, options?: any) {
            super(element);
            addClass(this.hostElement, 'wj-dropdowntree');

            // make header element read-only
            this._tbx.readOnly = true;

            // update header now, when the itemsSource changes, 
            // and when items are selected
            this._updateHeader();
            let tree = this._tree;
            tree.checkedItemsChanged.addHandler(() => {
                this._updateHeader();
                this.onCheckedItemsChanged();
            });
            tree.selectedItemChanged.addHandler(() => {
                if (!tree.showCheckboxes) {
                    this._updateHeader();
                    this.onCheckedItemsChanged();
                }
            });
            tree.loadedItems.addHandler(() => {
                this._updateHeader();
            });

            // initialize control options
            this.initialize(options);
        }

        // TreeView pass-through properties…
        // checketItems property…
        // _updateHeader implementation…
        // _createDropDown implementation…
    }
}

컨트롤 테스트

이제 컨트롤이 준비되었으므로 컨트롤을 테스트하고 원하는 방식으로 작동하는지 확인할 수 있습니다. 이 fiddle링크는 간단한 예를 보여줍니다. 사용자가 트리에서 항목을 선택하고 콘솔에서 선택 항목을 보여줍니다.

드롭 다운 버튼을 클릭하여 TreeView를 엽니다 . 트리가 열리면 몇 개의 항목을 클릭하여 선택하고 컨트롤 헤더가 어떻게 업데이트되는지 확인하십시오.

마우스로 부모 항목을 클릭하거나, 스페이스 바를 눌러 상위 항목을 선택하면 모든 하위 항목이 선택된 상태로 전환됩니다.

<