vxe-table 是一款優秀的前段插件,可以採用雙向綁定快速的顯示錶格內容,頁面元素使用即時插入的方式,讓頁面更順滑 ,今天來討論一下vxe-table的合併行以及同一行的合併列
合併需要使用的屬性是 :
span-method
|
自定義合併函數,返回計算後的值 (不能用於虛擬滾動、展開行,不建議用於固定列、樹形結構)
|
因爲項目是採用jsp,而不是vue,所以使用的是jsp的寫法:
jsp頁面:
<div id="bsfxLayout" class="easyui-layout" data-options="fit: true">
<div data-options="region: 'center', border: false,fit: false,title: '',iconCls:''" style="border-bottom-width: 1px;" >
<input type="hidden" id="rprjContractId" name="rprjContractId" value="${rprjContractId}"/>
<input type="hidden" id="tableName" name="tableName" value="${tableName}"/>
<div id="dyfxtab" class="easyui-tabs" data-options="fit: true,border: false,tabPosition:'top',headerWidth:40,tabHeight:25">
<vxe-table
border
resizable
keep-source
height="100%"
ref="xTreeAcco"
empty-text=" "
:tooltip-config="tooltipConfig"
:cell-style="cellStyle"
:data="tableData"
:row-config="{isCurrent: true, isHover: true,height: 30,keyField:'id',useKey:true}"
:scroll-y="{enabled: true,gt:0}"
:keyboard-config="{isArrow: true, isEnter: true}"
header-align="center"
align="left"
:column-config="{resizable: true}"
@edit-actived="editActivedEvent"
@edit-closed="editClosedEvent"
:span-method="rowspanAndColspanMethod"
show-overflow
show-header-overflow
>
<vxe-column field="xh" title="序號" width="50" ></vxe-column>
<vxe-column field="bglx" title="變更類型" width="150"></vxe-column>
<vxe-column field="bglbh" title="變更編號" width="150"></vxe-column>
<vxe-column field="bgxm" title="工程名稱" width="150" :edit-render="{}"></vxe-column>
<vxe-column field="pzdwjwh" title="批准單位及文號" width="150" :edit-render="{}"></vxe-column>
<vxe-column field="bgmxlx" title="變更明細類型" width="150" :edit-render="{}"></vxe-column>
<vxe-column field="bgyy" title="變更原因" width="150" :edit-render="{}"></vxe-column>
<vxe-column field="zfdh" title="子目號" width="100" :edit-render="{}"></vxe-column>
<vxe-column field="zfdhsm" title="子目名稱" width="100" :edit-render="{}"></vxe-column>
<vxe-column field="zfdhdw" title="單位" width="100" :edit-render="{}"></vxe-column>
<vxe-colgroup title="變更(淨增減)工程量">
<vxe-column field="zjsl" title="1" align="right" header-align="center" width="100" :edit-render="{}"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="變更單價(元)">
<vxe-column field="bghdj" title="2" align="right" header-align="center" width="100" :edit-render="{}"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="變更(淨增減)金額(元)">
<vxe-column field="bgzjje" title="3=1*2" align="right" header-align="center" width="100" :edit-render="{}"></vxe-column>
</vxe-colgroup>
</vxe-table>
</div>
</div>
</div>
js:
var rprjContractId = undefined;
var tableName = undefined;
$(function () {
rprjContractId = $("#rprjContractId").val();
tableName = $("#tableName").val();
newVueApp();
});
function newVueApp(){
app=new Vue({
el: '#dyfxtab',
data: {
isValueDisabled:false,
tableData:[],
tooltipConfig: {//單元格提示
showAll: true,
enterable: true,
contentMethod: ({ column, row}) => {
const { field } = column
// 重寫默認的提示內容
return ''
}
}
},
created () {//第一次加載
loadData();
},
methods: {
currentChangeEvent ({ row }) {//單擊選中操作
},
cellContextMenuEvent ({ row }) {//右鍵選擇
app.$refs.xTreeAcco.setCurrentRow(row)
},
loadData (){//刷新
loadData();
},
getCurrentEvent () {//獲取選中行數據
VXETable.modal.alert(JSON.stringify(this.$refs.xTreeAcco.getCurrentRecord()))
},
cellStyle ({ row, column }) {//單元格樣式修改
if (column.field === 'secUid') {
if (row.id <= '0') {
return {
color: '#FF7F00',
cursor: 'default'
}
}
}
},
editClosedEvent ({ row, column }) {//修改後保存
//行編輯
},
editActivedEvent ({ row }) {//單元格禁用
/*if(row.id<0){
this.isValueDisabled=true;
}else{
this.isValueDisabled=false;
}*/
this.isValueDisabled=true;
},
rowspanMethod({ row, _rowIndex, column, visibleData }) {
// 合併行 : 需要合併的列字段,主要是把相鄰行的同一列的相等的單元格合併
let fields = ["xh", "bglx","bglbh","bgxm","pzdwjwh","bgmxlx","bgyy"];
const cellValue = row[column.property];
if (cellValue && fields.includes(column.property)) {
const prevRow = visibleData[_rowIndex - 1];
let nextRow = visibleData[_rowIndex + 1];
if (prevRow && prevRow[column.property] === cellValue) {
return { rowspan: 0, colspan: 0 };
} else {
let countRowspan = 1;
while (nextRow && nextRow[column.property] === cellValue) {
nextRow = visibleData[++countRowspan + _rowIndex];
}
if (countRowspan > 1) {
return { rowspan: countRowspan, colspan: 1 };
}
}
}
},
colspanMethod({ _rowIndex, columnIndex,row,column}) {
//合併列,主要是把同一行相鄰列的值相同的單元格合併
//把列和列的標識記錄起來
let fields = ["zfdh", "zfdhsm"];//同一行合併列的範圍
let columnMap = {};
columnMap[1] = "zfdh";
columnMap[2] = "zfdhsm";
const cellValue = row[column.property];
if (cellValue && fields.includes(column.property)) {
let prevColumn = columnMap[columnIndex - 1];
let nextColumn = columnMap[columnIndex + 1];
if (prevColumn && row[prevColumn] === cellValue) {
return { rowspan: 0, colspan: 0 };
} else {
let countColspan = 1;
while (nextColumn && row[nextColumn] === cellValue) {
nextColumn = columnMap[++countColspan + columnIndex];
}
if (countColspan > 1) {
return { rowspan: 1, colspan: countColspan };
}
}
}
},
rowspanAndColspanMethod({ row, _rowIndex, column, visibleData,columnIndex }) {
//合併行也合併列
//合併行 : 需要合併的列字段
let fields = ["xh", "bglx","bglbh","bgxm","pzdwjwh","bgmxlx","bgyy"];
const cellValue = row[column.property];
if (cellValue && fields.includes(column.property)) {
const prevRow = visibleData[_rowIndex - 1];
let nextRow = visibleData[_rowIndex + 1];
if (prevRow && prevRow[column.property] === cellValue) {
return { rowspan: 0, colspan: 0 };
} else {
let countRowspan = 1;
while (nextRow && nextRow[column.property] === cellValue) {
nextRow = visibleData[++countRowspan + _rowIndex];
}
if (countRowspan > 1) {
return { rowspan: countRowspan, colspan: 1 };
}
}
};
//把列和列的標識記錄起來
let columnMap = {};
columnMap[0] = "xh";
columnMap[1] = "bglx";
columnMap[2] = "bglbh";
columnMap[3] = "bgxm";
columnMap[4] = "pzdwjwh";
columnMap[5] = "bgmxlx";
columnMap[6] = "bgyy";
columnMap[7] = "zfdh";
columnMap[8] = "zfdhsm";
const cellValue2 = row[column.property];
let fields2 = ["xh",
"bglx","bglbh","bgxm","pzdwjwh","bgmxlx","bgyy","zfdh","zfdhsm"];//同一行合併列的範圍
if (cellValue && fields2.includes(column.property)) {
let prevColumn = columnMap[columnIndex - 1];
let nextColumn = columnMap[columnIndex + 1];
if (prevColumn && row[prevColumn] === cellValue) {
return { rowspan: 0, colspan: 0 };
} else {
let countColspan = 1;
while (nextColumn && row[nextColumn] === cellValue) {
nextColumn = columnMap[++countColspan + columnIndex];
}
if (countColspan > 1) {
return { rowspan: 1, colspan: countColspan };
}
}
}
},
}
})
}
//加載數據
function loadData(){
this.loading = true;
$.ajax({
method: "post",
url: "./iface/searchRprjContractTableData?rprjContractId="+rprjContractId+"&taleName=" + tableName,
data: {},
success: function (data) {
app.loading = false;
seqVueTree=1;
var datalist=[];
if(data.data && data.data.length > 0 ){
var list = data.data;
for (let index = 0; index < list.length; index++) {
const element = list[index];
datalist.push(element);
}
}
app.tableData= datalist;//查詢出的數據賦值給表
},
error: function(err) {
app.loading = false
console.log("失敗了: " + err);
}
});
}
效果圖