首页 › 求助中心 › V12版本

Yaykl 发表于 2024-11-15 17:14:34

V12版本

现在初始化表单以后，把鼠标移到表头上就会变色，而且还能选择一列，怎样让鼠标光标移到表头时不变色且不能通过点击表头选择一列

Lynn.Dou 发表于 2024-11-15 17:14:35

您的代码中，将表单的行数设置为了0，将表头设置为两行。也就是说，截图中其实只有表头没有普通单元格。
这并非常规使用方式，所以需要您先明确这是否符合设计。且代码中看存在冗余代码，建议梳理清楚需求后重新设计。

再回到您两个需求本身：
1、不希望表头被选中
sheet.clearSelection()
2、不允许整列表头被选中（只读）
开启表单保护，且设置allowSelectLockedCells、allowSelectUnlockedCells 为 false。
//设置表单保护
                sheet.options.protectionOptions = {
                  allowSelectLockedCells: false,
                  allowSelectUnlockedCells: false,
                };
                sheet.options.isProtected = true;

Lynn.Dou 发表于 2024-11-18 09:45:34

您好，
参考这篇文章自定义表头hover等样式。
https://gcdn.grapecity.com.cn/showtopic-90058-1-1.html
另外，“点击表头选择一列”是维持Excel的设计，为什么要禁止这一操作呢？

Yaykl 发表于 2024-11-18 10:05:12

Lynn.Dou 发表于 2024-11-18 09:45
您好，
参考这篇文章自定义表头hover等样式。
https://gcdn.grapecity.com.cn/showtopic-90058-1-1.html
...

我这个表头序号栏次那一列，在初始化完表单以后就自动变黄色，就是像把鼠标焦点挪上去的那种黄色，但是我没有设置初始化完以后默认选中第一列这个操作，这是因为什么

Lynn.Dou 发表于 2024-11-18 16:55:06

从描述无法判断原因，请直接提供一个可复现的demo，我们验证下。

Yaykl 发表于 2024-11-19 09:20:19

Lynn.Dou 发表于 2024-11-18 16:55
从描述无法判断原因，请直接提供一个可复现的demo，我们验证下。

