import QtQuick 2.12
import QtQuick.Controls 2.12
import Qt.labs.qmlmodels 1.0
import "../Component"
Rectangle {
z: 10
id: tableView
width: dpH(919)
height: dpH(475)
anchors {
top: parent.top
topMargin: dpH(88)
left: parent.left
leftMargin: dpH(47)
}
Item {
id: control
implicitHeight: parent.height
implicitWidth: parent.width
//表头行高
property int headerHeight: dpH(48)
//行高
property int rowHeight: dpH(48)
property int tableLeft: dpH(100)
//滚动条
property color scrollBarColor: "#E5E5E5"
property int scrollBarWidth: 7
//列宽
property variant columnWidthArr: [(control.width - control.tableLeft)
/ 2, (control.width - control.tableLeft) / 2]
property var horHeader: ["名称", "格式"]
property int selected: -1
property var datas: [{
"checked": false,
"id": 1,
"name": "汽车曲轴分拣项目1",
"type": "mission"
}, {
"checked": false,
"id": 2,
"name": "汽车曲轴分拣项目2",
"type": "mission"
}, {
"checked": false,
"id": 3,
"name": "汽车曲轴分拣项目3",
"type": "mission"
}, {
"checked": false,
"id": 4,
"name": "汽车曲轴分拣项目4",
"type": "mission"
}, {
"checked": false,
"id": 5,
"name": "汽车曲轴分拣项目5",
"type": "mission"
}, {
"checked": false,
"id": 6,
"name": "汽车曲轴分拣项目6",
"type": "mission"
}, {
"checked": false,
"id": 7,
"name": "汽车曲轴分拣项目7",
"type": "mission"
}, {
"checked": false,
"id": 8,
"name": "汽车曲轴分拣项目8",
"type": "mission"
}, {
"checked": false,
"id": 9,
"name": "汽车曲轴分拣项目9",
"type": "mission"
}, {
"checked": false,
"id": 10,
"name": "汽车曲轴分拣项目10",
"type": "mission"
}, {
"checked": false,
"id": 11,
"name": "汽车曲轴分拣项目11",
"type": "mission"
}]
//数据展示
TableView {
id: table
anchors {
fill: parent
topMargin: control.rowHeight
leftMargin: control.tableLeft
}
clip: true
boundsBehavior: Flickable.StopAtBounds
columnSpacing: 0
rowSpacing: 0
//内容行高
rowHeightProvider: function (row) {
return control.headerHeight
}
//内容列的列宽
columnWidthProvider: function (column) {
return control.columnWidthArr[column]
}
ScrollBar.vertical: ScrollBar {
id: scroll_vertical
anchors.right: parent.right
anchors.rightMargin: 0
contentItem: Rectangle {
visible: (scroll_vertical.size < 1.0)
implicitWidth: control.scrollBarWidth
color: control.scrollBarColor
}
}
ScrollBar.horizontal: ScrollBar {
id: scroll_horizontal
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.left: parent.left
anchors.leftMargin: -control.tableLeft
contentItem: Rectangle {
visible: (scroll_horizontal.size < 1.0)
implicitHeight: control.scrollBarWidth
color: control.scrollBarColor
}
}
model: TableModel {
TableModelColumn {
display: "name"
}
TableModelColumn {
display: "type"
}
rows: control.datas
}
delegate: Rectangle {
color: table.model.rows[row].checked ? "#EAF1FF" : "white"
Text {
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: display
font.pixelSize: dpH(15)
color: "#707070"
}
Rectangle {
color: "#E5E5E5"
width: parent.width
height: 1
anchors {
bottom: parent.bottom
}
}
MouseArea {
anchors.fill: parent
onClicked: {
control.datas[row].checked = !control.datas[row].checked
table.model.rows = control.datas
if (checkBox.checked
&& !control.datas[row].checked) {
checkBox.checked = false
}
}
}
}
}
//全选按钮
Rectangle {
width: control.tableLeft
height: control.rowHeight - 1
color: "#F8F8F8"
anchors {
top: parent.top
left: parent.left
}
CheckBoxButton {
property bool checked: false
id: checkBox
state: checked ? "checked" : "noCheck"
anchors {
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: dpH(20)
}
onClicked: {
checkBox.checked = !checkBox.checked
let count = control.datas.length
if (!count) {
return false
}
for (var i = 0; i < count; i++) {
if (checkBox.checked) {
control.datas[i].checked = true
} else {
control.datas[i].checked = false
}
}
table.model.rows = control.datas
}
}
Text {
anchors {
verticalCenter: checkBox.verticalCenter
left: checkBox.right
leftMargin: dpH(20)
}
text: checkBox.checked ? "取消" : "全选"
font.pixelSize: dpH(18)
color: "#707070"
}
Rectangle {
height: 1
width: parent.width
anchors.bottom: parent.bottom
color: "#E5E5E5"
}
Rectangle {
height: 1
width: parent.width
anchors.top: parent.top
color: "#E5E5E5"
}
}
//表头
Item {
anchors {
left: parent.left
right: parent.right
leftMargin: control.tableLeft
}
height: control.rowHeight
z: 2
Row {
anchors.fill: parent
leftPadding: -table.contentX
clip: true
spacing: 0
Repeater {
model: table.columns > 0 ? table.columns : 0
Rectangle {
width: table.columnWidthProvider(
index) + table.columnSpacing
height: control.rowHeight - 1
color: "#F8F8F8"
Text {
anchors.centerIn: parent
text: control.horHeader[index]
font.pixelSize: dpH(18)
color: "#707070"
}
Rectangle {
height: 1
width: parent.width
anchors.bottom: parent.bottom
color: "#E5E5E5"
}
Rectangle {
height: 1
width: parent.width
anchors.top: parent.top
color: "#E5E5E5"
}
}
}
}
}
//每一行前面加多选框
Column {
anchors {
top: parent.top
bottom: parent.bottom
topMargin: control.headerHeight
}
topPadding: -table.contentY
z: 2
clip: true
spacing: 1
Repeater {
model: table.rows > 0 ? table.rows : 0
Rectangle {
width: control.tableLeft
height: table.rowHeightProvider(index)
color: "white"
CheckBoxButton {//自定义多选框组件
state: table.model.rows[index].checked ? "checked" : "noCheck"
anchors.centerIn: parent
onClicked: {
control.datas[index].checked = !control.datas[index].checked
table.model.rows = control.datas
if (checkBox.checked
&& !control.datas[index].checked) {
checkBox.checked = false
}
}
}
}
}
}
}
}
QML tableView表格自定义(内置多选按钮)
最新推荐文章于 2024-06-12 13:38:13 发布