如何使用前端表格控制元件實現資料更新？

葡萄城技术团队發表於2024-06-11
前端控制元件

前言

小編之前分享過一篇文章叫《如何使用前端表格控制元件實現多資料來源整合？》。今天，繼續為大家介紹如何使用前端表格控制元件來更新已連線的資料來源資訊。

環境準備

SpreadJS線上表格編輯器：

SpreadJS 前端表格控制元件新版本新增了一款報表外掛，該外掛基於 SpreadJS 本身強大的表格能力，在 DataManager 資料關係引擎的助力下，全新的報表外掛讓報表和資料錄入使用者有了全新的能力和體驗，快速完成報表和資料錄入功能的搭建，相對之前，能節省大量的開發成本，此外，報表 還支援資料輸入、分頁、資料篩選、排序、條件格式化等功能。

一、設定資料來源

設定資料來源方式有三種：遠端資料來源、本地資料來源、本地json檔案，詳細內容可以參考上一篇文章《如何使用前端表格控制元件實現多資料來源整合？》

二、更新資料來源

目前，SpreadJS支援兩種方式更新資料來源，分別是AutoSync和Batch模式。

上一篇系列文章介紹過透過addTable介面的remote、schema、data屬性實現資料來源的新增url資料來源，這篇文章小編將繼續介紹如何透過addTable介面的autoSync和batch屬性別設定自動同步模式和批次處理模式。

1. 自動同步autoSync

這種模式主要適用於低頻的資料操作場景。

1.1 介面準備

首先設定一個資料來源：

let studentList = [
    {id: 1, name: "張三", age: 7, sex: '男'},
    {id: 2, name: "李四", age: 8, sex: '女'},
    {id: 3, name: "小王", age: 7, sex: '男'},
    {id: 4, name: "小韓", age: 8,sex: '女'},
    {id: 5, name: "小明", age: 7, sex: '男'},
];

對應的 NodeJS 後端介面資料為：

//讀取
app.get("/student", (req, res) => {
    res.json(studentList);

});
//新增
app.post("/student", (req, res) => {
    let item = req.body;
    studentList.push(item)
    res.json(item);
});
//修改
app.put("/student", (req, res) => {
    let info = req.body;
    studentList.forEach((item, index) => {
        if (item.id === info.id) {
            studentList[index] = info
        }
    })
    res.json(info);
});
//刪除
app.delete("/student", (req, res) => {
    let info = req.body && req.body[0];
    studentList.forEach((item, index) => {
        if (item.id === info.id) {
            studentList.splice(index, 1)
        }
    })
    res.json({succeed: true});
});

1.2 資料來源設定

其中autoSync表示在自動同步模式下，資料更改將同步到伺服器，此時在remote中設定增刪改資料的介面，如下程式碼所示：

  spread.dataManager().addTable('student', {
            autoSync:true,
            remote: {
                read: {method: 'get', url: 'http://localhost:3000/student'},
                create: {method: 'post', url: 'http://localhost:3000/student'},
                update: {method: 'put', url: 'http://localhost:3000/student'},
                delete: {method: 'delete', url: 'http://localhost:3000/student'}
            }
        });

透過上述程式碼，我們設定了四個http請求，分別對應read讀取，create新增，update修改，delete刪除的介面。

上面是透過程式碼的方式設定，那麼如何透過 UI 的方式設定？

具體操作方式可以如下圖所示：

開啟SpreadJS線上表格編輯器，點選”資料“->"資料來源"，選擇表名，勾選自動同步，【讀取】、【建立】、【刪除】和【批次處理】分別代表程式碼中的read讀取，create新增，update修改和delete刪除。

1.3 建立報表

設定好資料後，我們來建立一個學生報表，如下動圖所示：

透過上圖，我們可以利用嚮導快速建立一個模板，當然也可以匯入Excel/sjs模板:

建立好報表後，我們進行填報設定。

1.4 填報設定

按上圖所示，先點選“填報設定”，在彈窗中點選“新增”按鈕，接下來選擇資料來源 table 表，然後點選“智慧新增欄位” ，最後選擇 id 為主鍵。

1.5 資料填報

在填報設定好之後，我們就可以進行資料填報了

1.5.1 修改

將張三的年齡改為30 ，修改後發現左上角有紅色標記，用來標髒。右鍵點選“提交”。

成功修改後，發現紅色標記消失，同時在控制檯中發現呼叫了學生修改介面，且介面返回200。

此時去查詢學生列表，張三的年齡已被修改

1.5.2 新增/刪除

注意，新增的時候要為id設定一個預設值=SJS.UUID()

接下來的操作可以看下面的動圖

至此，我們就完成了學生表的基本資料填報工作。

這時候，有小夥伴就會問，那如果想要批次對資料更新呢，沒有關係，我們有批處理模式

2. 批次處理batch

這種模式主要適用於資料經常被操作的場景。它將按順序儲存每一行的操作，然後將所有的修改打包成一個集合，一次性傳送到伺服器，以節省網路資源。

2.1 介面準備

同樣，我們在nodejs服務中，設定一個批處理的介面，還是再來看下這張圖

student.post("/student/batchUpdate", (req, res) => {
    let obj = []
    const resultArray = req.body
    resultArray.forEach((item, index) => {
        obj[index] = {
            "succeed": true
        }
        if (item.type === 'update') {
            let _index = item.sourceIndex
            studentList[_index] = item.dataItem
        } else if (item.type === 'insert') {
            studentList.push(item.dataItem)
            obj[index].data = item.dataItem
        } else if (item.type === 'delete') {
            let _index = item.sourceIndex
            studentList.splice(_index, 1)
        }

    })
    res.json(obj);
});

上面的程式碼表示根據返回的資料型別，做相應的操作，如果是新增，需要返回新增的資料。

2.2 資料來源設定

batch表示在批處理模式下，資料更改將保留在資料來源中，此時在remote中批處理的介面，如下程式碼所示：

     let studentTable = spread.dataManager().addTable('student', {
            batch:true,
            remote: {
                read: {method: 'get', url: 'http://localhost:3000/student'},
                batch:{method: 'post', url: 'http://localhost:3000/student/batchUpdate'}
            }
        });

那麼UI上怎麼設定呢？

2.3 建立報表/填報設定

操作方法和上一步【資料來源設定】一致。

2.4 資料填報

總結

以上就是使用前端表格控制元件實現資料更新的全過程，如果您想了解更多資訊，歡迎點選這裡檢視。

擴充套件連結：

【乾貨放送】財務報表勾稽分析要點，一文讀盡！

為什麼你的財務報表不出色？推薦你瞭解這四個設計要點和！

純前端類 Excel 表格控制元件在報表勾稽分析領域的應用場景解析

相關文章