SpreadJS製品ヘルプ
ルックアップ列
機能 > テーブルシート > テーブルシートのリレーション > ルックアップ列

ルックアップ列は、テーブルシートでデータソーススキーマに「lookup」として定義し、コンボボックス型セルまたは複数列のドロップダウンリストとして表示できる列です。ルックアップ列を使用すると、テーブルシートビューに対して効率的な方法で、固定のルックアップ列または関連行のセットから列の値を選択できます。ルックアップ列の概念は、TableSheet のクロス列によって導入されました。

TableSheet では、次のように、データスキーマに列を「lookup」として定義することができます。

配列として定義する

列のルックアップがデータソーススキーマの配列である場合、該当する列にコンボボックス型セルが自動的に適用され、ルックアップ配列のすべての項目がコンボボックスに表示されます。

次のサンプルコードは、テーブルシートでルックアップとして配列値を設定する方法を示します。

Javascript
コードのコピー 
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"
      },
      // ルックアップ列を配列として設定します。
      Type: {
        lookup: ["Homework", "Quiz", "Exam"]
      }
    }
  }
});

リレーションシップ名として定義する

2つのテーブル間のリレーションシップを作成した場合は、データソーススキーマで列のルックアップをリレーションシップ名として定義することができます。この場合、該当する列にボタンと複数列のドロップダウンが自動的に適用されます。このドロップダウンには、関連テーブルのデータが表示されます。

次のサンプルコードは、２つのテーブル間にリレーションシップ（「Students」 と「 Grades」）を作成し、Grades テーブル（リレーションシップ名として 「student」 を使用）のルックアップオプションとして 「Student ID」列を定義する方法を示します。これにより、指定された列で関連テーブル Students をドロップダウンに表示できます。

Javascript
コードのコピー 
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");

列のオプションを含めて定義する

列ルックアップは、リレーションシップ名とデータソーススキーマのいくつかの列オプションを含めて定義できます。列のルックアップをオプションを含めて定義する場合、列オプションの定義には、値、幅、可視性、およびキャプションの 4 つのオプションを指定できます。

次のサンプルコードは、2つのテーブル間にリレーションシップ（「WorkItems」 と「 Grades」）を作成し、Grades テーブル（リレーションシップ名として 「workItem] を使用）のルックアップオプションとして 「WorkItem ID」列を定義する方法を示します。これにより、指定された列で関連テーブル WorkItems をドロップダウンに表示できます。

Javascript
コードのコピー 
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");

デザイナの使用

SpreadJS デザイナの［データソース］タブを使用して、TableSheet にルックアップ列を設定できます。 データソースタブには、テーブル項目の列タブのスキーマセクションにルックアップオプションがあります。

デフォルトでは、テーブルシートのスキーマセクションから、ルックアップとして「静的配列」を設定できます。これを行うには、次のいずれかの方法を使用できます。

配列ルックアップを設定した後、TableSheet 列のコンボボックスのドロップダウンで配列項目を表示できます。たとえば、以下のように、テーブルシートの 「shipVia」列のルックアップとして配列文字列を表示できます。

テーブルにリレーションシップが設定されいる場合、次のいずれかの方法でスキーマのルックアップとして「リレーションシップ名」を設定できます。

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.