layui中的table模組中的基礎應用

layui 的 table模組是乙個重頭，在基礎引數方面盡可能地做到友好，即：保證功能的前提而又避免過於繁雜的配置。基礎引數一般出現在以下幾種場景中：

場景一：下述 lay-data 裡面的內容即為基礎引數項，切記：值要用單引號
……  
場景二：下述方法中的鍵值即為基礎引數項
table.render();
> table.init('filter', options); //轉化靜態**
> var tableobj = table.render({});
tableobj.reload(options); //過載**

接下來看一下基礎元素有哪些？

1、elem - 繫結元素是指定原始table容器，只適用於 table.render()的渲染方式

html：
js：table.render();

2、設定表頭，這裡包含很多值，是乙個二維陣列。如果你採用**的「方法級渲染」，那麼你需要借助該引數來設定**。如：

js：
table.render(,,
]]}); 
它等價於：
id使用者名稱

下面是乙個二級表頭的例子：

js：
table.render( //rowspan即縱向跨越的單元格數
,, //colspan即橫跨的單元格數，這種情況下不用設定field和width
], [,,
]]}); 
它等價於：
聯絡人金額
位址    省市詳細

需要說明的是，table模組支援無限極表頭，你可按照上述的方式繼續擴充。核心點在於 rowspan 和 colspan 兩個引數的

接下來就是表頭里的一些引數設定

<1> field：設定欄位名

table.render( //其它引數在此省略,]]
}); 
等價於：

<2> title：設定標題名稱

table.render( //其它引數在此省略,]]
}); 
等價於：
郵箱 （ps：也可以把標題寫在lay-data裡面，即 title:'郵箱'）
簽名

<3> width：設定列寬。列寬的設定也通常是必須的（「特殊列」除外，如：核取方塊列、工具列等），它關係到**的整體美觀程度。

table.render( //其它引數在此省略,]]
}); 
等價於：

<4> checkbox：設定核取方塊。如果設定 true，則表示該列內容為核取方塊，通常它被放在第一列。

table.render( //其它引數在此省略,]]
}); 
等價於：
id

還有需要注意的是，這裡的lay_checked是和checkbox搭配使用的，如果設定 true，則表示核取方塊預設全部選中。

table.render( //其它引數在此省略,]]
}); 
等價於：
id

<5> space：設定空隙列。如果設定 true，則定義乙個 15px 寬度無任何內容的列。

table.render(,]]
}); 
等價於：
id

<6> sort：是否需要排序。如果設定 true，則在對應的表頭顯示排序icon，從而對列開啟排序功能。

注意：不推薦對值存在：數字和普通字元的列開啟排序，因為會進入字典序比對。比如：'賢心' > '2' > '100'，這可能並不是你想要的結果，但字典序排列演算法（ascii碼比對）就是這樣的，具體你也可以去了解一下字典序方面的知識。

table.render( //其它引數在此省略,]]
}); 
等價於：
id

<7> fixed：是否需要固定列。如果設定 true 或 'right'，則對應的列將會被固定在左或右，不隨滾動條而滾動。

table.render( //其它引數在此省略
,, //固定列在右
]]}); 
等價於：
id姓名

table.render( //其它引數在此省略,]]
}); 
等價於：
id

<9> templet：自定義模版。在預設情況下，單元格的內容是完全按照資料介面返回的content原樣輸出的，如果你想對某列的單元格新增鏈結等其它元素，你可以借助該引數來輕鬆實現。這是乙個非常實用的功能，你的**內容會因此而豐富多樣。

table.render( //這裡的templet值是模板元素的選擇器,]]
}); 
等價於：
文章標題
id

事實上，templet也可以直接是一段html內容，如：

1 templet: '}

3 注意：這裡一定要被一層

包裹，否則無法讀取到模板

<10> *******：繫結工具條。通常你需要在**的每一行加上檢視、編輯、刪除這樣類似的操作按鈕，而 tool 引數就是為此而生，你因此可以非常便捷地實現各種操作功能。tool 引數和 templet 引數的使用方式完全類似，通常接受的是乙個選擇器，也可以是一段html字元。

table.render(
, //這裡的*******值是模板元素的選擇器
]]}); 
等價於：
id

下述是 ******* 對應的模板，它可以存放在頁面的任意位置：

注意：屬性 lay-event="" 是模板的關鍵所在，值可隨意定義。

接下來我們借助table模組的工具條事件，完成不同的操作功能：

//監聽工具條
table.on('tool(test)', function(obj) else if(layevent === 'del'));
} else if(layevent === 'edit'));
}});

layui中的table模組中的基礎應用

layui中table請求引數不變問題

layui的table資料匹配問題

table中的函式

layui中的table模組中的基礎應用

layui中table請求引數不變問題

layui的table資料匹配問題

table中的函式

相關推薦