Layui table組件怎么用

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

　　出現的問題：

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

　　2、傳遞參數問題

　　使用的table加載刷新方案

　　有一個頁面，左側是一個tree，右側是一個table，默認table加載全數據，當點擊tree節點時，table進行篩選，很簡單的需求吧！

　　1.jpg

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

　　首先貼出源表格代碼：

　　<tableclass="layui-table"lay-filter="EditListTable">

　　<thead>

　　<tr>

　　<thlay-data="{field:'Index',width:60}">序號</th>

　　<thlay-data="{field:'UserId',width:80}">銷售ID</th>

　　<thlay-data="{field:'UserName',width:80}">姓名</th>

　　<thlay-data="{field:'Year',width:70}">年份</th>

　　<thlay-data="{field:'M01',width:80}">一月</th>

　　<thlay-data="{field:'M02',width:80}">二月</th>

　　<thlay-data="{field:'YearValue',width:80,fixed:'right'}">年度</th>

　　<thlay-data="{width:100,align:'center',toolbar:'#barDemo1',fixed:'right'}">操作</th>

　　</tr>

　　</thead></table><scripttype="text/html"id="barDemo1">

　　<aclass="layui-btnlayui-btn-mini"lay-event="edit">編輯</a></script>

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

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

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

　　//轉換靜態表格方式，自然首先需要有一個已經存在的表格，然后再通過js方式轉化為Layui表格

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

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

　　vartableOptions={

　　url:getListUrl,//請求地址

　　method:'POST',//方式

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

　　page:false,//是否分頁

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

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

　　statusName:'Code',//狀態字段名稱

　　statusCode:'200',//狀態字段成功值

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

　　countName:'Total',//總數字段

　　dataName:'Result'//數據字段

　　}

　　};//

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

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

　　varcreateTable=function(){

　　table.init('EditListTable',tableOptions);

　　//tablelay-filter

　　};//表刷新方法

　　varreloadTable=function(item){

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

　　where:{//key:{//該寫法上文已經提到

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

　　}

　　});

　　};//表初始化

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

　　});

　　})();

　　后端方法：

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

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

　　{//}publicclasskeyItem

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

　　}

關于“Layui table組件怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。