Spaltentyp 'select'

Live Beispiel

Beispielcode

context.enableModules();
const { TableGadget } = require("ou.sp.gadget.TableGadget");

const gadget = new TableGadget({
    allowEdit: true,
    allowDelete: false,
    allowInsert: false,
    showFooter: false,
    showOptions: false,
    select: false,
    rows: [
        {
            login: "chuck",
            state: "unlocked",
            job: "chuck",
            avatar: "hero",
        },
        {
            login: "oucadmin",
            state: "locked",
            job: "admin",
            avatar: "worker",
        },
    ],
    columns: {
        login: {
            type: "select",
            label: "de:Benutzer;en:Login",
            entries: ["chuck;Norris, Chuck", "oucadmin;OUC Admin"],
        },
        state: {
            type: "select",
            label: "de:Status;en:State",
            entries: ["unlocked;de:Freigegeben;en:unlocked", "locked;de:Gesperrt;en:locked"],
        },
        job: {
            type: "select",
            label: "Job",
            entries: [
                {
                    text: "de:Entwicklung;en:Development",
                    value: "development",
                },
                {
                    text: "Consultant",
                    value: "consultant",
                },
                {
                    text: "de:Administrator;en:Admin",
                    value: "admin",
                },
                {
                    text: "de:Er ist Chuck, das reicht;en:He's Chuck",
                    value: "chuck",
                },
            ],
        },
        avatar: {
            type: "select",
            label: "Avatar",
            entries: ["facepalm;🤦‍♂️", "detective;🕵", "worker;👷", "hero;🦸‍♂️"],
        },
    },
});

context.returnValue = gadget.transfer();

Auto-Vervollständigung

info

Nur für die MultiTableReact verfügbar.

Mit autocomplete: true werden die Einträge nicht als Auswahlliste, sondern als Auto-Vervollständigung angeboten. Der eingegebene Text filtert die Einträge, wobei die Groß-/Kleinschreibung ignoriert wird und der Text an beliebiger Stelle eines Eintrags vorkommen darf. Passt kein Eintrag zum Text, wird das in der Liste angezeigt.

Auswählbar sind ausschließlich Einträge aus entries. Beim Verlassen der Zelle wird der eingegebene Text übernommen, wenn er genau einem Eintrag entspricht oder nur ein Eintrag dazu passt. Andernfalls wird er verworfen und der bisherige Wert bleibt erhalten.

Wird das Eingabefeld geleert, wird der Wert der Zelle gelöscht. Bei Spalten mit required: true bleibt der bisherige Wert stattdessen erhalten.

Live Beispiel

Beispielcode

context.enableModules();
const { TableGadgetReact } = require("ou.sp.gadget.TableGadgetReact");

const gadget = new TableGadgetReact({
    allowEdit: true,
    allowDelete: false,
    allowInsert: false,
    showFooter: false,
    showOptions: false,
    select: false,
    rows: [
        {
            login: "chuck",
            job: "development",
        },
    ],
    columns: {
        login: {
            type: "select",
            label: "de:Benutzer;en:Login",
            autocomplete: true,
            required: true,
            entries: ["chuck;Norris, Chuck", "oucadmin;OUC Admin", "cooper;Cooper, Dale"],
        },
        job: {
            type: "select",
            label: "Job",
            autocomplete: true,
            entries: [
                {
                    text: "de:Entwicklung;en:Development",
                    value: "development",
                },
                {
                    text: "Consultant",
                    value: "consultant",
                },
                {
                    text: "de:Administrator;en:Admin",
                    value: "admin",
                },
            ],
        },
    },
});

context.returnValue = gadget.transfer();