5.20232.939
5.20232.939

MultiSelect의 체크 항목 없음(No Checked Item )

MultiSelect 컨트롤은 데이터 멤버가 있어야 항목 선택 여부를 확인할 수 있습니다. 하나가 제공되지 않으면 컨트롤은 데이터 항목에 '$checked' 속성을 추가합니다.

다음과 같은 두 가지 속성이 있는 객체를 포함하는 전용 itemsSource를 만들어 이러한 문제를 방지할 수 있습니다: original item과 checked member.

예시: original item과 checked member를 사용하여 MultiSelect 컨트롤을 만듭니다:

HTML
<div id="theMultiSelect"></div>

Checked Items:
<p id="checkedItems"></p>
Javascript
import * as input from '@grapecity/wijmo.input';
import { getData } from './data';

function init() {
    var theMultiSelect = new input.MultiSelect('#theMultiSelect', {
        placeholder: 'Devices',
        displayMemberPath: 'item.name',
        checkedMemberPath: 'checked',
        itemsSource: getCheckableData(),
        checkedItemsChanged: (sender) => {
            let checkedItems = sender.checkedItems.map(checkableItem => checkableItem.item);
            document.querySelector('#checkedItems').textContent = checkedItems.length ? JSON.stringify(checkedItems) : '';
        }
    });

    // create a data source with items and an extra checkable member
    function getCheckableData() {
        return getData().map(item => ({ item: item, checked: false }));
    }
}