FlexGrid용 RadioButton 및 AutoComplete DataMap 에디터

추천0

페이지 정보

작성자 GrapeCity

작성일 2020-03-31 00:00 조회 3,995회 댓글 0건

본문

관련링크

DataMaps는 최초 릴리스 이후 FlexGrid 컨트롤의 필수 기능이었습니다. DataMap을 FlexGrid 열에 할당할 때, 다음의 두가지를 얻을 수 있습니다.

로우 데이터 값과 그리드에 의해 표시되는 값 사이의 자동 매핑
드롭 다운 목록, 자동 완성 및 유효성 검사를 통한 향상된 편집 기능.

예를 들어, 국가 이름이 포함된 국가 필드가 있는 데이터 항목 목록이 있다고 가정해보겠습니다. 이 정보를 그리드에 바인딩하면 사용자가 유효하지 않거나 일치하지 않는 정보를 입력할 수 있습니다. (예 : "US" / "USA" / "United States." / "모름")

유효한 국가 목록이 포함된 데이터 맵을 만들고 해당 목록을 그리드의 "country" 열에 할당하면 이러한 유형의 실수를 방지할 수 있습니다.

let validCountries = [ 'US', 'UK', 'Japan', 'Other' ];  
 let theGrid = new FlexGrid(hostElement, {  
     autoGenerateColumns: false,  
     columns: [  
         { binding: 'id', header: 'ID', isReadOnly: true },  
         { binding: 'country', header: 'Country', dataMap: validCountries },  
         ….  
     ],  
     itemsSource: getData()  
 });

이 예에서 열의 dataMap 속성은 문자열 배열로 설정됩니다. 자동 매핑은 진행되지 않지만 맵은 드롭 다운 목록을 포함하여 유효한 항목으로 입력을 제한하는 데 여전히 유용합니다.

우리는 이러한 유형의 UI와 기능을 좋아합니다. 사용자는 두 번의 클릭으로 셀을 쉽게 편집하고 값을 변경할 수 있습니다. (목록을 드롭 다운할 때 한번, 원하는 값을 선택할 때 한번)

하지만 일부 사용자는 두 번이 아닌 한 번의 클릭으로 셀 값을 변경할 수 있기를 원했습니다. 이를 위해, 그들은 그리드가 각 셀의 라디오 버튼으로 옵션을 렌더링하기를 원했습니다.

특히 데이터 맵에 몇 개의 값만 포함되어 있는 상황에서 이것이 유용한 기능이라고 생각했기 때문에 열 클래스에 새로운 dataMapEditor 속성을 추가했습니다. 이 속성은 다음과 같은 값을 가질 수있는 열거입니다.

AutoComplete(자동 완성) : 자동 완성 및 유효성 검사는 있지만 드롭 다운은 없는 입력 요소를 사용합니다.
DropDownList(드롭 다운 목록) : 자동 완성, 유효성 검사 및 드롭 다운 목록이 있는 입력 요소를 사용합니다. (이것이 기본 설정입니다.)
RadioButtons(라디오 버튼) : 마우스 및 키보드를 지원하는 라디오 버튼을 사용합니다.

이 코드 스니펫은 모든 편집기 유형을 사용하는 방법을 보여줍니다.

let grid = new FlexGrid('#theGrid', {  
     showMarquee: true,  
     autoGenerateColumns: false,  
     columns: [  
         { binding: 'id', header: 'ID' },  
         { binding: 'country', header: 'Country (AC)', dataMap: getDataMap(),  
           dataMapEditor: DataMapEditor.AutoComplete },  
         { binding: 'country', header: 'Country (DD)', dataMap: getDataMap(),  
           dataMapEditor: DataMapEditor.DropDownList },  
         { binding: 'country', header: 'Country (RB)', dataMap: getDataMap(),  
           dataMapEditor: DataMapEditor.RadioButtons, align: 'center' },  
         …  
     ],  
     itemsSource: getData(),  
 });