QML TableView表格控件分享
表格控件具备功能及属性：
1.根据数据模型（ListModel形式）动态生成TableViewColunm，自动设置该表格共有几列。（使用控件暴露出的inputModelName属性）
2.可以设置每页需要显示的行数，具备按键翻页功能。（使用控件属性rowNumber，该属性默认值：8）。默认下每行的宽度为父项目宽度均分，在设置控件属性columnWidthSetAble为真后，便可以通过属性columnWidthArray自由设置每列宽度，该属性输入数组形式。
3.可通过属性titleNameArray命名表头，即TableViewColunm中的title属性，该属性输入数组形式，数组中若有缺失则表头默认命名为rolename。通过控件属性titleHeight可设置表头高度，默认值：48
4.左右分栏显示功能（注：部分尚未完全完成，且思路有问题，仅供简单使用），设置partBreakable可以使表格分为左右两侧同时显示，每页行数仍是rowNumber设置值，但显示数据量为原先2倍。如下图所示。这里分栏的想法是根据原先ListModel和每页行数，生成一个与分栏显示数据相对应的新ListModel，其实不应该这样，这样只是便于实现显示功能。
控件中还有字体，颜色等属性没有暴露出来，如有需要可以自行添加。控件中定义有一些乱，可以自行修改。TableViewColunm的宽度接受INT数据，自动生成时也使用了parseInt函数，所以当父对象宽度无法整除列数时，两侧可能回产生缝隙。代码中可能还处在BUG，但近期无法在修改，所以先贴出来供使用和参考。希望大家把BUG和缺陷在评论说出，一起进步。
Form控件代码
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
Item{
id:mainItem
width: parent.width
height: parent.height
property bool partBreakable: false
property int partNumber: partBreakable? 2:1
property int formMaxPage: getPage(inputModelName.count)
property int formCurrentPage: 0
property var inputModelName
property var inputModelCell: Object.keys(inputModelName.get(0))
property var objName: getObjName(inputModelName.get(0))
property var roleName
property var titleNameArray
property var titleName
property real columnWidth
property var columnWidthArray
property bool columnWidthSetAble:false
property string strTestColumn:'import QtQuick 2.2; import QtQuick.Controls 1.2; TableViewColumn{id:aa;role:\''+roleName+'\';title:\''+titleName+'\'; width:'+columnWidth+'}'
property var columnArray:partBreakable?{}:formSetting(inputModelCell,getTitleName)
property int rowNumber:8
property int titleHeight: 48
property real rowHeight: (height - titleHeight - 48)/rowNumber
property var getColumnWidthArray: getArray(columnWidthArray)
property var getTitleName: getTitleArray(titleNameArray,inputModelCell)
property int maxPage: parseInt(inputModelName.count/(rowNumber*2) + 1)
property var twopartModel: getNewModel(inputModelName)
property var length: Object.keys(twopartModel)
property var partTitle:getPartTitle(getTitleName)
function getPartTitle(array){
var result = []
for(var i = 0;i<array.length;i++){
result[i] = array[i]
}
for(var j = 0;j<array.length;j++){
result[j+array.length] = array[j ]
}
return result
}
function formSetting(object,title){
var result = []
var theWidth = 0
for(var i=0;i<object.length;i++)
{
var num = object.length - i - 1
roleName = object[num]
titleName = title[i]
theWidth = partBreakable? (width/partNumber):width
columnWidth = columnWidthSetAble? getColumnWidthArray[i]:(parseInt((theWidth -2)/inputModelCell.length))
result[i] = strTestColumn
}
return result
}
function getTitleArray(array,object)
{
var result = []
var j = 0
for(var i=0;i<inputModelCell.length;i++){
if(array[i] !== '' && array[i] !== undefined){
result[j] = array[i]
j++
}
else{
var num = object.length - i - 1
result[j] = object[num]
j++
}
}
return result
}
function getArray(array){
var result=[]
var j = 0
for(var i=0;i < array.length;i++){
if(array[i]!==''&& array[i]!==undefined){
result[j] = array[i]
j++
}
else{
result[j] = 100
j++
}
}
if(partBreakable == true)
{
for(var ii=0;ii<array.length;ii++){
result[ii+array.length] = result[ii]
console.log(ii+array.length)
}
}
return result
}
function getPage(count){
var page = parseInt((count-1)/rowNumber)
return page
}
function getNewModel(model){
var result = {}
var maxone = parseInt(model.count/2 + 1)
var judge = model.count % 2
for(var i=0;i<maxPage;i++){
for(var a = (0+i*rowNumber);a < (rowNumber+i*rowNumber);a++){
var object = {}
if(model.get(a+rowNumber+i*rowNumber) !== undefined){
for(var obj2 in model.get(a+rowNumber+i*rowNumber)){
var newName = obj2.toString() + '1'
object[newName] = model.get(a+rowNumber+i*rowNumber)[obj2]
}
}
else{
for(var obj1 in model.get(a+i*rowNumber )){
var newName1 = obj1.toString() + '1'
object[newName1] = ''
}
}
for(var obj in model.get(a+i*rowNumber )){
object[obj] = model.get(a+i*rowNumber )[obj]
}
result[a] = object
}
}
return result
}
function getObjName(name){
var result ={}
for(var a in name){
var indexString = a.toString()
result[indexString] = " "
}
return result
}
TableView{
id:tableView
frameVisible: true
width: parent.width
height: parent.height -47
itemDelegate: Rectangle{
border.width:1
border.color: "yellow"
color: "black"
Text{
anchors.fill: parent
text: styleData.value
color: styleData.selected ? "yellow" : "white"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.bold: true
font.pointSize: 15
}
}
rowDelegate: Rectangle{
height: rowHeight
}
headerDelegate: Rectangle{
id:headDelegate
border.color: "yellow"
border.width: 1
color: "black"
height: titleHeight
Text{
anchors.fill: parent
text: styleData.value
color: "yellow"
font.bold: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pointSize: 15
}
}
model:ListModel{
id:listModel
}
Component.onCompleted: {
if(partBreakable == true){
var inputModelCell1= Object.keys(inputModelName1.get(0))
var getTitleName1= partTitle
var columnArray11 = formSetting(inputModelCell1,getTitleName1)
var objName1 = getObjName(inputModelName1.get(0))
for(var j = 0;j<inputModelCell1.length;j++){
tableView.addColumn(Qt.createQmlObject(columnArray11[j],tableView,'firstObject'))
}
for(var i = 0;i<=(rowNumber-1);i++){
if(i<inputModelName1.count){
listModel.set(i,inputModelName1.get(i))
}
else
{
listModel.set(i,objName1)
}
}
}
else{
for(var jj = 0;jj<inputModelCell.length;jj++){
tableView.addColumn(Qt.createQmlObject(columnArray[jj],tableView,'firstObject'))
}
for(var ii = 0;ii<=(rowNumber-1);ii++){
if(ii<inputModelName.count){
listModel.set(ii,inputModelName.get(ii))
}
else
{
listModel.set(ii,objName)
}
}
}
}
}
ListModel{
id:inputModelName1
Component.onCompleted: {
for(var i=0;i<=length.length;i++)
{
inputModelName1.set(i,twopartModel[i])
}
}
}
Rectangle{
id:buttonArea
width: parent.width
height: 47
color: "black"
border.color: "yellow"
border.width: 1
anchors.top: tableView.bottom
anchors.horizontalCenter: mainItem.horizontalCenter
Loader{
id:rightButton
sourceComponent: changePageButton
x:parent.width-width-1;y:0
height:parent.height
width: 100
onLoaded: {
item.text="向后"
}
Connections{
target: rightButton.item
onButtonClick:{
if(partBreakable == true){
var objName1 = getObjName(inputModelName1.get(1))
if(formCurrentPage < maxPage - 1){
listModel.clear()
formCurrentPage += 1
for(var i = 0;i<=(rowNumber-1);i++){
if((i+formCurrentPage * rowNumber) <= (inputModelName1.count-1))
{listModel.set(i,inputModelName1.get(i +formCurrentPage * rowNumber))}
else
{listModel.set(i,objName1)}
}
}
}
else{
if(formCurrentPage < formMaxPage){
listModel.clear()
formCurrentPage += 1
for(var i = 0;i<=(rowNumber-1);i++){
if((i+formCurrentPage * rowNumber) <= (inputModelName.count-1))
{listModel.set(i,inputModelName.get(i +formCurrentPage * rowNumber))}
else
{listModel.set(i,objName)}
}
}
}
}
}
}
Loader{
id:leftButton
sourceComponent: changePageButton
x:1;y:0
height:parent.height
width: 100
onLoaded: {
item.text="向前"
}
Connections{
target: leftButton.item
onButtonClick:{
if(partBreakable == true){
if(formCurrentPage > 0){
listModel.clear()
formCurrentPage -= 1
for(var i = 0;i<=(rowNumber-1);i++){
listModel.set(i,inputModelName1.get(i +formCurrentPage * rowNumber))
}
}
}
else{
if(formCurrentPage > 0){
listModel.clear()
formCurrentPage -= 1
for(var i = 0;i<=(rowNumber-1);i++){
listModel.set(i,inputModelName.get(i +formCurrentPage * rowNumber))
}
}
}
}
}
}
}
Component{
id:changePageButton
Rectangle{
property alias text:textArea.text
signal buttonClick()
id:changePageButtonArea
color: "black"
border.color: "yellow"
border.width: 2
Text {
id:textArea
text: qsTr(" ")
color:"yellow"
anchors.fill:parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pointSize: 12
}
MouseArea{
id:buttonMouseArea
anchors.fill: parent
onClicked:changePageButtonArea.buttonClick()
onPressed: {
changePageButtonArea.color = "red"
textArea.color="#0FF"
}
onReleased: {
changePageButtonArea.color = "balck"
textArea.color="yellow"
}
}
}
}
}
窗口程序（包含几组数据模型）
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
ApplicationWindow {
id:mainwindow
visible: true
width: 640
height: 480 + tool1.height
title: qsTr("表格")
Form{
id:form1
inputModelName:model1
partBreakable:true
//columnWidthSetAble:true
//columnWidthArray:[100,200,300,'',]
rowNumber:8
titleNameArray:['序号','名称','数值','测试4','']
titleHeight:48
}
ListModel{
id: model2
ListElement{
num: "1"
name: "500"
value: "0"
text:"c"
}
ListElement{
num: "2"
name: "501"
value: "50"
text:"c"
}
ListElement{
num: "3"
name: "502"
value: "50"
text:"c"
}
ListElement{
num: "4"
name: "503"
value: "50"
text:"c"
}
ListElement{
num: "5"
name: "504"
value: "50"
text:"c"
}
ListElement{
num: "6"
name: "505"
value: "50"
text:"c"
}
ListElement{
num: "7"
name: "506"
value: "50"
text:"c"
}
ListElement{
num: "8"
name: "507"
value: "50"
text:"c"
}
ListElement{
num: "9"
name: "508"
value: "50"
text:"c"
}
}
ListModel{
id: model1
ListElement{
num: "1"
name: "500"
value: "0"
}
ListElement{
num: "2"
name: "501"
value: "50"
}
ListElement{
num: "3"
name: "502"
value: "50"
}
ListElement{
num: "4"
name: "503"
value: "50"
}
ListElement{
num: "5"
name: "504"
value: "50"
}
ListElement{
num: "6"
name: "505"
value: "50"
}
ListElement{
num: "7"
name: "506"
value: "50"
}
ListElement{
num: "8"
name: "507"
value: "50"
}
ListElement{
num: "9"
name: "508"
value: "50"
}
ListElement{
num: "10"
name: "509"
value: "50"
}
ListElement{
num: "11"
name: "510"
value: "50"
}
ListElement{
num: "12"
name: "511"
value: "50"
}
ListElement{
num: "13"
name: "512"
value: "50"
}
ListElement{
num: "14"
name: "513"
value: "50"
}
ListElement{
num: "15"
//name: "514"
value: "50"
}
ListElement{
num: "16"
name: "515"
value: "50"
}
ListElement{
num: "17"
name: "516"
value: "50"
}
ListElement{
num: "18"
name: "517"
value: "50"
}
ListElement{
num: "19"
name: "518"
value: "50"
}
ListElement{
num: "20"
name: "519"
value: "50"
}
ListElement{
num: "21"
name: "520"
value: "50"
}
ListElement{
num: "22"
name: "521"
value: "50"
}
ListElement{
num: "23"
name: "522"
value: "50"
}
ListElement{
num: "24"
name: "523"
value: "50"
}
ListElement{
num: "25"
name: "524"
value: "50"
}
ListElement{
num: "26"
name: "525"
value: "50"
}
ListElement{
num: "27"
name: "526"
value: "50"
}
ListElement{
num: "28"
name: "527"
value: "50"
}
ListElement{
num: "29"
name: "528"
value: "50"
}
ListElement{
num: "1"
name: "500"
value: "0"
}
ListElement{
num: "2"
name: "501"
value: "50"
}
ListElement{
num: "3"
name: "502"
value: "50"
}
ListElement{
num: "4"
name: "503"
value: "50"
}
ListElement{
num: "5"
name: "504"
value: "50"
}
ListElement{
num: "6"
name: "505"
value: "50"
}
ListElement{
num: "7"
name: "506"
value: "50"
}
ListElement{
num: "8"
name: "507"
value: "50"
}
ListElement{
num: "9"
name: "508"
value: "50"
}
ListElement{
num: "10"
name: "509"
value: "50"
}
ListElement{
num: "11"
name: "510"
value: "50"
}
ListElement{
num: "12"
name: "511"
value: "50"
}
ListElement{
num: "13"
name: "512"
value: "50"
}
ListElement{
num: "14"
name: "513"
value: "50"
}
ListElement{
num: "15"
name: "c"
value: "50"
}
ListElement{
num: "16"
name: "515"
value: "50"
}
ListElement{
num: "17"
name: "516"
value: "50"
}
}
// Window{
// id:window2
// width: 640
// height: 480
// Form{
// id:form2
// inputModelName: model2
// }
// }
ListModel{
id: model3
ListElement{
num: "一"
name: "508"
value: "50"
num1: "rr"
name2: "508"
value3: "52"
}
ListElement{
num: "二"
name: "509"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "三"
name: "510"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "四"
name: "511"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "13"
name: "512"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "14"
name: "513"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "15"
name: "514"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "16"
name: "515"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "17"
name: "516"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "18"
name: "517"
value: "50"
num1: "一"
name2: "508"
value3: "50" }
ListElement{
num: "19"
name: "518"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "20"
name: "519"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "21"
name: "520"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "22"
name: "521"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "23"
name: "522"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "24"
name: "523"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "25"
name: "524"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "26"
name: "525"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "27"
name: "526"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "28"
name: "527"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
ListElement{
num: "29"
name: "528"
value: "50"
num1: "一"
name2: "508"
value3: "50"}
}
Action{
id:button1;text:"窗口1"
onTriggered: window2.show()
}
toolBar: ToolBar{
id:tool1
width: parent.width
Row{
anchors.fill: parent
ToolButton{action:button1}
}
}
}