TableModel QML Type

간단한 테이블 모델을 캡슐화합니다. 더 보기...

Import Statement: import Qt.labs.qmlmodels

상속된 멤버를 포함한 모든 멤버 목록

속성

columnCount : int
rowCount : int
rows : object

방법

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() 등과 같은 행 조작 함수가 지원되지 않습니다.

TableModel과 함께 DelegateChooser 사용

대부분의 실제 사용 사례에서는 TableModel을 사용하는 TableView 의 델리게이트로 DelegateChooser 을 사용하는 것이 좋습니다. 이렇게 하면 관련 델리게이트에서 특정 역할을 사용할 수 있습니다. 예를 들어 위의 스니펫을 다음과 같이 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 및 data()의 QModelIndex 및 관련 클래스도참조하세요 .

insertRow(int rowIndex, object row)

row 에 있는 값(셀)을 사용하여 목록 모델에 rowIndex 위치에 새 행을 추가합니다.

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

rowIndex 은 목록의 기존 항목 또는 목록의 끝 부분( appendRow()과 동일)에 있어야 합니다.

appendRow(), setRow(), removeRow() 및 rowCount도 참조하세요 .

moveRow(int fromRowIndex, int toRowIndex, int rows)

fromRowIndex 의 색인에서 toRowIndex 의 색인으로 rows 를 이동합니다.

예를 들어 처음 3개 항목을 목록의 끝으로 이동하려면 from 및 to 범위가 있어야 합니다:

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 로 삽입하거나 업데이트합니다. 성공하면 참을 반환하고 실패하면 거짓을 반환합니다.

data() 및 index()도 참조하세요 .

setRow(int rowIndex, object row)

row 을 사용하여 모델의 rowIndex 행을 변경합니다.

모든 열/셀은 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.