layUI-資料表格
阿新 • • 發佈:2019-01-29
挺棒的,這是官網文件:
這是我自己用的效果:
HTML:
<div th:include="/common/header :: html"></div>
<div class="layui-body">
<!-- 內容主體區域 -->
<div style="padding: 15px;margin-top:60px;">
<table id="user_table"></table>
</div>
</div>
JS:
layui.use('table', function(){ var table = layui.table; //第一個例項 table.render({ elem: '#user_table', title:'使用者資訊表',//table 的大標題(在檔案匯出等地方會用到) // width:1000,//table容器的預設寬度是跟隨它的父元素鋪滿 height: 450, url: '',//資料介面 data:[ { id:1,username:'小明' }, { id:2,username:'小紅' }, { id:3,username:'小蒼' }, { id:4,username:'小澤' }, { id:5,username:'小空' }, { id:6,username:'小麗' }, { id:7,username:'小王' }, { id:8,username:'小柏' }, { id:9,username:'阿嬌' }, { id:10,username:'小巖' }, { id:11,username:'小蒼' }, { id:12,username:'小澤' }, { id:13,username:'小蒼' }, { id:14,username:'小澤' } ], page: true, //開啟分頁,支援 laypage的引數哦 limit:10,//每頁顯示的條數(預設:10) limits:[10,20,30,40,50,60,70,80,90],//每頁條數的選擇項 loading:true,//url時,進度條顯示 totalRow:false,//合計行 toolbar:true,//若需要“列顯示隱藏”、“匯出”、“列印”等功能,則必須開啟該引數 defaultToolbar:['filter', 'print', 'exports'],//['filter', 'print', 'exports'] cols: [[ //表頭 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}, {field: 'username', title: '使用者名稱', width:80} ]], text: { //自定義一些文字提示 none: '暫無相關資料' //預設:無資料。注:該屬性為 layui 2.2.5 開始新增 }, initSort: { field: 'id', //排序欄位,對應 cols 設定的各欄位名 type: 'asc' //排序方式 asc: 升序、desc: 降序、null: 預設排序 }, skin: 'line', //行邊框風格:line (行邊框風格) row (列邊框風格) nob (無邊框風格) even: true, //開啟隔行背景:true/false size: 'sm',//設定表格尺寸:sm (小尺寸) lg (大尺寸) done:function(res, curr, count){ //相應、當前頁碼、資料總量 //如果是非同步請求資料方式,res即為你介面返回的資訊。 //如果是直接賦值的方式,res即為:{data: [], count: 99} data為當前頁資料、count為資料總長度 console.log(res+":"+curr+":"+count); } }); });
col:
cols: [[ //表頭 {field: '', title: '選擇', width:80,type:'checkbox',}, { field: 'id', title: 'ID', width: 80, sort: true, // type: 'checkbox',//複選框 // LAY_CHECKED: true,//是否全選 // fixed: 'left',//固定列 hide:false,//隱藏 totalRow:false,//合計本列 totalRowText:'總共:',//合計文字 unresize:true,//是否禁用拖拽列寬 event:'',//繫結事件 // style:'background-color: #5FB878; color: #fff;',//自定義單元格樣式 align:'center', // colspan:3, // rowspan:2, // templet:'#templetname',//自定義模板,比如格式化日期,看文件去 // toolbar:'default'//就是他,自定義操作的 }, <!-- 定義模板 --> <script type="text/html" id="user_table_template"> <a href="/user/addOrEdit?id={{d.id}}" class="layui-table-link">編輯</a> <a href="/user/deleteUser?id={{d.id}}" class="layui-table-link">刪除</a> </script>