概述
这个 demo 演示了 TableSheet 中的多列排序能力。页面一方面通过 allowSorts 控制整个工作表是否允许多列排序，另一方面提供列选择框和复选框，用来动态切换某一列是否显示排序能力，从而展示全局排序开关和列级排序配置的配合方式。
实现思路
创建 Workbook，新建一个 TableSheet 工作表，并根据页面上的“允许排序”复选框初始化 sheet.options.allowSorts。
生成员工与部门数据，通过 dataManager.addTable(...) 创建数据表，并建立部门关联关系。
定义视图列 cols，在每一列上使用 allowSort 绑定对应的列级排序开关状态。
调用 employeeTable.addView(...) 创建数据视图，再通过 sheet.setDataView(...) 绑定到 TableSheet。
监听页面上的两个复选框和列下拉框变化：
allowSorts 控制整个工作表是否允许多列排序
columnAllowSort 控制当前选中列是否允许排序，并通过 ModifyColumn 命令实时更新列配置
代码解析
demo 初始化工作表时，会创建 TableSheet 页签，并把页面复选框的值同步到 sheet.options.allowSorts。这一步决定了当前工作表是否开启多列排序能力：
数据部分通过 generateData(1000) 构造员工列表，并准备员工表与部门表。示例数据中包含中文姓名、省份、职位和薪资，便于直接观察排序结果：
视图列定义是这个 demo 的核心。每一列都从 columnAllowSort 中读取当前状态，并设置到列配置的 allowSort 上，因此不同列可以独立控制是否显示排序能力：
交互部分分成两层。第一层是全局开关，直接修改 sheet.options.allowSorts；第二层是列级控制，通过命令方式更新当前列的 allowSort：
这种实现方式的重点在于：既保留了 TableSheet 的多列排序能力，又允许按列动态控制排序入口是否可见。
运行效果
页面加载后会显示一个名为“多列排序”的 TableSheet 工作表。
用户可以通过“允许排序”复选框统一开启或关闭工作表的多列排序能力。
用户可以在下拉框中选择某一列，再通过“显示排序”复选框决定该列是否显示排序能力。
表格中会显示中文列标题，例如“名”“姓”“生日”“省份”“部门编号”“职位”“薪资”。
员工数据包含中文姓名、省份和职位，排序结果更容易直接观察。
API 参考
sheet.options.allowSorts：控制 TableSheet 是否允许多列排序。
dataManager.addTable(...)：创建数据表。
dataManager.addRelationship(...)：建立数据表之间的关联关系。
addView(...)：为数据表创建视图列配置。
sheet.setDataView(...)：将视图绑定到 TableSheet 工作表。
spread.commandManager().execute(...)：执行列配置更新命令，这里用于动态修改列的 allowSort 设置。
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
var tableName = "Employee";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var sheet, spread;
var columnAllowSort = {
id: true, firstName: true, lastName: true, birth: true,
state: true, dept: true, title: true, salary: true
};
var columnIndexMap = {
id: 0, firstName: 1, lastName: 2, birth: 3,
state: 4, dept: 5, title: 6, salary: 7
};
var localizedFirstNames = ["伟", "芳", "娜", "敏", "静", "磊", "洋", "勇", "艳", "杰"];
var localizedLastNames = ["张", "王", "李", "刘", "陈", "杨", "赵", "黄", "周", "吴"];
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread();
bindEvents();
};
function initSpread() {
spread = GC.Spread.Sheets.findControl(document.getElementById("ss"));
spread.suspendPaint();
// 1. 初始化工作表
spread.clearSheets();
spread.clearSheetTabs();
sheet = spread.addSheetTab(0, "多列排序", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowSorts = getElementById("allowSorts").checked;
var data = generateData(1000);
var dataManager = spread.dataManager();
var employeeTable = dataManager.addTable("employeeTable", {
data: data.employees
});
var departmentTable = dataManager.addTable("departmentTable", {
data: data.departments
});
dataManager.addRelationship(employeeTable, "dept", "department", departmentTable, "dept_no", "employees");
dataManager.addRelationship(departmentTable, "leader_id", "manager", employeeTable, "id", "a");
spread.resumePaint();
var numericStyle = new GC.Spread.Sheets.Style();
numericStyle.formatter = "$ #,##0.00";
var formatStringStyle = new GC.Spread.Sheets.Style();
formatStringStyle.formatter = 'yyyy-mm-dd';
var cols = [
{ value: 'id', caption: 'ID', allowSort: columnAllowSort.id},
{ value: 'firstName', caption: '名', width: 100, allowSort: columnAllowSort.firstName},
{ value: 'lastName', caption: '姓', width: 100, allowSort: columnAllowSort.lastName},
{ value: 'birth', caption: '生日', width: 100, style: formatStringStyle, allowSort: columnAllowSort.birth},
{ value: 'state', caption: '省份', width: 100, allowSort: columnAllowSort.state},
{ value: 'dept', caption: '部门编号', width: 130, allowSort: columnAllowSort.dept},
{ value: 'title', caption: '职位', width: 120, allowSort: columnAllowSort.title},
{ value: 'salary', caption: '薪资', style: numericStyle, width: 100, allowSort: columnAllowSort.salary},
];
var employeeView = employeeTable.addView("employeeView", cols, undefined);
employeeView.fetch().then(function (args) {
sheet.suspendPaint();
sheet.setDataView(employeeView);
sheet.resumePaint();
});
}
function randomFromList(list) {
return list[~~(Math.random() * list.length)];
}
function generateData(itemCount) {
var data = {employees:[], departments: departments};
var states = ["北京", "上海", "广东", "浙江", "江苏"];
var department_id = ["D001", "D002", "D003", "D004", "D005", "D006", "D007", "D008", "D009"];
var title = ["高级工程师", "专员", "工程师", "高级专员", "助理工程师", "技术主管", "经理"];
for (var i = 0; i < itemCount; i++) {
var date = new Date(parseInt(Math.random() * 12052666) * 24 * 3600); // 时间戳
date.setHours(0,0,0,0);
var item = {
id: i + 1,
firstName: randomFromList(localizedFirstNames),
lastName: randomFromList(localizedLastNames),
birth: date,
state: randomFromList(states),
dept: i < 9 ? department_id[i] : randomFromList(department_id),
title: i < 9 ? "经理" : randomFromList(title),
salary: 3000 + parseInt(Math.random() * 100) * 500,
};
data.employees.push(item);
}
return data;
}
function bindEvents() {
var allowSortsCheckbox = document.getElementById('allowSorts');
allowSortsCheckbox.addEventListener('change', function () {
if (sheet) {
sheet.options.allowSorts = allowSortsCheckbox.checked;
}
});
var columnSelect = document.getElementById('columnSelect');
var columnAllowSortCheckbox = document.getElementById('columnAllowSort');
columnSelect.addEventListener('change', function () {
columnAllowSortCheckbox.checked = columnAllowSort[columnSelect.value];
});
columnAllowSortCheckbox.addEventListener('change', function () {
var colName = columnSelect.value;
columnAllowSort[colName] = columnAllowSortCheckbox.checked;
var colIndex = columnIndexMap[colName];
spread.commandManager().execute({
cmd: "ModifyColumn",
sheetName: "多列排序",
col: colIndex,
column: { value: colName, allowSort: columnAllowSort[colName] }
});
});
}
function getElementById (domId) {
return document.getElementById(domId);
}
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/data/departments.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.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>
<input type="checkbox" id="allowSorts" checked/>
<label for="allowSorts">允许排序</label>
<br>
</fieldset>
<fieldset>
<legend>列排序选项</legend>
<label for="columnSelect">列：</label>
<select id="columnSelect">
<option value="id">ID</option>
<option value="firstName">名</option>
<option value="lastName">姓</option>
<option value="birth">生日</option>
<option value="state">省份</option>
<option value="dept">部门编号</option>
<option value="title">职位</option>
<option value="salary">薪资</option>
</select>
<div style="margin-top: 6px;">
<input type="checkbox" id="columnAllowSort" checked/>
<label for="columnAllowSort">显示排序</label>
</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;
}
