1.下载后解压如图
2.示例
home.thml代码
<!DOCTYPE html> <html> <!-- head --> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="../layui/css/layui.css" media="all"> <style> body{margin: 10px;} .demo-carousel{height: 200px; line-height: 200px; text-align: center;} </style> </head> <body> <!-- 导航栏 --> <ul class="layui-nav"> <li class="layui-nav-item"> <a href="">控制台<span class="layui-badge">9</span></a> </li> <li class="layui-nav-item"> <a href="">个人中心<span class="layui-badge-dot"></span></a> </li> <li class="layui-nav-item" lay-unselect=""> <a href="javascript:;"><img src="../layui/images/face/63.gif" class="layui-nav-img">我</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">修改信息</a></dd> <dd><a href="javascript:;">安全管理</a></dd> <dd><a href="javascript:;">退了</a></dd> </dl> </li> </ul> <script type="text/javascript" src="../layui/layui.js" charset="utf-8"></script> <!-- 内容 --> <!-- 表格--> <table class="layui-hide" id="test"></table> <!-- --> <div class="layui-tab layui-tab-brief" lay-filter="demo"> <ul class="layui-tab-title"> <li id="idli1" class="layui-this">演示说明</li> <li id="idli2">日期</li> <li id="idli3">分页</li> <li id="idli4">上传</li> </ul> </div> <script> layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){ var laydate = layui.laydate //日期 ,laypage = layui.laypage //分页 layer = layui.layer //弹层 ,table = layui.table //表格 ,carousel = layui.carousel //轮播 ,upload = layui.upload //上传 ,element = layui.element; //元素操作 //向世界问个好 //layer.msg('Hello World'); //监听Tab切换 element.on('tab(demo)', function(data){ //debugger; layer.msg('切换了：'+ this.innerHTML); //var tt = this.getAttribute("id"); //layer.msg(tt); console.log(data); }); table.render({ elem: '#test' ,url:'/demo/table/user/' ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增 ,cols: [[ {field:'id', width:80, title: 'ID', sort: true} ,{field:'username', width:80, title: '用户名'} ,{field:'sex', width:80, title: '性别', sort: true} ,{field:'city', width:80, title: '城市'} ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增 ,{field:'experience', title: '积分', sort: true} ,{field:'score', title: '评分', sort: true} ,{field:'classify', title: '职业'} ,{field:'wealth', width:137, title: '财富', sort: true} ]] }); }); </script> <!-- 尾部 --> </body> </html>