html代码：
<link rel="stylesheet" type="text/css" href="../wsql/exec?sk=gc.spread.sheets.12.2.1.css" />
<style>
    body {
      position: relative;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
</style>

<div id="container" style="position: relative;height:96%;display:flex;flex-direction: column;">
    <div id="spread" style="flex:1;"></div>
</div>
js代码：
window.lc();

                const GcSpread = GC.Spread;
                const SpreadNS = GcSpread.Sheets;
                const Spread = SpreadNS.Workbook;

                //// region 基础用法
               

                var excelio = new GC.Spread.Excel.IO(); // 导入导出组件

                GC.Spread.Common.CultureManager.culture("zh-cn");//应用汉化
               
                var spread = new GC.Spread.Sheets.Workbook( // spread核心组件
                  document.getElementById('spread'),
                  {
                        sheetCount: 1,
                        scrollbarShowMax: false,
                        scrollbarMaxAlign: true,
                        tabNavigationVisible: false,
                        tabStripVisible: false,
                        newTabVisible: false,
                  }

                );
                //spreadInit();
                //初始化表单皮肤
                initSpread(spread);
                let sheet = spread.getActiveSheet();
                //设置整行选择模式
                selectionPattern(spread);
                //隐藏默认序号列
                sheet.setColumnVisible(0, false, SpreadNS.SheetArea.rowHeader);
                //设置表头
                var colHeader = SpreadNS.SheetArea.colHeader;
                sheet.setRowCount(2, colHeader);
                sheet.setColumnCount(6);
                setHeader(sheet, colHeader);
                refreshScrollBar(spread);
                spread.options.grayAreaBackColor = 'white';
                // function spreadInit() {
                  
                  
                  
                // }
                window.sp = spread;
               
                //初始化表单皮肤
                function initSpread(spread) {
                  if (!spread) {
                        console.warn('spread表格对象不能为空');
                        return;
                  }
                  var sheet = spread.getActiveSheet();
                  spread.options.referenceStyle = SpreadNS.ReferenceStyle.R1C1;
                  sheet.suspendPaint();//停止重绘
                  //设置初始行数为0行
                  sheet.setRowCount(0)
                  //设置公共配置
                  var colcount = sheet.getColumnCount();
                  sheet.selectionPolicy(GC.Spread.Sheets.SelectionPolicy.range);
                  spread.options.selectionBackColor = 'rgba(86,180,255,0.3)'
                  spread.options.selectionBorderColor = '#CCE8FF'

                  sheet.defaults.rowHeight = 30;
                  var style = new SpreadNS.Style();
                  style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
                  style.font = "11pt SimSun";
                  sheet.setDefaultStyle(style);
                  // 边框
                  const lineBorder = new SpreadNS.LineBorder(
                        "#B0C4DE",
                        SpreadNS.LineStyle.thin
                  );

                  for (let index = 0; index < colcount; index++) {
                        //"#B0C4DE"亮钢蓝边线
                        sheet.getRange(-1, index).borderBottom(lineBorder);
                        sheet.getRange(-1, index).borderTop(lineBorder);
                        sheet.getRange(-1, index).borderLeft(lineBorder);
                        sheet.getRange(-1, index).borderRight(lineBorder);
                        sheet.getRange(-1, index, SpreadNS.SheetArea.colHeader).borderBottom(lineBorder);
                        sheet.getRange(-1, index, SpreadNS.SheetArea.colHeader).borderTop(lineBorder);
                        sheet.getRange(-1, index, SpreadNS.SheetArea.colHeader).borderLeft(lineBorder);
                        sheet.getRange(-1, index, SpreadNS.SheetArea.colHeader).borderRight(lineBorder);
                  }
                  //改变表头的宽度触发的方法
                  sheet.bind(GC.Spread.Sheets.Events.ColumnWidthChanged, function (e, info) {
                        refreshXScrollBar(spread, sheet)
                  });
                  //设置表单保护
                  sheet.options.isProtected = true;
                  sheet.resumePaint();//重绘
                }
                //设置表头
                function setHeader(sheet, colHeader) {
                  
                  //设置表头第一行内容
                  sheet.setValue(0, 0, '序号', colHeader);
                  sheet.setValue(0, 1, '选择', colHeader);
                  sheet.setValue(0, 2, '账号', colHeader);
                  sheet.setValue(0, 3, '姓名', colHeader);
                  sheet.setValue(0, 4, '手机号', colHeader);
                  sheet.setValue(0, 5, '密码', colHeader);
                  //设置表头第二行内容
                  var a = 0;
                  for (var i = 0; i < sheet.getColumnCount(); i++) {
                        if (i == 0) {
                            sheet.setValue(1, i, '栏次', colHeader);
                        } else {
                            a++;
                            sheet.setValue(1, i, a, colHeader);
                        }
                  }
                  //绑定表头字段
                  sheet.bindColumn(0, { name: 'rn', displayName: '栏次', size: 50 });
                  sheet.bindColumn(1, { name: 'ck', displayName: '1', size: 50 });
                  sheet.bindColumn(2, { name: 'code', displayName: '2', size: 200 });
                  sheet.bindColumn(3, { name: 'name', displayName: '3', size: 120 });
                  sheet.bindColumn(4, { name: 'mobile', displayName: '4', size: 200 });
                  sheet.bindColumn(5, { name: 'pwd', displayName: '5', size: 120 });
                  
                  //允许用户改变列宽
                  sheet.options.protectionOptions.allowResizeColumns = true;
                  //定义复选列的CellType
                  var cellType = new GC.Spread.Sheets.CellTypes.CheckBox();
                  cellType.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right);
                  cellType.isThreeState(false);
                  sheet.getRange(-1, 1, -1, 1).cellType(cellType);
                  //解锁复选列
                  sheet.getRange(-1, 1, -1, 1).locked(false);
                  
                }
                // 设置单击选中行
                function selectionPattern(spread) {
                  if (!spread) {
                        console.warn('spread对象不能为空');
                        return;
                  }
                  //获取当前sheet页
                  const sheet = spread.getActiveSheet();
                  // 设置单击选中行
                  sheet.selectionUnit(GC.Spread.Sheets.SelectionUnit.row);
                  sheet.selectionPolicy(GC.Spread.Sheets.SelectionPolicy.range);
                  spread.options.selectionBackColor = 'rgba(86,180,255,0.3)';
                  spread.options.selectionBorderColor = '#CCE8FF';
                }
                //控制X和Y轴滚动条是否显示或隐藏
                function refreshScrollBar(spreadObj) {
                  if (!spreadObj) {
                        console.warn('表格对象不能为空');
                        return;
                  }
                  //x轴滚动条计算方法
                  refreshXScrollBar(spreadObj);
                  //y轴滚动条计算方法
                  refreshYScrollBar(spreadObj);
                }
                //控制X轴滚动条是否显示或隐藏
                function refreshXScrollBar(spread, sheet) {
                  if (!spread) {
                        console.warn('spread表格对象不能为空');
                        return;
                  }
                  sheet = sheet == null ? spread.getActiveSheet() : sheet;
                  let colCount = sheet.getColumnCount() // 总列数

                  let rcol = sheet.getViewportRightColumn(1) // 视图列数
                  console.log('colCount', colCount);
                  console.log('rcol', rcol);
                  if (colCount === rcol + 1) {
                        spread.options.showHorizontalScrollbar = false
                  } else if (colCount > rcol + 1) {
                        spread.options.showHorizontalScrollbar = true
                  }
                }
                //控制Y轴滚动条是否显示或隐藏
                function refreshYScrollBar(spread) {
                  if (!spread) {
                        console.warn('spread表格对象不能为空');
                        return;
                  }
                  const sheet = spread.getActiveSheet();
                  if ((sheet.getViewportBottomRow(1) + 1) >= sheet.getRowCount() && sheet.getViewportTopRow(1) <= 0) {
                        spread.options.showVerticalScrollbar = false;
                  } else {
                        spread.options.showVerticalScrollbar = true;
                  }
                }
麻烦给看一下吧，谢谢

查看完整版本: V12版本