表头根据数据表类型改变，切换不同数据后出现表体重复表头的现象

收藏

动态绑定表头出现图片中的问题
详细描述
表头根据数据表类型改变，切换不同数据后出现表体重复表头的现象

Derrick.Jiao · Derrick.Jiao

您好，请问您用的数哪种类型的数据绑定呢？下面是学习指南的表格绑定的链接，您可以参考如何进行切换数据，若仍未解决您的问题，麻烦您在附件中复现您的问题，这边调研一下。
https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/data-binding/table-binding/purejs

美的人都早起 · 美的人都早起

Derrick.Jiao 发表于 2021-9-14 10:23
您好，请问您用的数哪种类型的数据绑定呢？下面是学习指南的表格绑定的链接，您可以参考如何进行切换数据， ...

<head>
<meta charset="UTF-8" />
<link
rel="stylesheet" type="text/css" />
<script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.14.1.6.min.js"></script>
<script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.14.1.6.min.js"></script>
<script src="https://cdn.grapecity.com.cn/spreadjs/scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
<style>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
position: relative;
}
.gc-tab-hover {
color: red;
background-image: none;
background-color: transparent;
border-style: solid;
border-left-color: #ababab;
border-bottom-color: #217346;
}
</style>
</head>
<body>
<div id="ss" class="sample-spreadsheets"></div>
<button id="change" onclick="changeData()">切换按钮</button>
<script>
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
var sheet = spread.getActiveSheet();
var colA = [
{ name: "id", displayName: "ID" },
{ name: "name", displayName: "Name", size: 100 },
{ name: "line", displayName: "Line", size: 80 },
{ name: "color", displayName: "Color" },
{ name: "price", displayName: "Price", formatter: "0.00", size: 80 ,addSpan:2,spanTitle:"信息"},
{ name: "cost", displayName: "Cost", formatter: "0.00", size: 80 },
{ name: "weight", displayName: "Weight", formatter: "0.00", size: 80 },
{ name: "discontinued", displayName: "Discontinued", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 100 },
{ name: "rating", displayName: "Rating" }
];
var colB = [
{ name: "id", displayName: "ID" },
{ name: "name", displayName: "Name", size: 100 },
{ name: "a", displayName: "a", size: 100 },
{ name: "b", displayName: "b", size: 100 },
{ name: "c", displayName: "c", size: 100 },
{ name: "line", displayName: "Line", size: 80 },
{ name: "color", displayName: "Color" },
{ name: "price", displayName: "Price", formatter: "0.00", size: 80 ,addSpan:2,spanTitle:"信息"},
{ name: "cost", displayName: "Cost", formatter: "0.00", size: 80 },
{ name: "weight", displayName: "Weight", formatter: "0.00", size: 80 },
{ name: "discontinued", displayName: "Discontinued", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 100 },
{ name: "rating", displayName: "Rating" }
];
var dataA = [
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:''},
];
var dataB = [
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
{id:'1',name:'1',line:'1',color:'1',price:'1',cost:'1',weight:'1',discontinued:'1',rating:'',a:'',b:'',c:''},
];
sheet.setDataSource(dataA);
sheet.bindColumns(colA);
sheet.setRowCount(2, GC.Spread.Sheets.SheetArea.colHeader);
colA.forEach((item, index) => {
if(!!(item.addSpan)){
sheet.addSpan(0, index, 2, item.span, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(0, index, item.spanTitle, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(1, index, item.displayName, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(1, index + 1, colA[index + 1].displayName, GC.Spread.Sheets.SheetArea.colHeader);
}
})
function changeData(){
sheet.setDataSource(dataB);
sheet.bindColumns(colB);
sheet.setRowCount(2, GC.Spread.Sheets.SheetArea.colHeader);
colB.forEach((item, index) => {
if(!!(item.addSpan)){
sheet.addSpan(0, index, 2, item.span, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(0, index, item.spanTitle, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(1, index, item.displayName, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(1, index + 1, colB[index + 1].displayName, GC.Spread.Sheets.SheetArea.colHeader);
}
})
}
</script>
</body>
</html>