layui框架學習
1. table 資料表格檔案
1.三種初始化渲染方式
| 方式 | 機制 | 適用場景 | |
|---|---|---|---|
| 01. | 方法渲染 | 用JS方法的配置完成渲染 | （推薦）無需寫過多的 HTML，在 JS 中指定原始元素，再設定各項引數即可， |
| 02. | 自動渲染 | HTML配置，自動渲染 | 無需寫過多 JS，可專注于 HTML 表頭部分 |
| 03. | 轉換靜態表格 | 轉化一段已有的表格元素 | 無需配置資料介面，在JS中指定表格元素，并簡單地給表頭加上自定義屬性即可 |
1.方法渲染
<table id="demo" lay-filter="test"></table>
<script>
layui.use('table',function(){
var table = layui.table;
//第一個實體
table.render({
elem:'#demo', //table的id
height:300,
url:'js/user.json',
page:true,
cols:[[ //表頭
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用戶名', width:80}
,{field: 'sex', title: '性別', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '簽名', width: 177}
]]
});
});
</script>
2.自動渲染
所謂的自動渲染，即：在一段 table 容器中配置好相應的引數，由 table 模塊內部自動對其完成渲染，而無需你寫初始的渲染方法，其特點在上文也有闡述，你需要關注的是以下三點：
- 帶有 的 標簽，
- 對標簽設定屬性 lay-data="" 用于配置一些基礎引數
- 在
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/443488.html
標籤：其他
上一篇：解決 Vue 專案 invalid host header 問題（兩種方案）
下一篇：將熊貓資料框轉換為布林值