前言
樹形結構是一種非常常見的數據結構，它由一組以層次關係排列的節點組成。樹的結構類似於自然界中的一棵樹，樹根對應頂層節點，而子節點則分支延伸出來。
在樹形結構中，每個節點可以有零個或多個子節點，但每個節點只能有一個父節點（除了根節點）。這種層級關係使得樹形結構適用於許多實際問題的建模和解決。樹形結構可以非常清晰、簡潔地表示數據的上下級關係，例如省市區對應的樹形結構就是這樣的：
像“雁塔區”、“延安市”等這些沒有子級的數據，稱爲樹形結構的“葉子節點”，而那些有子級的，則稱爲“分枝節點”。
而在表格中的樹形結構的表示形式如下所示（通過縮進的方式）：
那麼今天小編就爲大家介紹如何實現一個表格中的樹形結構。
業務場景需求
現在有一個業務需求場景：某銀行在全國各地的區縣級區域開設了分行，並希望以區、市、省爲維度，做一個存貸款量的統計表。
在該場景下有這樣的一些需要實現的效果：
1.級聯摺疊/展開省市
用戶點擊省和市的序號，其子級會自動摺疊和展開。
2.自動計算並保護數據
用戶無須編輯市和省的數據，而是自動計算其子集之和，新增、刪除等操作也遵從這個原則。
3.拖拽調整數據層級
對於層級錯誤的數據（如漢中市應該屬於陝西省，而非西安市），用戶可以通過拖拽來實現層級的移動，也可以用ctrl shift拖拽來改變數據在同一層級的位置。
4.靈活新增數據
用戶可以新增數據，新增時可以選擇添加爲當前數據的子級，也可以添加爲同級。
5.刪除數據及子級
用戶在刪除數據時，若數據有子級，需要一同刪除其子數據，如刪除西安市，需要將其下的灞橋區、碑林區等一併刪除。
6.數據校驗提示
用戶在編輯總合計行時，系統會自動進行數據校驗，若數據校驗未通過，則智能提示並將背景色變化，同時鼠標懸浮可查看批註信息。這種智能數據校驗功能，可以幫助用戶更好地規範數據錄入，提高數據的準確性和可靠性。
代碼實現過程：
（1）上傳數據（data.js）
//部分代碼，完整代碼請查看Gitee:https://gitee.com/GrapeCity/tree-form
let data = {
data: [{
name: "陝西省",
no: "1",
this_year_deposit: null,
last_year_deposit: null,
this_year_month_deposit: null,
last_year_month_deposit: null,
this_year_loan: null,
last_year_loan: null,
this_year_month_loan: null,
last_year_month_loan: null,
}, {
name: "西安市",
no: "1.1",
this_year_deposit: null,
last_year_deposit: null,
this_year_month_deposit: null,
last_year_month_deposit: null,
this_year_loan: null,
last_year_loan: null,
this_year_month_loan: null,
last_year_month_loan: null,
}, {
name: "灞橋區",
no: "1.1.1",
this_year_deposit: 100,
last_year_deposit: 100,
this_year_month_deposit: 100,
last_year_month_deposit: 100,
this_year_loan: 100,
last_year_loan: 100,
this_year_month_loan: 100,
last_year_month_loan: 100,
}]
}
let year = 2023
let month = 8
export {
data,
year,
month
}
（2）編寫Html
<!doctype html>
<html>
<head>
<title>SpreadJS in TypeScript</title>
<link rel="stylesheet" type="text/css" href="node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="node_modules/@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css">
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- <script src="//cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.js"></script> -->
<script src="systemjs.config.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#loadAnother {
margin-left: 30px;
}
.header {
height: 30px;
}
#designer-container {
height: calc(100vh - 30px)
}
</style>
</head>
<body>
<div class="header">
<button id="exportExcel">保存爲Excel</button><button id="loadAnother">加載另一組數據</button>
<span id="yearMonth"></span>
</div>
<div class="container">
<div id="designer-container" style="width:100vw"></div>
</div>
</body>
<script>
let spread, designer, sheet
System.import('./src/app');
</script>
</html>
（3）編寫方法
(function (global) {
System.config({
transpiler: 'plugin-typescript',
typescriptOptions: {
"target": "es5",
"module": "system",
},
baseURL: './node_modules/',
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'systemjs-plugin-css' }
},
map: {
'typescript': 'typescript/lib/typescript.js',
},
packageConfigPaths: ['./node_modules/*/package.json', "./node_modules/@grapecity/*/package.json"],
// packages tells the System loader how to load when no filename and/or no extension
packages: {
"./src": {
defaultExtension: 'js'
},
"object-assign": {
main: "index.js"
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
以上是關鍵代碼段，如果需要查看完整代碼，歡迎訪問Gitee：https://gitee.com/GrapeCity/tree-form
總結
表格展示樹形數據的新方式讓用戶可以輕鬆地進行數據編輯。通過簡單的拖拽操作，用戶可以在樹形結構中調整、移動各個數據項目的位置。這種直觀的交互方式，不僅提高了用戶的使用體驗，也使得數據編輯變得更加簡單、快速。同時，用戶還可以通過拖拽來創建、合併甚至刪除數據項目，進一步提升數據管理的靈活性和效率。
此外，示例中表格展示樹形數據的新方式還具備自動彙總的功能。在傳統的表格展示方式中，用戶需要手動計算和彙總各個數據，這不僅費時費力，還容易產生錯誤。而通過新的方式，系統可以自動對樹形數據進行彙總和計算，將結果實時展示在表格中。這讓用戶可以更加便捷地獲取整體數據的情況，減少出錯的可能性，併爲數據分析和決策提供更有價值的參考依據，如果您想了解更多的信息資料，歡迎點擊這裏。