Back to Qt.io
Contact Us Blog Download Qt

TableModel QML Type

シンプルなテーブルモデルをカプセル化します。詳細...

Import Statement: import Qt.labs.qmlmodels

プロパティ

方法

  • appendRow(object row)
  • clear()
  • variant data(QModelIndex index, string role)
  • object getRow(int rowIndex)
  • QModelIndex index(int row, int column)
  • insertRow(int rowIndex, object row)
  • moveRow(int fromRowIndex, int toRowIndex, int rows)
  • removeRow(int rowIndex, int rows)
  • bool setData(QModelIndex index, string role, variant value)
  • setRow(int rowIndex, object row)

詳細説明

TableModel 型は、TableView で使用できるテーブルモデルのデータとして、JavaScript/JSON オブジェクトを格納します。これは、C++ でカスタムQAbstractTableModel サブクラスを作成することなく、非常に単純なモデルをサポートすることを目的としています。

import QtQuick
import QtQuick.Window
import Qt.labs.qmlmodels

Window {
    width: 400
    height: 400
    visible: true

    TableView {
        anchors.fill: parent
        columnSpacing: 1
        rowSpacing: 1
        boundsBehavior: Flickable.StopAtBounds

        model: TableModel {
            TableModelColumn { display: "checked" }
            TableModelColumn { display: "amount" }
            TableModelColumn { display: "fruitType" }
            TableModelColumn { display: "fruitName" }
            TableModelColumn { display: "fruitPrice" }

            // Each row is one type of fruit that can be ordered
            rows: [
                {
                    // Each property is one cell/column.
                    checked: false,
                    amount: 1,
                    fruitType: "Apple",
                    fruitName: "Granny Smith",
                    fruitPrice: 1.50
                },
                {
                    checked: true,
                    amount: 4,
                    fruitType: "Orange",
                    fruitName: "Navel",
                    fruitPrice: 2.50
                },
                {
                    checked: false,
                    amount: 1,
                    fruitType: "Banana",
                    fruitName: "Cavendish",
                    fruitPrice: 3.50
                }
            ]
        }
        delegate:  TextInput {
            text: model.display
            padding: 12
            selectByMouse: true

            onAccepted: model.display = text

            Rectangle {
                anchors.fill: parent
                color: "#efefef"
                z: -1
            }
        }
    }
}

モデルの初期行データは、rows プロパティを使用するか、appendRow （）を呼び出すことで設定されます。モデルの各列は、TableModelColumn インスタンスを宣言することで指定されます。各インスタンスの順序によって、列のインデックスが決まります。モデルのComponent::completed() シグナルが発信されると、カラムとロールが確立され、モデルの寿命まで固定されます。

特定の行にアクセスするには、getRow （）関数を使用します。rows プロパティを使ってモデルのJavaScriptデータに直接アクセスすることも可能ですが、この方法でモデルのデータを変更することはできません。

新しい行を追加するには、appendRow() とinsertRow() を使用します。既存の行を変更するには、setRow()、moveRow()、removeRow()、clear() を使用します。

上の例のように、デリゲートを介してモデルのデータを変更することも可能です：

        delegate:  TextInput {
            text: model.display
            padding: 12
            selectByMouse: true

            onAccepted: model.display = text

            Rectangle {
                anchors.fill: parent
                color: "#efefef"
                z: -1
            }
        }

変更されたロールのデータの型が、設定されたデータの型と一致しない場合は、QVariant を介して自動的に変換されます。

サポートされる行データ構造

TableModel は JavaScript/JSON データを扱うように設計されており、各行は単純なキーペアオブジェクトとなります：

{
    // Each property is one cell/column.
    checked: false,
    amount: 1,
    fruitType: "Apple",
    fruitName: "Granny Smith",
    fruitPrice: 1.50
},
// ...

Qt におけるモデル操作は行と列のインデックスを介して行われ、オブジェクトのキーは順序付けされていないため、各列はTableModelColumn を介して指定する必要があります。これにより、Qtの組み込みロールを各行オブジェクトの任意のプロパティにマッピングすることができます。

