987 lines
37 KiB
QML
987 lines
37 KiB
QML
|
import QtQuick 2.15
|
||
|
|
import QtQuick.Templates 2.15 as T
|
||
|
|
import Qt.labs.qmlmodels 1.0
|
||
|
|
import DelegateUI 1.0
|
||
|
|
|
||
|
|
DelRectangle {
|
||
|
|
id: control
|
||
|
|
|
||
|
|
clip: true
|
||
|
|
color: DelTheme.Primary.colorBgBase
|
||
|
|
topLeftRadius : 6
|
||
|
|
topRightRadius: 6
|
||
|
|
|
||
|
|
columnHeaderTitleFont {
|
||
|
|
family: DelTheme.DelTableView.fontFamily
|
||
|
|
pixelSize: DelTheme.DelTableView.fontSize
|
||
|
|
}
|
||
|
|
rowHeaderTitleFont {
|
||
|
|
family: DelTheme.DelTableView.fontFamily
|
||
|
|
pixelSize: DelTheme.DelTableView.fontSize
|
||
|
|
}
|
||
|
|
|
||
|
|
property bool animationEnabled: DelTheme.animationEnabled
|
||
|
|
property bool alternatingRow: false
|
||
|
|
property int defaultColumnHeaderWidth: 100
|
||
|
|
property int defaultColumnHeaderHeight: 40
|
||
|
|
property int defaultRowHeaderWidth: 40
|
||
|
|
property int defaultRowHeaderHeight: 40
|
||
|
|
property bool columnGridVisible: false
|
||
|
|
property bool rowGridVisible: false
|
||
|
|
property real minimumRowHeight: 40
|
||
|
|
property real maximumRowHeight: Number.NaN
|
||
|
|
property var initModel: []
|
||
|
|
property var columns: []
|
||
|
|
property var checkedKeys: []
|
||
|
|
|
||
|
|
property color colorGridLine: DelTheme.DelTableView.colorGridLine
|
||
|
|
|
||
|
|
property bool columnHeaderVisible: true
|
||
|
|
property font columnHeaderTitleFont
|
||
|
|
property color colorColumnHeaderTitle: DelTheme.DelTableView.colorColumnTitle
|
||
|
|
property color colorColumnHeaderBg: DelTheme.DelTableView.colorColumnHeaderBg
|
||
|
|
|
||
|
|
property bool rowHeaderVisible: true
|
||
|
|
property font rowHeaderTitleFont
|
||
|
|
property color colorRowHeaderTitle: DelTheme.DelTableView.colorRowTitle
|
||
|
|
property color colorRowHeaderBg: DelTheme.DelTableView.colorRowHeaderBg
|
||
|
|
|
||
|
|
property color colorResizeBlockBg: DelTheme.DelTableView.colorResizeBlockBg
|
||
|
|
|
||
|
|
property Component columnHeaderDelegate: Item {
|
||
|
|
id: __columnHeaderDelegate
|
||
|
|
property string align: headerData.align ?? 'center'
|
||
|
|
property string selectionType: headerData.selectionType ?? ''
|
||
|
|
property var sorter: headerData.sorter
|
||
|
|
property var sortDirections: headerData.sortDirections ?? []
|
||
|
|
property var onFilter: headerData.onFilter
|
||
|
|
|
||
|
|
Text {
|
||
|
|
anchors {
|
||
|
|
left: __checkBoxLoader.active ? __checkBoxLoader.right : parent.left
|
||
|
|
leftMargin: __checkBoxLoader.active ? 0 : 10
|
||
|
|
right: parent.right
|
||
|
|
rightMargin: 10
|
||
|
|
top: parent.top
|
||
|
|
topMargin: 4
|
||
|
|
bottom: parent.bottom
|
||
|
|
bottomMargin: 4
|
||
|
|
}
|
||
|
|
font: control.columnHeaderTitleFont
|
||
|
|
text: headerData.title
|
||
|
|
color: control.colorColumnHeaderTitle
|
||
|
|
verticalAlignment: Text.AlignVCenter
|
||
|
|
horizontalAlignment: {
|
||
|
|
if (__columnHeaderDelegate.align == 'left')
|
||
|
|
return Text.AlignLeft;
|
||
|
|
else if (__columnHeaderDelegate.align == 'right')
|
||
|
|
return Text.AlignRight;
|
||
|
|
else
|
||
|
|
return Text.AlignHCenter;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
MouseArea {
|
||
|
|
enabled: __sorterLoader.active
|
||
|
|
hoverEnabled: true
|
||
|
|
height: parent.height
|
||
|
|
anchors.left: __checkBoxLoader.right
|
||
|
|
anchors.right: __sorterLoader.right
|
||
|
|
onEntered: cursorShape = Qt.PointingHandCursor;
|
||
|
|
onExited: cursorShape = Qt.ArrowCursor;
|
||
|
|
onClicked: {
|
||
|
|
control.sort(column);
|
||
|
|
__sorterLoader.updateIcon();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Loader {
|
||
|
|
id: __checkBoxLoader
|
||
|
|
anchors.left: parent.left
|
||
|
|
anchors.leftMargin: 10
|
||
|
|
anchors.verticalCenter: parent.verticalCenter
|
||
|
|
active: __columnHeaderDelegate.selectionType == 'checkbox'
|
||
|
|
sourceComponent: DelCheckBox {
|
||
|
|
id: __parentBox
|
||
|
|
|
||
|
|
Component.onCompleted: {
|
||
|
|
__parentBox.checkState = __private.parentCheckState;
|
||
|
|
}
|
||
|
|
|
||
|
|
onToggled: {
|
||
|
|
if (checkState == Qt.Unchecked) {
|
||
|
|
__private.model.forEach(
|
||
|
|
object => {
|
||
|
|
__private.checkedKeysMap.delete(object.key);
|
||
|
|
});
|
||
|
|
__private.checkedKeysMapChanged();
|
||
|
|
} else {
|
||
|
|
__private.model.forEach(
|
||
|
|
object => {
|
||
|
|
__private.checkedKeysMap.set(object.key, true);
|
||
|
|
});
|
||
|
|
__private.checkedKeysMapChanged();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Connections {
|
||
|
|
target: __private
|
||
|
|
function onParentCheckStateChanged() {
|
||
|
|
__parentBox.checkState = __private.parentCheckState;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Loader {
|
||
|
|
id: __sorterLoader
|
||
|
|
anchors.right: __filterLoader.active ? __filterLoader.left : parent.right
|
||
|
|
anchors.rightMargin: 8
|
||
|
|
anchors.verticalCenter: parent.verticalCenter
|
||
|
|
active: sorter !== undefined
|
||
|
|
sourceComponent: columnHeaderSorterIconDelegate
|
||
|
|
onLoaded: {
|
||
|
|
if (sortDirections.length === 0) return;
|
||
|
|
|
||
|
|
let ref = control.columns[column];
|
||
|
|
if (!ref.hasOwnProperty('activeSorter')) {
|
||
|
|
ref.activeSorter = false;
|
||
|
|
}
|
||
|
|
if (!ref.hasOwnProperty('sortIndex')) {
|
||
|
|
ref.sortIndex = -1;
|
||
|
|
}
|
||
|
|
if (!ref.hasOwnProperty('sortMode')) {
|
||
|
|
ref.sortMode = 'false';
|
||
|
|
}
|
||
|
|
updateIcon();
|
||
|
|
}
|
||
|
|
property int column: model.column
|
||
|
|
property alias sorter: __columnHeaderDelegate.sorter
|
||
|
|
property alias sortDirections: __columnHeaderDelegate.sortDirections
|
||
|
|
property string sortMode: 'false'
|
||
|
|
|
||
|
|
function updateIcon() {
|
||
|
|
if (sortDirections.length === 0) return;
|
||
|
|
|
||
|
|
let ref = control.columns[column];
|
||
|
|
if (ref.activeSorter) {
|
||
|
|
sortMode = ref.sortMode;
|
||
|
|
} else {
|
||
|
|
sortMode = 'false';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Loader {
|
||
|
|
id: __filterLoader
|
||
|
|
anchors.right: parent.right
|
||
|
|
anchors.rightMargin: 8
|
||
|
|
anchors.verticalCenter: parent.verticalCenter
|
||
|
|
active: onFilter !== undefined
|
||
|
|
sourceComponent: columnHeaderFilterIconDelegate
|
||
|
|
property int column: model.column
|
||
|
|
property alias onFilter: __columnHeaderDelegate.onFilter
|
||
|
|
}
|
||
|
|
}
|
||
|
|
property Component rowHeaderDelegate: Item {
|
||
|
|
Text {
|
||
|
|
anchors {
|
||
|
|
left: parent.left
|
||
|
|
leftMargin: 8
|
||
|
|
right: parent.right
|
||
|
|
rightMargin: 8
|
||
|
|
top: parent.top
|
||
|
|
topMargin: 4
|
||
|
|
bottom: parent.bottom
|
||
|
|
bottomMargin: 4
|
||
|
|
}
|
||
|
|
font: control.rowHeaderTitleFont
|
||
|
|
text: (row + 1)
|
||
|
|
color: control.colorRowHeaderTitle
|
||
|
|
verticalAlignment: Text.AlignVCenter
|
||
|
|
horizontalAlignment: Text.AlignHCenter
|
||
|
|
}
|
||
|
|
}
|
||
|
|
property Component columnHeaderSorterIconDelegate: Item {
|
||
|
|
id: __sorterIconDelegate
|
||
|
|
width: __sorterIconColumn.width
|
||
|
|
height: __sorterIconColumn.height + 12
|
||
|
|
|
||
|
|
Column {
|
||
|
|
id: __sorterIconColumn
|
||
|
|
anchors.verticalCenter: parent.verticalCenter
|
||
|
|
spacing: -2
|
||
|
|
|
||
|
|
DelIconText {
|
||
|
|
visible: sortDirections.indexOf('ascend') !== -1
|
||
|
|
colorIcon: sortMode === 'ascend' ? DelTheme.DelTableView.colorIconHover :
|
||
|
|
DelTheme.DelTableView.colorIcon
|
||
|
|
iconSource: DelIcon.CaretUpOutlined
|
||
|
|
iconSize: DelTheme.DelTableView.fontSize - 2
|
||
|
|
}
|
||
|
|
|
||
|
|
DelIconText {
|
||
|
|
visible: sortDirections.indexOf('descend') !== -1
|
||
|
|
colorIcon: sortMode === 'descend' ? DelTheme.DelTableView.colorIconHover :
|
||
|
|
DelTheme.DelTableView.colorIcon
|
||
|
|
iconSource: DelIcon.CaretDownOutlined
|
||
|
|
iconSize: DelTheme.DelTableView.fontSize - 2
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
property Component columnHeaderFilterIconDelegate: Item {
|
||
|
|
width: __headerFilterIcon.width
|
||
|
|
height: __headerFilterIcon.height + 12
|
||
|
|
|
||
|
|
HoverIcon {
|
||
|
|
id: __headerFilterIcon
|
||
|
|
anchors.centerIn: parent
|
||
|
|
iconSource: DelIcon.SearchOutlined
|
||
|
|
colorIcon: hovered ? DelTheme.DelTableView.colorIconHover : DelTheme.DelTableView.colorIcon
|
||
|
|
onClicked: {
|
||
|
|
__filterPopup.open();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
DelPopup {
|
||
|
|
id: __filterPopup
|
||
|
|
x: -width * 0.5
|
||
|
|
y: parent.height
|
||
|
|
padding: 5
|
||
|
|
animationEnabled: false
|
||
|
|
contentItem: Column {
|
||
|
|
spacing: 5
|
||
|
|
|
||
|
|
DelInput {
|
||
|
|
id: __searchInput
|
||
|
|
width: parent.width
|
||
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
||
|
|
placeholderText: qsTr('Search ') + control.columns[column].dataIndex
|
||
|
|
onEditingFinished: __searchButton.clicked();
|
||
|
|
Component.onCompleted: {
|
||
|
|
let ref = control.columns[column];
|
||
|
|
if (ref.hasOwnProperty('filterInput')) {
|
||
|
|
text = ref.filterInput;
|
||
|
|
} else {
|
||
|
|
ref.filterInput = '';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Row {
|
||
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
||
|
|
spacing: 5
|
||
|
|
|
||
|
|
DelIconButton {
|
||
|
|
id: __searchButton
|
||
|
|
text: qsTr('Search')
|
||
|
|
iconSource: DelIcon.SearchOutlined
|
||
|
|
type: DelButton.Type_Primary
|
||
|
|
onClicked: {
|
||
|
|
__filterPopup.close();
|
||
|
|
control.columns[column].filterInput = __searchInput.text;
|
||
|
|
control.filter();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
DelButton {
|
||
|
|
text: qsTr('Reset')
|
||
|
|
onClicked: {
|
||
|
|
__filterPopup.close();
|
||
|
|
control.columns[column].filterInput = '';
|
||
|
|
control.filter();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
DelButton {
|
||
|
|
text: qsTr('Close')
|
||
|
|
type: DelButton.Type_Link
|
||
|
|
onClicked: {
|
||
|
|
__filterPopup.close();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onColumnsChanged: {
|
||
|
|
let headerColumns = [];
|
||
|
|
let headerRow = {};
|
||
|
|
for (const object of columns) {
|
||
|
|
let column = Qt.createQmlObject('import Qt.labs.qmlmodels 1.0; TableModelColumn {}', __columnHeaderModel);
|
||
|
|
column.display = object.dataIndex;
|
||
|
|
headerColumns.push(column);
|
||
|
|
headerRow[object.dataIndex] = object;
|
||
|
|
}
|
||
|
|
|
||
|
|
__columnHeaderModel.clear();
|
||
|
|
if (columnHeaderVisible) {
|
||
|
|
__columnHeaderModel.columns = headerColumns;
|
||
|
|
__columnHeaderModel.rows = [headerRow];
|
||
|
|
}
|
||
|
|
|
||
|
|
let cellColumns = [];
|
||
|
|
for (let i = 0; i < columns.length; i++) {
|
||
|
|
let column = Qt.createQmlObject('import Qt.labs.qmlmodels 1.0; TableModelColumn {}', __cellModel);
|
||
|
|
column.display = `__data${i}`;
|
||
|
|
cellColumns.push(column);
|
||
|
|
}
|
||
|
|
__cellModel.columns = cellColumns;
|
||
|
|
}
|
||
|
|
|
||
|
|
onInitModelChanged: {
|
||
|
|
clearSort();
|
||
|
|
filter();
|
||
|
|
}
|
||
|
|
|
||
|
|
function checkForRows(rows) {
|
||
|
|
rows.forEach(
|
||
|
|
row => {
|
||
|
|
if (row >= 0 && row < __private.model.length) {
|
||
|
|
const key = __private.model[row].key;
|
||
|
|
__private.checkedKeysMap.set(key, true);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
__private.checkedKeysMapChanged();
|
||
|
|
}
|
||
|
|
|
||
|
|
function checkForKeys(keys) {
|
||
|
|
keys.forEach(key => __private.checkedKeysMap.set(object.key, true));
|
||
|
|
__private.checkedKeysMapChanged();
|
||
|
|
}
|
||
|
|
|
||
|
|
function getCheckedKeys() {
|
||
|
|
return [...__private.checkedKeysMap.keys()];
|
||
|
|
}
|
||
|
|
|
||
|
|
function clearAllCheckedKeys() {
|
||
|
|
__private.checkedKeysMap.clear();
|
||
|
|
__private.checkedKeysMapChanged();
|
||
|
|
__private.parentCheckState = Qt.Unchecked;
|
||
|
|
__private.parentCheckStateChanged();
|
||
|
|
}
|
||
|
|
|
||
|
|
function sort(column) {
|
||
|
|
/*! 仅需设置排序相关属性, 真正的排序在 filter() 中完成 */
|
||
|
|
if (columns[column].hasOwnProperty('sorter')) {
|
||
|
|
columns.forEach(
|
||
|
|
(object, index) => {
|
||
|
|
if (object.hasOwnProperty('sorter')) {
|
||
|
|
if (column === index) {
|
||
|
|
object.activeSorter = true;
|
||
|
|
object.sortIndex = (object.sortIndex + 1) % object.sortDirections.length;
|
||
|
|
object.sortMode = object.sortDirections[object.sortIndex];
|
||
|
|
} else {
|
||
|
|
object.activeSorter = false;
|
||
|
|
object.sortIndex = -1;
|
||
|
|
object.sortMode = 'false';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
filter();
|
||
|
|
}
|
||
|
|
|
||
|
|
function clearSort() {
|
||
|
|
columns.forEach(
|
||
|
|
object => {
|
||
|
|
if (object.sortDirections && object.sortDirections.length !== 0) {
|
||
|
|
object.activeSorter = false;
|
||
|
|
object.sortIndex = -1;
|
||
|
|
object.sortMode = 'false';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
__private.model = [...initModel];
|
||
|
|
}
|
||
|
|
|
||
|
|
function filter() {
|
||
|
|
let changed = false;
|
||
|
|
let model = [...initModel];
|
||
|
|
columns.forEach(
|
||
|
|
object => {
|
||
|
|
if (object.hasOwnProperty('onFilter') && object.hasOwnProperty('filterInput')) {
|
||
|
|
model = model.filter((record, index) => object.onFilter(object.filterInput, record));
|
||
|
|
changed = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if (changed)
|
||
|
|
__private.model = model;
|
||
|
|
|
||
|
|
/*! 根据 activeSorter 列排序 */
|
||
|
|
columns.forEach(
|
||
|
|
object => {
|
||
|
|
if (object.activeSorter === true) {
|
||
|
|
if (object.sortMode === 'ascend') {
|
||
|
|
/*! sorter 作为上升处理 */
|
||
|
|
__private.model.sort(object.sorter);
|
||
|
|
__private.modelChanged();
|
||
|
|
} else if (object.sortMode === 'descend') {
|
||
|
|
/*! 返回 ascend 相反结果即可 */
|
||
|
|
__private.model.sort((a, b) => object.sorter(b, a));
|
||
|
|
__private.modelChanged();
|
||
|
|
} else {
|
||
|
|
/*! 还原 */
|
||
|
|
__private.model = model;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function clearFilter() {
|
||
|
|
columns.forEach(
|
||
|
|
object => {
|
||
|
|
if (object.hasOwnProperty('onFilter') || object.hasOwnProperty('filterInput'))
|
||
|
|
object.filterInput = '';
|
||
|
|
});
|
||
|
|
__private.model = [...initModel];
|
||
|
|
}
|
||
|
|
|
||
|
|
function clear() {
|
||
|
|
__private.model = initModel = [];
|
||
|
|
__cellModel.clear();
|
||
|
|
columns.forEach(
|
||
|
|
object => {
|
||
|
|
if (object.sortDirections && object.sortDirections.length !== 0) {
|
||
|
|
object.activeSorter = false;
|
||
|
|
object.sortIndex = -1;
|
||
|
|
object.sortMode = 'false';
|
||
|
|
}
|
||
|
|
if (object.hasOwnProperty('onFilter') || object.hasOwnProperty('filterInput')) {
|
||
|
|
object.filterInput = '';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function appendRow(object) {
|
||
|
|
__private.model.push(object);
|
||
|
|
__cellModel.appendRow(__private.toCellObject(object));
|
||
|
|
}
|
||
|
|
|
||
|
|
function getRow(rowIndex) {
|
||
|
|
if (rowIndex >= 0 && rowIndex < __private.model.length) {
|
||
|
|
return __private.model[rowIndex];
|
||
|
|
}
|
||
|
|
return undefined;
|
||
|
|
}
|
||
|
|
|
||
|
|
function insertRow(rowIndex, object) {
|
||
|
|
__private.model.splice(rowIndex, 0, object);
|
||
|
|
__cellModel.insertRow(rowIndex, __private.toCellObject(object));
|
||
|
|
}
|
||
|
|
|
||
|
|
function moveRow(fromRowIndex, toRowIndex, count = 1) {
|
||
|
|
if (fromRowIndex >= 0 && fromRowIndex < __private.model.length &&
|
||
|
|
toRowIndex >= 0 && toRowIndex < __private.model.length) {
|
||
|
|
const objects = __private.model.splice(from, count);
|
||
|
|
__private.model.splice(to, 0, ...objects);
|
||
|
|
__cellModel.moveRow(fromRowIndex, toRowIndex, count);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeRow(rowIndex, count = 1) {
|
||
|
|
if (rowIndex >= 0 && rowIndex < __private.model.length) {
|
||
|
|
__private.model.splice(rowIndex, count);
|
||
|
|
__cellModel.removeRow(rowIndex, count);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function setRow(rowIndex, object) {
|
||
|
|
if (rowIndex >= 0 && rowIndex < __private.model.length) {
|
||
|
|
__private.model[rowIndex] = object;
|
||
|
|
__cellModel.setRow(rowIndex, __private.toCellObject(object));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
component HoverIcon: DelIconText {
|
||
|
|
signal clicked()
|
||
|
|
property alias hovered: __hoverHandler.hovered
|
||
|
|
|
||
|
|
HoverHandler {
|
||
|
|
id: __hoverHandler
|
||
|
|
cursorShape: Qt.PointingHandCursor
|
||
|
|
}
|
||
|
|
|
||
|
|
TapHandler {
|
||
|
|
onTapped: parent.clicked();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
component ResizeArea: MouseArea {
|
||
|
|
property bool isHorizontal: true
|
||
|
|
property var target: __columnHeaderItem
|
||
|
|
property point startPos: Qt.point(0, 0)
|
||
|
|
property real minimumWidth: 0
|
||
|
|
property real maximumWidth: Number.NaN
|
||
|
|
property real minimumHeight: 0
|
||
|
|
property real maximumHeight: Number.NaN
|
||
|
|
property var resizeCallback: (result) => { }
|
||
|
|
|
||
|
|
preventStealing: true
|
||
|
|
hoverEnabled: true
|
||
|
|
onEntered: cursorShape = isHorizontal ? Qt.SplitHCursor : Qt.SplitVCursor;
|
||
|
|
onPressed:
|
||
|
|
(mouse) => {
|
||
|
|
if (target) {
|
||
|
|
startPos = Qt.point(mouseX, mouseY);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onPositionChanged:
|
||
|
|
(mouse) => {
|
||
|
|
if (pressed && target) {
|
||
|
|
if (isHorizontal) {
|
||
|
|
var resultWidth = 0;
|
||
|
|
var offsetX = mouse.x - startPos.x;
|
||
|
|
if (maximumWidth != Number.NaN && (target.width + offsetX) > maximumWidth) {
|
||
|
|
resultWidth = maximumWidth;
|
||
|
|
} else if ((target.width + offsetX) < minimumWidth) {
|
||
|
|
resultWidth = minimumWidth;
|
||
|
|
} else {
|
||
|
|
resultWidth = target.width + offsetX;
|
||
|
|
}
|
||
|
|
resizeCallback(resultWidth);
|
||
|
|
} else {
|
||
|
|
var resultHeight = 0;
|
||
|
|
var offsetY = mouse.y - startPos.y;
|
||
|
|
if (maximumHeight != Number.NaN && (target.height + offsetY) > maximumHeight) {
|
||
|
|
resultHeight = maximumHeight;
|
||
|
|
} else if ((target.height + offsetY) < minimumHeight) {
|
||
|
|
resultHeight = minimumHeight;
|
||
|
|
} else {
|
||
|
|
resultHeight = target.height + offsetY;
|
||
|
|
}
|
||
|
|
resizeCallback(resultHeight);
|
||
|
|
}
|
||
|
|
mouse.accepted = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Behavior on color { enabled: control.animationEnabled; ColorAnimation { duration: DelTheme.Primary.durationMid } }
|
||
|
|
|
||
|
|
QtObject {
|
||
|
|
id: __private
|
||
|
|
property var model: []
|
||
|
|
property int parentCheckState: Qt.Unchecked
|
||
|
|
property var checkedKeysMap: new Map
|
||
|
|
|
||
|
|
function updateParentCheckBox() {
|
||
|
|
let checkCount = 0;
|
||
|
|
model.forEach(
|
||
|
|
object => {
|
||
|
|
if (checkedKeysMap.has(object.key)) {
|
||
|
|
checkCount++;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
parentCheckState = checkCount == 0 ? Qt.Unchecked : checkCount == model.length ? Qt.Checked : Qt.PartiallyChecked;
|
||
|
|
parentCheckStateChanged();
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateCheckedKeys() {
|
||
|
|
control.checkedKeys = [...checkedKeysMap.keys()];
|
||
|
|
}
|
||
|
|
|
||
|
|
function toCellObject(object) {
|
||
|
|
let dataObject = new Object;
|
||
|
|
for (let i = 0; i < control.columns.length; i++) {
|
||
|
|
const dataIndex = control.columns[i].dataIndex ?? '';
|
||
|
|
if (object.hasOwnProperty(dataIndex)) {
|
||
|
|
dataObject[`__data${i}`] = object[dataIndex];
|
||
|
|
} else {
|
||
|
|
dataObject[`__data${i}`] = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return dataObject;
|
||
|
|
}
|
||
|
|
|
||
|
|
onModelChanged: {
|
||
|
|
__cellView.contentY = 0;
|
||
|
|
__cellModel.clear();
|
||
|
|
|
||
|
|
let cellRows = [];
|
||
|
|
model.forEach(
|
||
|
|
(object, index) => {
|
||
|
|
let data = { };
|
||
|
|
for (let i = 0; i < columns.length; i++) {
|
||
|
|
const dataIndex = columns[i].dataIndex ?? '';
|
||
|
|
if (object.hasOwnProperty(dataIndex)) {
|
||
|
|
data[`__data${i}`] = object[dataIndex];
|
||
|
|
} else {
|
||
|
|
data[`__data${i}`] = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
cellRows.push(data);
|
||
|
|
});
|
||
|
|
__cellModel.rows = cellRows;
|
||
|
|
|
||
|
|
__cellView.rowHeights = Array.from({ length: model.length }, () => control.defaultRowHeaderHeight);
|
||
|
|
__rowHeaderModel.rows = model;
|
||
|
|
|
||
|
|
updateParentCheckBox();
|
||
|
|
}
|
||
|
|
onParentCheckStateChanged: updateCheckedKeys();
|
||
|
|
onCheckedKeysMapChanged: updateCheckedKeys();
|
||
|
|
}
|
||
|
|
|
||
|
|
DelRectangle {
|
||
|
|
id: __columnHeaderViewBg
|
||
|
|
height: control.defaultColumnHeaderHeight
|
||
|
|
anchors.left: control.rowHeaderVisible ? __rowHeaderViewBg.right : parent.left
|
||
|
|
anchors.right: parent.right
|
||
|
|
topLeftRadius: control.rowHeaderVisible ? 0 : 6
|
||
|
|
topRightRadius: 6
|
||
|
|
color: control.colorColumnHeaderBg
|
||
|
|
visible: control.columnHeaderVisible
|
||
|
|
|
||
|
|
TableView {
|
||
|
|
id: __columnHeaderView
|
||
|
|
anchors.fill: parent
|
||
|
|
syncDirection: Qt.Horizontal
|
||
|
|
syncView: __cellModel.rowCount == 0 ? null : __cellView
|
||
|
|
columnWidthProvider: __cellView.columnWidthProvider
|
||
|
|
boundsBehavior: Flickable.StopAtBounds
|
||
|
|
clip: true
|
||
|
|
model: TableModel {
|
||
|
|
id: __columnHeaderModel
|
||
|
|
}
|
||
|
|
delegate: Item {
|
||
|
|
id: __columnHeaderItem
|
||
|
|
implicitHeight: control.defaultColumnHeaderHeight
|
||
|
|
clip: true
|
||
|
|
|
||
|
|
required property var model
|
||
|
|
required property var display
|
||
|
|
property int row: model.row
|
||
|
|
property int column: model.column
|
||
|
|
property string selectionType: display.selectionType ?? ''
|
||
|
|
property bool editable: display.editable ?? false
|
||
|
|
property real minimumWidth: display.minimumWidth ?? 40
|
||
|
|
property real maximumWidth: display.maximumWidth ?? Number.NaN
|
||
|
|
|
||
|
|
TableView.onReused: {
|
||
|
|
if (selectionType == 'checkbox')
|
||
|
|
__private.updateParentCheckBox();
|
||
|
|
}
|
||
|
|
|
||
|
|
Loader {
|
||
|
|
anchors.fill: parent
|
||
|
|
sourceComponent: control.columnHeaderDelegate
|
||
|
|
property alias model: __columnHeaderItem.model
|
||
|
|
property var headerData: control.columns[column]
|
||
|
|
property alias column: __columnHeaderItem.column
|
||
|
|
}
|
||
|
|
|
||
|
|
Rectangle {
|
||
|
|
z: 2
|
||
|
|
width: 1
|
||
|
|
color: control.colorGridLine
|
||
|
|
height: parent.height * 0.5
|
||
|
|
anchors.right: parent.right
|
||
|
|
anchors.verticalCenter: parent.verticalCenter
|
||
|
|
}
|
||
|
|
|
||
|
|
ResizeArea {
|
||
|
|
width: 8
|
||
|
|
height: parent.height
|
||
|
|
minimumWidth: __columnHeaderItem.minimumWidth
|
||
|
|
maximumWidth: __columnHeaderItem.maximumWidth
|
||
|
|
anchors.right: parent.right
|
||
|
|
anchors.rightMargin: -width * 0.5
|
||
|
|
target: __columnHeaderItem
|
||
|
|
isHorizontal: true
|
||
|
|
resizeCallback: result => __cellView.setColumnWidth(__columnHeaderItem.column, result);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Rectangle {
|
||
|
|
width: parent.width
|
||
|
|
height: 1
|
||
|
|
anchors.bottom: parent.bottom
|
||
|
|
color: control.colorGridLine
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Rectangle {
|
||
|
|
id: __rowHeaderViewBg
|
||
|
|
width: control.defaultRowHeaderWidth
|
||
|
|
anchors.top: control.columnHeaderVisible ? __columnHeaderViewBg.bottom : __cellMouseArea.top
|
||
|
|
anchors.bottom: __cellMouseArea.bottom
|
||
|
|
color: control.colorRowHeaderBg
|
||
|
|
visible: control.rowHeaderVisible
|
||
|
|
|
||
|
|
TableView {
|
||
|
|
id: __rowHeaderView
|
||
|
|
anchors.fill: parent
|
||
|
|
syncDirection: Qt.Vertical
|
||
|
|
syncView: __cellView
|
||
|
|
boundsBehavior: Flickable.StopAtBounds
|
||
|
|
clip: true
|
||
|
|
model: TableModel {
|
||
|
|
id: __rowHeaderModel
|
||
|
|
TableModelColumn { }
|
||
|
|
}
|
||
|
|
delegate: Item {
|
||
|
|
id: __rowHeaderItem
|
||
|
|
implicitWidth: control.defaultRowHeaderWidth
|
||
|
|
clip: true
|
||
|
|
|
||
|
|
required property var model
|
||
|
|
property int row: model.row
|
||
|
|
|
||
|
|
Loader {
|
||
|
|
anchors.fill: parent
|
||
|
|
sourceComponent: control.rowHeaderDelegate
|
||
|
|
property alias model: __rowHeaderItem.model
|
||
|
|
property alias row: __rowHeaderItem.row
|
||
|
|
}
|
||
|
|
|
||
|
|
Rectangle {
|
||
|
|
z: 2
|
||
|
|
width: parent.width * 0.5
|
||
|
|
color: control.colorGridLine
|
||
|
|
height: 1
|
||
|
|
anchors.bottom: parent.bottom
|
||
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
||
|
|
}
|
||
|
|
|
||
|
|
ResizeArea {
|
||
|
|
width: parent.width
|
||
|
|
height: 8
|
||
|
|
minimumHeight: control.minimumRowHeight
|
||
|
|
maximumHeight: control.maximumRowHeight
|
||
|
|
anchors.bottom: parent.bottom
|
||
|
|
anchors.bottomMargin: -height * 0.5
|
||
|
|
target: __rowHeaderItem
|
||
|
|
isHorizontal: false
|
||
|
|
resizeCallback: result => __cellView.setRowHeight(__rowHeaderItem.row, result);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Rectangle {
|
||
|
|
width: 1
|
||
|
|
height: parent.height
|
||
|
|
anchors.right: parent.right
|
||
|
|
color: control.colorGridLine
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
MouseArea {
|
||
|
|
id: __cellMouseArea
|
||
|
|
anchors.top: control.columnHeaderVisible ? __columnHeaderViewBg.bottom : parent.top
|
||
|
|
anchors.bottom: parent.bottom
|
||
|
|
anchors.left: __columnHeaderViewBg.left
|
||
|
|
anchors.right: __columnHeaderViewBg.right
|
||
|
|
hoverEnabled: true
|
||
|
|
onExited: __cellView.currentHoverRow = -1;
|
||
|
|
onWheel: wheel => wheel.accepted = true;
|
||
|
|
|
||
|
|
TableView {
|
||
|
|
id: __cellView
|
||
|
|
|
||
|
|
property int currentHoverRow: -1
|
||
|
|
property var rowHeights: []
|
||
|
|
|
||
|
|
function setRowHeight(row, rowHeight) {
|
||
|
|
rowHeights[row] = rowHeight;
|
||
|
|
forceLayout();
|
||
|
|
}
|
||
|
|
|
||
|
|
function setColumnWidth(column, columnWidth) {
|
||
|
|
control.columns[column].width = columnWidth;
|
||
|
|
__columnHeaderView.forceLayout()
|
||
|
|
forceLayout();
|
||
|
|
}
|
||
|
|
|
||
|
|
rowHeightProvider: row => rowHeights[row];
|
||
|
|
columnWidthProvider:
|
||
|
|
column => {
|
||
|
|
let object = control.columns[column];
|
||
|
|
if (object.hasOwnProperty('width'))
|
||
|
|
return object.width;
|
||
|
|
else
|
||
|
|
return control.defaultColumnHeaderWidth;
|
||
|
|
}
|
||
|
|
anchors.fill: parent
|
||
|
|
boundsBehavior: Flickable.StopAtBounds
|
||
|
|
T.ScrollBar.horizontal: __hScrollBar
|
||
|
|
T.ScrollBar.vertical: __vScrollBar
|
||
|
|
clip: true
|
||
|
|
reuseItems: false /*! 重用有未知BUG */
|
||
|
|
model: TableModel {
|
||
|
|
id: __cellModel
|
||
|
|
}
|
||
|
|
delegate: Rectangle {
|
||
|
|
id: __rootItem
|
||
|
|
implicitHeight: control.defaultRowHeaderWidth
|
||
|
|
clip: true
|
||
|
|
color: {
|
||
|
|
if (__private.checkedKeysMap.has(key)) {
|
||
|
|
if (row == __cellView.currentHoverRow)
|
||
|
|
return DelTheme.isDark ? DelTheme.DelTableView.colorCellBgDarkHoverChecked :
|
||
|
|
DelTheme.DelTableView.colorCellBgHoverChecked;
|
||
|
|
else
|
||
|
|
return DelTheme.isDark ? DelTheme.DelTableView.colorCellBgDarkChecked :
|
||
|
|
DelTheme.DelTableView.colorCellBgChecked;
|
||
|
|
} else {
|
||
|
|
return row == __cellView.currentHoverRow ? DelTheme.DelTableView.colorCellBgHover :
|
||
|
|
control.alternatingRow && __rootItem.row % 2 !== 0 ?
|
||
|
|
DelTheme.DelTableView.colorCellBgHover : DelTheme.DelTableView.colorCellBg;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
TableView.onReused: {
|
||
|
|
checked = __private.checkedKeysMap.has(key);
|
||
|
|
if (__childCheckBoxLoader.item) {
|
||
|
|
__childCheckBoxLoader.item.checked = checked;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
required property var model
|
||
|
|
required property var index
|
||
|
|
required property var display
|
||
|
|
|
||
|
|
property int row: model.row
|
||
|
|
property int column: model.column
|
||
|
|
property string key: __private.model[row] ? (__private.model[row].key ?? '') : ''
|
||
|
|
property string selectionType: control.columns[column].selectionType ?? ''
|
||
|
|
property string dataIndex: control.columns[column].dataIndex ?? ''
|
||
|
|
property string filterInput: control.columns[column].filterInput ?? ''
|
||
|
|
property alias cellData: __rootItem.display
|
||
|
|
property bool checked: false
|
||
|
|
|
||
|
|
Loader {
|
||
|
|
active: control.rowGridVisible
|
||
|
|
width: parent.width
|
||
|
|
height: 1
|
||
|
|
anchors.bottom: parent.bottom
|
||
|
|
sourceComponent: Rectangle { color: control.colorGridLine }
|
||
|
|
}
|
||
|
|
|
||
|
|
Loader {
|
||
|
|
active: control.columnGridVisible
|
||
|
|
width: 1
|
||
|
|
height: parent.height
|
||
|
|
anchors.right: parent.right
|
||
|
|
sourceComponent: Rectangle { color: control.colorGridLine }
|
||
|
|
}
|
||
|
|
|
||
|
|
MouseArea {
|
||
|
|
anchors.fill: parent
|
||
|
|
hoverEnabled: true
|
||
|
|
onEntered: __cellView.currentHoverRow = __rootItem.row;
|
||
|
|
|
||
|
|
Loader {
|
||
|
|
id: __childCheckBoxLoader
|
||
|
|
active: selectionType == 'checkbox'
|
||
|
|
anchors.left: parent.left
|
||
|
|
anchors.leftMargin: 10
|
||
|
|
anchors.verticalCenter: parent.verticalCenter
|
||
|
|
sourceComponent: DelCheckBox {
|
||
|
|
id: __childBox
|
||
|
|
|
||
|
|
Component.onCompleted: {
|
||
|
|
__childBox.checked = __rootItem.checked = __private.checkedKeysMap.has(key);
|
||
|
|
}
|
||
|
|
|
||
|
|
onToggled: {
|
||
|
|
if (checkState == Qt.Checked) {
|
||
|
|
__private.checkedKeysMap.set(__rootItem.key, true);
|
||
|
|
__rootItem.checked = true;
|
||
|
|
} else {
|
||
|
|
__private.checkedKeysMap.delete(__rootItem.key);
|
||
|
|
__rootItem.checked = false;
|
||
|
|
}
|
||
|
|
__private.updateParentCheckBox();
|
||
|
|
__cellView.currentHoverRowChanged();
|
||
|
|
}
|
||
|
|
|
||
|
|
Connections {
|
||
|
|
target: __private
|
||
|
|
function onCheckedKeysMapChanged() {
|
||
|
|
__childBox.checked = __rootItem.checked = __private.checkedKeysMap.has(__rootItem.key);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
property alias key: __rootItem.key
|
||
|
|
}
|
||
|
|
|
||
|
|
Loader {
|
||
|
|
anchors.left: __childCheckBoxLoader.active ? __childCheckBoxLoader.right : parent.left
|
||
|
|
anchors.right: parent.right
|
||
|
|
anchors.top: parent.top
|
||
|
|
anchors.bottom: parent.bottom
|
||
|
|
sourceComponent: {
|
||
|
|
if (control.columns[__rootItem.column].delegate) {
|
||
|
|
return control.columns[__rootItem.column].delegate;
|
||
|
|
} else {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
property alias row: __rootItem.row
|
||
|
|
property alias column: __rootItem.column
|
||
|
|
property alias cellData: __rootItem.cellData
|
||
|
|
property alias cellIndex: __rootItem.index
|
||
|
|
property alias dataIndex: __rootItem.dataIndex
|
||
|
|
property alias filterInput: __rootItem.filterInput
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Behavior on contentY { NumberAnimation {}}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Loader {
|
||
|
|
id: __resizeRectLoader
|
||
|
|
z: 10
|
||
|
|
width: __rowHeaderViewBg.width
|
||
|
|
height: __columnHeaderViewBg.height
|
||
|
|
active: control.rowHeaderVisible && control.columnHeaderVisible
|
||
|
|
sourceComponent: DelRectangle {
|
||
|
|
color: control.colorResizeBlockBg
|
||
|
|
topLeftRadius: 6
|
||
|
|
|
||
|
|
ResizeArea {
|
||
|
|
width: parent.width
|
||
|
|
height: 8
|
||
|
|
minimumHeight: control.defaultColumnHeaderHeight
|
||
|
|
anchors.bottom: parent.bottom
|
||
|
|
anchors.bottomMargin: -height * 0.5
|
||
|
|
target: __columnHeaderViewBg
|
||
|
|
isHorizontal: false
|
||
|
|
resizeCallback: result => __columnHeaderViewBg.height = result;
|
||
|
|
}
|
||
|
|
|
||
|
|
ResizeArea {
|
||
|
|
width: 8
|
||
|
|
height: parent.height
|
||
|
|
minimumWidth: control.defaultRowHeaderWidth
|
||
|
|
anchors.right: parent.right
|
||
|
|
anchors.rightMargin: -width * 0.5
|
||
|
|
target: __rowHeaderViewBg
|
||
|
|
isHorizontal: true
|
||
|
|
resizeCallback: result => __rowHeaderViewBg.width = result;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
DelScrollBar {
|
||
|
|
id: __hScrollBar
|
||
|
|
z: 11
|
||
|
|
anchors.left: control.rowHeaderVisible ? __rowHeaderViewBg.right : __cellMouseArea.left
|
||
|
|
anchors.right: __cellMouseArea.right
|
||
|
|
anchors.bottom: __cellMouseArea.bottom
|
||
|
|
}
|
||
|
|
|
||
|
|
DelScrollBar {
|
||
|
|
id: __vScrollBar
|
||
|
|
z: 12
|
||
|
|
anchors.right: __cellMouseArea.right
|
||
|
|
anchors.top: control.columnHeaderVisible ? __columnHeaderViewBg.bottom : __cellMouseArea.top
|
||
|
|
anchors.bottom: __cellMouseArea.bottom
|
||
|
|
}
|
||
|
|
}
|