本文主要介紹基于PHP框架和前端框架的數(shù)據(jù)表模塊，實(shí)現(xiàn)商品管理的相關(guān)操作。主要使用自動(dòng)分頁(yè)、排序、單元格編輯、工具欄等小功能。

注意：如果文字內(nèi)容不清楚，請(qǐng)參考文檔手冊(cè)，如果框架內(nèi)容不清楚，請(qǐng)參考文檔。

我們來(lái)看看后端的產(chǎn)品管理列表頁(yè)面：

上圖中列表頁(yè)的作用有：分頁(yè)、跳轉(zhuǎn)；按 ID 排序；可以按類別、關(guān)鍵字搜索，也可以清除查詢；點(diǎn)擊名稱、貨號(hào)、價(jià)格、市場(chǎng)價(jià)直接編輯修改內(nèi)容并同步到數(shù)據(jù)庫(kù)；點(diǎn)擊開關(guān)可直接移除或移除貨架；點(diǎn)擊開關(guān)直接修改是否選擇；點(diǎn)擊編輯直接跳轉(zhuǎn)到編輯頁(yè)面；點(diǎn)擊刪除彈窗提示要?jiǎng)h除的內(nèi)容，確認(rèn)后直接刪除。

本頁(yè)數(shù)據(jù)表渲染使用“方法級(jí)渲染”，相關(guān)代碼如下：

其中，可編輯單元格用edit:'text'寫在表頭；表單元素切換按鈕通過(guò)自定義列模板實(shí)現(xiàn)；對(duì)應(yīng)的模板代碼為：

注意我在上面兩個(gè)自定義列模板中設(shè)置的參數(shù)都給了一個(gè)過(guò)濾器，統(tǒng)一的切換操作已經(jīng)提前準(zhǔn)備好了?？梢詤⒖肌痘?，通過(guò)框架監(jiān)控開關(guān)實(shí)現(xiàn)文章推薦功能》。

行工具欄定義的相關(guān)代碼為：

對(duì)應(yīng)的工具欄監(jiān)控代碼為：

工具欄的刪除效果如下：

刪除服務(wù)器端的處理代碼比較簡(jiǎn)單，這里我使用的是軟刪除。

不會(huì)顯示單元格編輯效果。粘貼前端js代碼和服務(wù)端界面：

監(jiān)控單元格編輯網(wǎng)站開發(fā)，obj。是修改后的值php框架使用，obj。是當(dāng)前編輯字段的名稱，obj.data 是行中所有相關(guān)數(shù)據(jù)。我這里取了obj.data.id，也就是產(chǎn)品的ID網(wǎng)站模板，通過(guò)ajax一起傳過(guò)來(lái)。對(duì)于更新界面php框架使用，更新代碼如下：

最后看一下表重載的相關(guān)代碼。數(shù)據(jù)表上有一個(gè)搜索表格，但不是一個(gè)完整的表格。相關(guān)代碼如下：

有兩個(gè)可選參數(shù)，一個(gè)是產(chǎn)品的分類路徑路徑，一個(gè)是手動(dòng)輸入的關(guān)鍵字。重載渲染的js代碼如下，不多解釋。

數(shù)據(jù)表的重載界面與初始渲染相同。代碼如下，不多解釋：