這篇文章主要介紹“Layui table組件怎么用”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“Layui table組件怎么用”文章能幫助大家解決問題。

成都創(chuàng)新互聯(lián)公司自成立以來，一直致力于為企業(yè)提供從網(wǎng)站策劃、網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計、成都做網(wǎng)站、電子商務(wù)、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個性化軟件開發(fā)等基于互聯(lián)網(wǎng)的全面整合營銷服務(wù)。公司擁有豐富的網(wǎng)站建設(shè)和互聯(lián)網(wǎng)應(yīng)用系統(tǒng)開發(fā)管理經(jīng)驗、成熟的應(yīng)用系統(tǒng)解決方案、優(yōu)秀的網(wǎng)站開發(fā)工程師團(tuán)隊及專業(yè)的網(wǎng)站設(shè)計師團(tuán)隊。

出現(xiàn)的問題：

1、使用Layui官方提供的【轉(zhuǎn)換靜態(tài)表格】方式初始化加載時報id找不到的錯誤（自己的鍋）

2、傳遞參數(shù)問題

使用的table加載刷新方案

有一個頁面，左側(cè)是一個tree，右側(cè)是一個table，默認(rèn)table加載全數(shù)據(jù)，當(dāng)點擊tree節(jié)點時，table進(jìn)行篩選，很簡單的需求吧！

1.jpg

這里我們不談tree的使用，將僅僅貼出table的相關(guān)方法！

首先貼出源表格代碼：

序號

銷售ID

姓名

年份

一月

二月

年度

操作

編輯

直接在代碼中通過注釋講解：

(function(){//加載列表的后端url

vargetListUrl='';//對于任意一個table，按照官方的說法，有三種不同的初始化渲染方式，不多介紹，而這里使用的方式姑且看做第三種：轉(zhuǎn)換靜態(tài)表格方式

//轉(zhuǎn)換靜態(tài)表格方式，自然首先需要有一個已經(jīng)存在的表格，然后再通過js方式轉(zhuǎn)化為Layui表格

//無論哪種方式的Layuitable初始化自然需要配置項

//通過轉(zhuǎn)化的方式初始化Layuitable，配置項部分可以在源table中，部分在js中，源table的源代碼上文已經(jīng)給出，下面給出一個示例的js中的配置項

vartableOptions={

url:getListUrl,//請求地址

method:'POST',//方式

id:'listReload',//生成Layuitable的標(biāo)識id，必須提供，用于后文刷新操作，筆者該處出過問題

page:false,//是否分頁

where:{type:"all"},//請求后端接口的條件，該處就是條件錯誤點，按照官方給出的代碼示例，原先寫成了where:{key:{type:"all"}}，結(jié)果并不是我想的那樣，如此寫，key將是后端的一個類作為參數(shù)，里面有type屬性，如果誤以為key是Layui提供的格式，那就大錯特錯了

response:{//定義后端json格式，詳細(xì)參見官方文檔

statusName:'Code',//狀態(tài)字段名稱

statusCode:'200',//狀態(tài)字段成功值

msgName:'Message',//消息字段

countName:'Total',//總數(shù)字段

dataName:'Result'//數(shù)據(jù)字段

}

};//

layui.use(['table','layer'],function(){//layui模塊引用，根據(jù)需要自行修改

varlayer=layui.layer,table=layui.table;//表初始化

varcreateTable=function(){

table.init('EditListTable',tableOptions);

//tablelay-filter

};//表刷新方法

varreloadTable=function(item){

table.reload("listReload",{//此處是上文提到的初始化標(biāo)識id

where:{//key:{//該寫法上文已經(jīng)提到

type:item.type,id:item.id//}

}

});

};//表初始化

createTable();//其他和tree相關(guān)的方法，其中包括點擊tree項調(diào)用刷新方法

});

})();

后端方法：

//本示例中，后臺代碼寫法publicActionResultGetGoalList(stringtype,stringid)

{//}//如果按照官方文檔條件項，應(yīng)該是下面的寫法publicActionResultGetGoalList(keyItemkey)

{//}publicclasskeyItem

{publicstringid{get;set;}publicstringtype{get;set;}

}

關(guān)于“Layui table組件怎么用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。