複雑な行構造もサポートされていますが、機能は制限されています。TableModel は各行がどのような構造になっているかを知る術を持たないため、それを操作することはできません。この結果、TableModel がrows に保存したモデルデータのコピーは、QML に設定されたソースデータと同期されません。このような理由から、TableModel は簡単なデータ操作をユーザーに依存しています。

例えば、カラム毎に複数のロールを持ちたいとします。これを実現する一つの方法は、各行が配列、各セルがオブジェクトであるデータソースを使用することです。このデータソースを TableModel で使用するには、ゲッターとセッターを定義します：

TableModel {
    TableModelColumn {
        display: function(modelIndex) { return rows[modelIndex.row][0].checked }
        setDisplay: function(modelIndex, cellData) {
                rows[modelIndex.row][0].checked = cellData
            }
    }
    // ...

    rows: [
        [
            { checked: false, checkable: true },
            { amount: 1 },
            { fruitType: "Apple" },
            { fruitName: "Granny Smith" },
            { fruitPrice: 1.50 }
        ]
        // ...
    ]
}

上の行は複雑な行の一例です。

注意: 複雑な行を使用する場合、appendRow() やremoveRow() などの行操作関数はサポートされません。

DelegateChooser と TableModel の併用

実際の使用例の多くでは、DelegateChooser を TableModel を使用するTableView のデリゲートとして使用することをお勧めします。これにより、関連するデリゲートで特定のロールを使用することができます。例えば、上記のスニペットはDelegateChooser を使用するように書き換えることができます：

import QtQuick
import QtQuick.Controls
import Qt.labs.qmlmodels

ApplicationWindow {
    width: 400
    height: 400
    visible: true

    TableView {
        anchors.fill: parent
        columnSpacing: 1
        rowSpacing: 1
        boundsBehavior: Flickable.StopAtBounds

        model: TableModel {
            TableModelColumn { display: "checked" }
            TableModelColumn { display: "amount" }
            TableModelColumn { display: "fruitType" }
            TableModelColumn { display: "fruitName" }
            TableModelColumn { display: "fruitPrice" }

            // Each row is one type of fruit that can be ordered
            rows: [
                {
                    // Each property is one cell/column.
                    checked: false,
                    amount: 1,
                    fruitType: "Apple",
                    fruitName: "Granny Smith",
                    fruitPrice: 1.50
                },
                {
                    checked: true,
                    amount: 4,
                    fruitType: "Orange",
                    fruitName: "Navel",
                    fruitPrice: 2.50
                },
                {
                    checked: false,
                    amount: 1,
                    fruitType: "Banana",
                    fruitName: "Cavendish",
                    fruitPrice: 3.50
                }
            ]
        }
        delegate: DelegateChooser {
            DelegateChoice {
                column: 0
                delegate: CheckBox {
                    checked: model.display
                    onToggled: model.display = checked
                }
            }
            DelegateChoice {
                column: 1
                delegate: SpinBox {
                    value: model.display
                    onValueModified: model.display = value
                }
            }
            DelegateChoice {
                delegate: TextField {
                    text: model.display
                    selectByMouse: true
                    implicitWidth: 140
                    onAccepted: model.display = text
                }
            }
        }
    }
}

インデックス0 と1 のカラムはbool とinteger のデータ型を持っているので、それぞれCheckBox とSpinBox を使用します。残りのカラムは単純にTextField を使用することができるので、このデリゲートはフォールバックとして最後に宣言されます。

TableModelColumn 、TableView 、QAbstractTableModelも参照してください 。

プロパティ文書

columnCount : int [read-only]

この読み取り専用プロパティは、モデルの列数を保持します。

列の数は、rows プロパティが設定された後、またはappendRow() が初めて呼び出された後、モデルの存続期間中固定されます。


rowCount : int [read-only]

この読み取り専用プロパティは、モデル内の行数を保持します。

この値は、行が追加されたり削除されたりするたびに変更されます。


rows : object

このプロパティは、行の配列の形式でモデル・データを保持します：

            rows: [
                {
                    // Each property is one cell/column.
                    checked: false,
                    amount: 1,
                    fruitType: "Apple",
                    fruitName: "Granny Smith",
                    fruitPrice: 1.50
                },
                {
                    checked: true,
                    amount: 4,
                    fruitType: "Orange",
                    fruitName: "Navel",
                    fruitPrice: 2.50
                },
                {
                    checked: false,
                    amount: 1,
                    fruitType: "Banana",
                    fruitName: "Cavendish",
                    fruitPrice: 3.50
                }
            ]

