1、日期與時間選擇
（1）選擇日期
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layDate快速使用</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> </head> <body> <div class="layui-inline"> <input type="text" class="layui-input" id="test1"> </div> <script src="layui/layui.js"></script> <script> layui.use('laydate', function(){ var laydate = layui.laydate; //執行一個laydate實例 laydate.render({ elem: '#test1' //指定元素 }); }); </script> </body> </html>
測試結果：
（2）日期類型
<body> <div class="layui-inline"> <input type="text" class="layui-input" id="test1"> </div> <script src="layui/layui.js"></script> <script> layui.use('laydate', function(){ var laydate = layui.laydate; //執行一個laydate實例 laydate.render({ elem: '#test1' //指定元素 ,type: 'year' }); }); </script> </body>
（3）開啟時間范圍選擇
<script> layui.use('laydate', function(){ var laydate = layui.laydate; //執行一個laydate實例 laydate.render({ elem: '#test1' //指定元素 ,type: 'year' ,range:true }); }); </script>
2、數據表格
（1）請求接口
<body> <table id="demo" lay-filter="test"></table> <script src="layui/layui.js"></script> <script> layui.use('table', function(){ var table = layui.table;//引入table模塊 table.render({ elem: '#demo'//將原生的table標簽綁定到layui ,height: 312 ,url: '/demo/table/user/' //數據接口 ,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} ,{field: 'experience', title: '積分', width: 80, sort: true} ,{field: 'score', title: '評分', width: 80, sort: true} ,{field: 'classify', title: '職業', width: 80} ,{field: 'wealth', title: '財富', width: 135, sort: true} ]] }); }); </script> </body>
id、username、sex、city等要與數據庫的字段名稱（或實體類名稱）保持一致
從url獲取到的數據的類型只能是json格式的
測試結果：
（2）模擬數據
在項目中創建json格式的文件存儲json格式的數據：
{ "code": 0, "msg": "", "count": 1000, "data": [{ "id": 10000, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "簽名-0", "experience": 255, "logins": 24, "wealth": 82830700, "classify": "作家", "score": 57 }, {
將url地址改為json的地址：
,url: 'json/user.json' //數據接口
測試：
（3）添加按鈕
測試結果：
（4）添加操作按鈕
<!--每一行后面的按鈕--> <div id="barDemo" style="display: none"> <a class="layui-btn layui-btn-xs" lay-even="edit">編輯</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-even="del">刪除</a> </div>
,{fixed: 'right', title: '操作', toolbar:'#barDemo',width: 150}
測試結果：
（5）點擊事件
<table id="demo" lay-filter="test"></table>
lay-filter為監聽的對象
table.on('toolbar(test)', function (obj) { switch (obj.event) { case 'add': alert("add"); break; case 'delete': alert('刪除'); break; case 'update': alert('編輯'); break; } })
獲取到參數
<div class="layui-btn-group"> <button type="button" class="layui-btn" lay-event="add">增加</button> <button type="button" class="layui-btn" lay-event="update">編輯</button> <button type="button" class="layui-btn" lay-event="delete">刪除</button> </div>
lay-event向函數傳遞參數
3、總結
（1）全部代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table模塊快速使用</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> </head> <body> <!--頂部按鈕--> <div id="toolBar" style="display: none" > <div class="layui-btn-group"> <button type="button" class="layui-btn" lay-event="add">增加</button> <button type="button" class="layui-btn" lay-event="update">編輯</button> <button type="button" class="layui-btn" lay-event="delete">刪除</button> </div> </div> <!--每一行后面的按鈕--> <div id="barDemo" style="display: none"> <a class="layui-btn layui-btn-xs" lay-even="edit">編輯</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-even="del">刪除</a> </div> <table id="demo" lay-filter="test"></table> <script src="layui/layui.js"></script> <script> layui.use('table', function () { var table = layui.table;//引入table模塊 table.render({ elem: '#demo'//將原生的table標簽綁定到layui , height: 312 , url: 'json/user.json' //數據接口 , page: true //開啟分頁 , toolbar: "#toolBar" , 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} , {field: 'experience', title: '積分', width: 80, sort: true} , {field: 'score', title: '評分', width: 80, sort: true} , {field: 'classify', title: '職業', width: 80} , {field: 'wealth', title: '財富', width: 135, sort: true} , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150} ]] }); //監聽事件 table.on('toolbar(test)', function (obj) { switch (obj.event) { case 'add': alert("add"); break; case 'delete': alert('刪除'); break; case 'update': alert('編輯'); break; } }) }) </script> </body> </html>
（2）效果
（3）參考網站
layui官網：https://www.layui.com/demo/table.html