TableSheet 行号显示

概述本 Demo 展示了如何在 TableSheet 中显示和隐藏行号。TableSheet 支持在独立的行标题中显示行号，类似于 Worksheet 中的行号显示。Demo 通过复选框实现了动态切换行号显示的功能。实现思路创建 Workbook 并初始化 DataManager，配置远程数据源使用 addSheetTab 方法创建 TableSheet 定义数据视图的列结构，包含产品名称、单价、库存等字段使用 fetch 方法获取数据后，通过 setDataView 将视图绑定到 TableSheet 设置 showRowNumber 选项为 true，显示行号添加复选框事件监听，根据用户操作动态切换行号显示状态代码解析创建 TableSheet 使用 addSheetTab 方法创建 TableSheet。第一个参数指定表单索引位置，第二个参数设置表单名称，第三个参数指定表单类型为 GC.Spread.Sheets.SheetType.tableSheet。创建数据视图使用 addView 方法定义数据视图，通过数组参数指定列的字段映射、标题文本和列宽。value 属性绑定数据源字段，caption 设置列标题，width 设置列宽。创建视图后，通过 setDataView 方法将其绑定到 TableSheet。设置行号显示通过 options.showRowNumber 属性控制行号显示。设置为 true 显示行号，设置为 false 隐藏行号。行号显示在 TableSheet 左侧的独立行标题中，从 1 开始编号。动态切换行号显示监听复选框的 change 事件，根据复选框的选中状态动态设置 showRowNumber 属性。这种方式允许用户在运行时交互式地控制行号显示。运行效果页面加载后，TableSheet 左侧显示行号标题，从 1 开始依次编号取消勾选"显示行号"复选框后，行号会被隐藏重新勾选复选框后，行号会重新显示

/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
spread.clearSheets();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var dataManager = spread.dataManager();
var productTable = dataManager.addTable("productTable", {
remote: {
read: {
url: getBaseApiUrl() + "/Product"
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(0, "MyTableSheet", GC.Spread.Sheets.SheetType.tableSheet);
//bind a view to the table sheet
productTable.fetch().then(function () {
var myView = productTable.addView("myView", [
{ value: "ProductName", caption: "Name", width: 250 },
{ value: "QuantityPerUnit", caption: "Quantity Per Unit", width: 140 },
{ value: "UnitPrice", caption: "Unit Price", width: 140 },
{ value: "UnitsInStock", caption: "Units In Stock", width: 140 },
{ value: "UnitsOnOrder", caption: "Units On Order", width: 140 },
{ value: "Discontinued", width: 120 }
]);
sheet.setDataView(myView);
sheet.options.showRowNumber = true;
});
var showButton = document.getElementById('show-button');
showButton.addEventListener('change', function () {
sheet.options.showRowNumber = showButton.checked;
});
spread.resumePaint();
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/SpreadJSTutorial\//)[0] + 'server/api';
}

<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="spreadjs culture" content="zh-cn" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>  
<script src="$DEMOROOT$/spread/source/data/employees.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div id="options-container" class="options-container">
<fieldset>
<legend>行号</legend>
<div class="field-line">
<span>显示： </span><input type="checkbox" checked="checked" id="show-button" />
</div>
</fieldset>
</div>
</div>
</html>

body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
fieldset {
padding: 6px;
margin: 0;
margin-top: 10px;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
fieldset span,
fieldset input,
fieldset select {
display: inline-block;
text-align: left;
}
fieldset span {
width: 50px;
}
fieldset input[type=text] {
width: calc(100% - 58px);
}
fieldset input[type=button] {
width: 100%;
text-align: center;
}
fieldset select {
width: calc(100% - 50px);
}
.field-line {
margin-top: 4px;
}

SpreadJS 在线示例