getRow(),setRow(),moveRow(),appendRow(),insertRow(),clear(),rowCount, およびcolumnCountも参照 。


メソッド・ドキュメント

appendRow(object row)

row の値（セル）で、モデルの最後に新しい行を追加する。

model.appendRow({
    checkable: true,
    amount: 1,
    fruitType: "Pear",
    fruitName: "Williams",
    fruitPrice: 1.50,
})

insertRow()、setRow()、およびremoveRow()も参照してください 。


clear()

モデルからすべての行を削除します。

removeRow() も参照して ください。


variant data(QModelIndex index, string role)

指定されたrole に属する、指定されたindex の表セルからデータを返します。

setData() およびindex() も参照 。


object getRow(int rowIndex)

モデル内のrowIndex にある行を返します。

これは、rows プロパティを通して直接行にアクセスすることと同じであることに注意してください：

Component.onCompleted: {
    // These two lines are equivalent.
    console.log(model.getRow(0).display);
    console.log(model.rows[0].fruitName);
}

注意: 返されたオブジェクトを使用してモデルの内容を変更することはできません。代わりにsetRow() を使用してください。

setRow()、appendRow()、insertRow()、removeRow()、moveRow()も参照してください 。


QModelIndex index(int row, int column)

指定されたrow およびcolumn を参照するQModelIndex オブジェクトを返します。このオブジェクトをdata() 関数に渡すと、そのセルからデータを取得したり、setData() に渡すと、そのセルの内容を編集したりすることができます。

import QtQml 2.14
import Qt.labs.qmlmodels 1.0

TableModel {
    id: model

    TableModelColumn { display: "fruitType" }
    TableModelColumn { display: "fruitPrice" }

    rows: [
        { fruitType: "Apple", fruitPrice: 1.50 },
        { fruitType: "Orange", fruitPrice: 2.50 }
    ]

    Component.onCompleted: {
        for (var r = 0; r < model.rowCount; ++r) {
            console.log("An " + model.data(model.index(r, 0)).display +
                        " costs " + model.data(model.index(r, 1)).display.toFixed(2))
        }
    }
}

QML の QModelIndex と関連するクラス、data()も参照してください 。


insertRow(int rowIndex, object row)

row の値(セル)を持つ新しい行をrowIndex の位置にリストモデルに追加します。

model.insertRow(2, {
    checkable: true, checked: false,
    amount: 1,
    fruitType: "Pear",
    fruitName: "Williams",
    fruitPrice: 1.50,
})

rowIndex はリスト内の既存の項目か、リストの末尾から1つ過ぎた項目でなければなりません (appendRow() と等価)。

appendRow()、setRow()、removeRow() およびrowCountも参照 。


moveRow(intfromRowIndex、 inttoRowIndex、 int行)

fromRowIndex のインデックスからtoRowIndex のインデックスにrows を移動する。

例えば、最初の 3 つの項目をリストの最後に移動する場合などです：

model.moveRow(0, model.rowCount - 3, 3)

appendRow()、insertRow()、removeRow()、rowCountも参照 。


removeRow(int rowIndex, int rows = 1)

rowIndex のrows の数をモデルから削除する。

clear() およびrowCount も参照して ください。


bool setData(QModelIndex index, string role, variant value)

指定されたindex のテーブル・セルに、role で指定されたデータ・フィールドをvalue で挿入または更新します。成功した場合は true、失敗した場合は false を返します。

data() およびindex()も参照 。


setRow(int rowIndex, object row)

モデルのrowIndex の行をrow で変更します。

すべての列/セルがrow に存在し、正しい順序でなければなりません。

model.setRow(0, {
    checkable: true,
    amount: 1,
    fruitType: "Pear",
    fruitName: "Williams",
    fruitPrice: 1.50,
})

rowIndex がrowCount() と等しい場合、新しい行がモデルに追加されます。そうでない場合、rowIndex はモデル内の既存の行を指していなければならない。

appendRow()、insertRow()、rowCountも参照のこと 。


© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.