Spread JS 右键隐藏显示

收藏

点击隐藏后，再同时选中被隐藏列的左右两列，点击显示，被隐藏的列没有显示出来，请问有什么解决方法吗？

Clark.Pan · Clark.Pan

个人猜测，您可以看看您隐藏的列是隐藏还是将列宽设置成0了，列宽设置成0与隐藏虽然从显示效果上是一样的，但是实际有不同，一个可以通过显示显示回来，一个不行。
如果不是上述问题，请您发一下具体的demo，我们详细再调查一下。

潘棒棒 · 潘棒棒

Clark.Pan 发表于 2022-11-7 17:35
个人猜测，您可以看看您隐藏的列是隐藏还是将列宽设置成0了，列宽设置成0与隐藏虽然从显示效果上是一样的， ...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="spreadjs culture" content="zh-cn" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" , user-scalable=no" />
<title>SpreadJS Demo : 表单保护分组列</title>
<link rel="icon" type="image/png" />
<link rel=" stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css"
/>
<script type="text/javascript"
src="https://cdn.grapecity.com.cn/spreadjs/scripts/gc.spread.sheets.all.12.0.6.min.js"></script>
<script type="text/javascript"
src="https://cdn.grapecity.com.cn/spreadjs/scripts/resources/zh/gc.spread.sheets.resources.zh.12.0.6.min.js"></script>
<script type="text/javascript" src="https://cdn.grapecity.com.cn/spreadjs/scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
src="https://demo.grapecity.com.cn/SpreadJS/TutorialSample/js/spread/license.js"></script>
<script type="text/javascript" src="js/fenzuShuju.js"></script>
<script type="text/javascript" src="js/patlist.js"></script>
<!-- Local Reference
<link rel="icon" type="image/png" href="images/icon.ico" />
<link rel="stylesheet" type="text/css" href="css/basscss.min.css ">
<link rel="stylesheet" type="text/css" href=" css/gc.spread.sheets.excel2013white.12.0.6.css">
<script type="text/javascript" src="scripts/gc.spread.sheets.all.12.0.6.min.js"></script>
<script type="text/javascript" src="/scripts/gc.spread.sheets.resources.zh.12.0.6.min.js"></script>
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://demo.grapecity.com.cn/SpreadJS/TutorialSample/js/spread/license.js"></script>
-->
<style>
body {
background: rgb(250, 250, 250);
color: #333;
}
#ss {
border: 1px #ccc solid;
}
.container {
width: 95%;
background: rgb(250, 250, 250);
margin: 0 auto;
height: 600px;
}
.full-height {
height: 100%;
}
.left {
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<!-- <div class="container">
<div class="clearfix border-bottom">
<div class="col col-8">
<h3>SpreadJS Demo : 表单</h3>
</div>
<div class="col col-4 right-align align-middle">
<h5>
<ul class="list-reset">
<li class="inline-block mr1"><a class="btn" href="https://www.grapecity.com.cn/developer/spreadjs "
target="_blank ">产品官网</a></li>
<li class="inline-block mr1"><a class="" href="https://gcdn.grapecity.com.cn/showforum-185-1.html "
target="_blank ">论坛求助</a></li>
<li class="inline-block mr1"><a class="" href="https://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples "
target="_blank ">更多示例</a></li>
</ul>
</h5>
</div>
</div>
<div class="full-height clearfix mt2">
<div class="col col-4 left">
<h4 class="mb0">保护表单</h4>
<div>
<input type="checkbox" id="protect"/>
<label for="protect" >表单保护</label>
</div>
<div>
<input type="checkbox" id="cell"/>
<label for="cell" >选择被锁定单元格</label>
</div>
<div>
<input type="checkbox" id="uncell"/>
<label for="uncell" >选择未被锁定的单元格</label>
</div>
<div>
<input type="checkbox" id="sort"/>
<label for="sort" >排序</label>
</div>
<div>
<input type="checkbox" id="filter"/>
<label for="filter" >过滤</label>
</div>
<div>
<input type="checkbox" id="resizerow"/>
<label for="resizerow" >调整行高</label>
</div>
<div>
<input type="checkbox" id="resizecol"/>
<label for="drag" >调整列宽</label>
</div>
<div>
<input type="checkbox" id="editObj"/>
<label for="editObj" >编辑对象</label>
</div>
<div>
<input type="checkbox" id="insertrow"/>
<label for="insertrow" >插入行</label>
</div>
<div>
<input type="checkbox" id="insertcol"/>
<label for="insertcol" >插入列</label>
</div>
<div>
<input type="checkbox" id="delerow"/>
<label for="delerow" >删除行</label>
</div>
<div>
<input type="checkbox" id="delecol"/>
<label for="delecol" >删除列</label>
</div>
<h4 class="mb0">分组列</h4>
</div> -->
<div class="col col-8 full-height ">
<div id="ss" style="height:680px"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript ">
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {
sheetCount: 1
});
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
spread.suspendPaint();
var salesData = [
['Salesperson', 'Region'],
[ 'Joe', 'North' ],
[ 'Robert', 'South' ],
[ 'Michelle', 'East' ],
[ 'Erich', 'West' ],
[ 'Dafna', 'North' ],
[ 'Rob', 'South' ],
[ 'Joe', 'North' ],
[ 'Robert', 'South' ],
[ 'Michelle', 'East' ],
[ 'Erich', 'West' ],
[ 'Dafna', 'North' ],
[ 'Rob', 'South' ],
[ 'Joe', 'North' ],
[ 'Robert', 'South' ],
['Michelle', 'East']
];
sheet.setArray(0, 0, salesData);
sheet.setColumnWidth(0, 120);
sheet.setColumnWidth(1, 120);
//unlocked cells
var style = new GC.Spread.Sheets.Style();
style.locked = false;
style.backColor = '#C3C3C3';
sheet.setStyle(-1, 8, style);
sheet.setStyle(-1, 9, style);
sheet.setStyle(15, -1, style);
sheet.setStyle(16, -1, style);
sheet.setStyle(8, 2, style);
//locked cells
var style2 = new GC.Spread.Sheets.Style();
style2.locked = true;
style2.backColor = '#F4F8EB';
sheet.setStyle(13, -1, style2);
sheet.setStyle(18, 8, style2);
sheet.setStyle(0, 0, style2)
sheet.setStyle(0, 1, style2);
var filter = new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(1, 0, 100, 2));
sheet.rowFilter(filter);
sheet.comments.add(5, 4, 'locked comment');
sheet.comments.add(22, 4, 'unlocked comment');
sheet.comments.get(5, 4).locked(true).displayMode(1);
sheet.comments.get(22, 4).locked(false).displayMode(1).lockText(false);
var _commandManager = spread.commandManager();
_commandManager.execute({
cmd: "outlineColumn",
sheetName: sheet.name(),
index: 11,
count: 3
});
_commandManager.execute({
cmd: "outlineRow",
sheetName: sheet.name(),
index: 18,
count: 3
});
spread.resumePaint();
var option = {
allowSelectLockedCells:true,
allowSelectUnlockedCells:true,
allowFilter: true,
allowSort: false,
allowResizeRows: true,
allowResizeColumns: false,
allowEditObjects: false,
allowDragInsertRows: false,
allowDragInsertColumns: false,
allowInsertRows: false,
allowInsertColumns: false,
allowDeleteRows: false,
allowDeleteColumns: false,
allowOutlineColumns: false,
allowOutlineRows: false
};
sheet.options.protectionOptions = option;
sheet.options.isProtected = true;
option = sheet.options.protectionOptions;
function ContextMenu(){}
ContextMenu.prototype = new GC.Spread.Sheets.ContextMenu.ContextMenu(spread);
ContextMenu.prototype.onOpenMenu = function (menuData, itemsDataForShown, hitInfo, spread) {
console.log(menuData, itemsDataForShown, hitInfo, spread);
for(let i=0; i<itemsDataForShown.length; i++){
var item = itemsDataForShown[i];
if(item.name === "gc.spread.hideColumns"){
item.disable = false;
} else if(item.name === "gc.spread.unhideColumns") {
item.disable = false;
}
}
};
// 将自定义右键菜单赋值给spread.contextMenu
spread.contextMenu = new ContextMenu();
}
</script>
</html>