一、表格重載的基本概念

LayUI表格是前后端分離情況下傳統(tǒng)的業(yè)務(wù)前端頁面非常常見的一種組件。一個(gè)表格的數(shù)據(jù)是以一定格式結(jié)構(gòu)的Json數(shù)據(jù)，表格本身通過對(duì)Json數(shù)據(jù)進(jìn)行解析和渲染來完成數(shù)據(jù)的展示。在實(shí)際業(yè)務(wù)場景中，我們常常需要對(duì)表格進(jìn)行數(shù)據(jù)的更新或者重新加載等。

這個(gè)時(shí)候，就要用到表格的重載功能了。重載就是將表格重新加載一次，獲取最新的數(shù)據(jù)并且呈現(xiàn)在表格中。LayUI提供了非常方便的表格重載功能，下面讓我們就來詳細(xì)了解一下。

二、使用場景

表格的重載功能的使用場景其實(shí)非常常見，主要可以分成以下幾類：

三、表格重載的實(shí)現(xiàn)

首先需要進(jìn)行表格的渲染，獲得表格實(shí)例對(duì)象。代碼中tableIns就是渲染表格時(shí)產(chǎn)生的實(shí)例對(duì)象。然后在重載表格時(shí)，我們就可以調(diào)用tableIns.reload()方法來實(shí)現(xiàn)表格數(shù)據(jù)的重載。

在其中需要傳入一個(gè)參數(shù)，該參數(shù)是一個(gè)對(duì)象，包含where和page兩個(gè)屬性。其中where屬性指表格的查詢條件和參數(shù)，page屬性指表格需要顯示的當(dāng)前頁。

這個(gè)例子展示了一個(gè)帶有搜索和重載按鈕的表格頁面，其中reloadTable()函數(shù)就實(shí)現(xiàn)了表格的重載。

具體實(shí)現(xiàn)方式就是在按鈕點(diǎn)擊事件中調(diào)用form.render()即可完成表格的重載。

 //表格重載函數(shù)
 function reloadTable() {
    table.reload('tableDemo', {
         url: 'xxx',
         page: {
             curr: 1 //重新從第一頁開始顯示數(shù)據(jù)
         },
         where: {//重載時(shí)傳入的參數(shù)
             key1: value1,
             key2: value2
         }
     });
    return false;
 }

四、總結(jié)

表格重載作為一種必備的表格功能，在web項(xiàng)目中是非常常用的。LayUI提供了非常豐富的表格重載API，可以根據(jù)實(shí)際業(yè)務(wù)需求進(jìn)行調(diào)用。

在實(shí)際業(yè)務(wù)的開發(fā)中，我們需要面臨各種各樣實(shí)際業(yè)務(wù)需求。所以我們需要綜合上述方法并依據(jù)實(shí)際業(yè)務(wù)場景，細(xì)心調(diào)整表格的重載操作，以達(dá)到最優(yōu)化的頁面交互效果。