spreadjs如何实现选取变化的时候一行的颜色变化

收藏

本帖最后由肖小云于 2019-9-9 11:59 编辑

如题，现在有一个demo用的是SelectionChanged的事件，但是有一个bug是插入一行的时候再点击就会出现2行变颜色的情况，请问应该如何解决呢？

PS:附带demo请下载

<html>
<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定位列</title>
<link rel="icon" type="image/png" href="https://demo.grapecity.com.cn/SpreadJS/TutorialSample/icon.ico" />
<link rel=" stylesheet" type="text/css" href="https://cdn.grapecity.com.cn/spreadjs/css/basscss.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.grapecity.com.cn/spreadjs/css/gc.spread.sheets.excel2013white.12.0.6.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>
<style>
body {
background: rgb(250, 250, 250);
color: #333;
}
#ss {
border: 1px #ccc solid;
}
.container {
width: 60%;
background: rgb(250, 250, 250);
margin: 0 auto;
height: 480px;
}
.full-height {
height: 100%;
}
</style>
</head>
<body>
<div id="ss"></div>
<script>
var lastRow = 0;
var spreadNS = GC.Spread.Sheets;
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var customers = [{
ID: 0,
Name: 'A',
Info1: 'Info0'
}, {
ID: 1,
Name: 'B',
Info1: 'Info1'
}, {
ID: 2,
Name: 'C',
Info1: 'Info2'
}];
var sheet = spread.getActiveSheet();
sheet.setDataSource(customers);
// sheet.bindColumns(colInfos);
sheet.bind(GC.Spread.Sheets.Events.CellClick, function(e, args) {})
sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function(e, args) {
console.log(args)
// 绑定行变化颜色跟着变化
var sheet = args.sheet;
var col = args.newSelections[0].col;
var row = args.newSelections[0].row;
var value = sheet.getText(row, col);
lastRow = args.oldSelections[0].row;
sheet.getRange(lastRow, -1, 1, -1).backColor(undefined);
sheet.getRange(row, -1, 1, -1).backColor("lightgreen");
})
</script>
</body>
</html>

复制代码

Fiooona · Fiooona

您好可以再描述下您是怎么操作的吗？我按上面的操作并没有复现问题

肖小云 · 肖小云

Fiooona 发表于 2019-9-9 17:51
您好可以再描述下您是怎么操作的吗？我按上面的操作并没有复现问题

您好，直接插入一行然后鼠标点到插入行的位置的时候会发生的情况

Fiooona · Fiooona

这个问题的原因是由于新增行后并没有改变SelectionChanged事件的args.oldSelections中的索引值，解决这个问题可以参考下列代码：

sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function(e, args) {
console.log(args)
// 绑定行变化颜色跟着变化
var sheet = args.sheet;
var col = args.newSelections[0].col;
var row = args.newSelections[0].row;
var value = sheet.getText(row, col);
lastRow = args.oldSelections[0].row;
for(var i = 0;i<sheet.getRowCount();i++){
sheet.getRange(i, -1, 1, -1).backColor(undefined);
}
sheet.getRange(row, -1, 1, -1).backColor("lightgreen");
})

复制代码

		自动登录	找回密码
密码			立即注册

[已处理] spreadjs如何实现选取变化的时候一行的颜色变化

3 个回复

微信认证勋章