조회 열

Lookup 열은 데이터 소스 스키마에서 "lookup"으로 표시할 수 있는 열이며, 테이블 시트에서 콤보박스 셀 타입 또는 다중 열 드롭다운 리스트로 표시할 수 있습니다. Lookup 열을 사용하면 테이블 시트 뷰에서 고정된 lookup 배열이나 관련된 행 집합에서 열 값을 효율적으로 선택할 수 있습니다. 이 Lookup 열 개념은 테이블 시트의 교차 열 기능에서 도입되었습니다.

테이블 시트에서는 아래와 같은 방법으로 열을 "lookup"으로 표시할 수 있습니다:

배열로 설정

열의 lookup이 데이터 소스 스키마에서 배열일 경우, 해당 열에는 자동으로 콤보박스 셀 타입이 적용되며, lookup 배열의 모든 항목이 콤보박스에 표시됩니다.

다음 코드는 테이블 시트에서 lookup 배열을 설정하는 방법을 보여줍니다. 예를 들어, Type 열을 lookup으로 표시하고 배열 값을 설정할 수 있습니다.

 var workItemTable = dataManager.addTable("WorkItems", { 
        data: [ 
            { 
                "ID": 1, 
                "Date": "9/12/2020", 
                "Description": "Know your numbers", 
                "TotalPoints": 10, 
                "Type": "Homework" 
            }, 
            //... 
        ], 
        schema: { 
            columns: { 
                Date: { dataType: "date" }, 
// set lookup column as an array 
                Type: { lookup: ["Homework", "Quiz", "Exam"] } 
            } 
        } 
    });

관계 이름으로 설정

두 테이블 간의 관계를 설정할 때, 열의 lookup을 관계 이름으로 지정할 수 있습니다. 이 경우 셀 버튼과 다중 열 드롭다운이 자동으로 적용되며, 드롭다운에는 관련 테이블의 기본 열이 표시됩니다.

다음 예제에서는 Students 테이블과 Grades 테이블 간의 관계를 생성하고, Grades 테이블의 Student ID 열을 lookup으로 지정합니다. 그러면 Students 테이블의 데이터가 드롭다운에 표시됩니다.

var studentTable = dataManager.addTable("Students", { 
        data: [ 
            { 
                "ID": 1, 
                "Name": "Ellen Robinson" 
            }, 
            //... 
        ] 
    }); 
    var gradeTable = dataManager.addTable("Grades", { 
        data: [ 
            { 
                "StudentID": 1, 
                "WorkItemID": 1, 
                "Grade": 4 
            }, 
            //... 
        ], 
        schema: { 
            columns: { 
                StudentID: { 
                    lookup: 'student' 
                } 
            } 
        } 
    }); 
    dataManager.addRelationship(gradeTable, "StudentID", "student", studentTable, "ID", "grades");

옵션으로 설정

lookup을 관계 이름과 열 옵션을 포함한 객체로 지정할 수 있습니다. 이 경우 셀 버튼과 다중 열 드롭다운이 자동으로 적용되며, 드롭다운에는 지정한 열이 표시됩니다. 옵션에서 허용되는 열 속성은 value, width, visible, caption 입니다.

다음 예제에서는 WorkItems 테이블과 Grades 테이블 간의 관계를 생성하고, Grades 테이블의 WorkItem ID 열을 lookup 옵션으로 지정하여 드롭다운에 표시할 열을 정의합니다.

var workItemTable = dataManager.addTable("WorkItems", { 
        data: [ 
            { 
                "ID": 1, 
                "Date": "9/12/2020", 
                "Description": "Know your numbers", 
                "TotalPoints": 10, 
                "Type": "Homework" 
            }, 
            //... 
        ] 
    }); 
    var gradeTable = dataManager.addTable("Grades", { 
        data: [ 
            { 
                "StudentID": 1, 
                "WorkItemID": 1, 
                "Grade": 4 
            }, 
            //... 
        ], 
        schema: { 
            columns: { 
                WorkItemID: { 
                    // lookup: { name: 'workItem', columns: ["ID", "Description", "TotalPoints", "Type"]} 
                    lookup: { 
                        name: 'workItem', columns: [ 
                            { value: "ID" }, 
                            { value: "Description", width: 150 }, 
                            { value: "TotalPoints", width: 100 }, 
                            { value: "Type", width: 150, caption: "WorkItem Type" } 
                        ] 
                    } 
                } 
            } 
        } 
    }); 
    dataManager.addRelationship(gradeTable, "WorkItemID", "workItem", workItemTable, "ID", "grades");