Layui 语法详解与全功能示例-EW帮帮网

一、Layui 基础语法

1. 模块加载

Layui 使用模块化加载机制，通过 layui.use()加载所需模块：

layui.use(['layer', 'form'], function(){
  var layer = layui.layer;
  var form = layui.form;
  
  // 使用模块
  layer.msg('模块加载完成');
});

2. 配置全局参数

layui.config({
  base: '/res/modules/' // 设置模块根目录
}).use(['form']);

二、布局系统

1. 栅格布局

<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-md8">
      <div class="layui-card">
        <div class="layui-card-header">主内容区</div>
        <div class="layui-card-body">内容</div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-card">
        <div class="layui-card-header">侧边栏</div>
        <div class="layui-card-body">内容</div>
      </div>
    </div>
  </div>
</div>

2. 后台布局

<div class="layui-layout-admin">
  <!-- 头部 -->
  <div class="layui-header">
    <div class="layui-logo">系统名称</div>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item"><a href="">用户管理</a></li>
    </ul>
  </div>
  
  <!-- 侧边栏 -->
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <ul class="layui-nav layui-nav-tree">
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;">系统管理</a>
          <dl class="layui-nav-child">
            <dd><a href="">用户管理</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  
  <!-- 主体 -->
  <div class="layui-body">内容区</div>
  
  <!-- 底部 -->
  <div class="layui-footer">© 2023 公司名称</div>
</div>

三、基础组件

1. 按钮

<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-primary">原始按钮</button>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>

2. 图标

<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
<i class="layui-icon layui-icon-delete"></i>

四、表单组件

1. 基础表单

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<script>
layui.use('form', function(){
  var form = layui.form;
  
  // 监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false; // 阻止表单跳转
  });
});
</script>

2. 表单元素

<!-- 下拉选择 -->
<div class="layui-form-item">
  <label class="layui-form-label">城市</label>
  <div class="layui-input-block">
    <select name="city" lay-verify="required">
      <option value="">请选择</option>
      <option value="1">北京</option>
      <option value="2">上海</option>
    </select>
  </div>
</div>

<!-- 单选 -->
<div class="layui-form-item">
  <label class="layui-form-label">性别</label>
  <div class="layui-input-block">
    <input type="radio" name="sex" value="男" title="男" checked>
    <input type="radio" name="sex" value="女" title="女">
  </div>
</div>

<!-- 复选框 -->
<div class="layui-form-item">
  <label class="layui-form-label">兴趣</label>
  <div class="layui-input-block">
    <input type="checkbox" name="interest[]" value="reading" title="阅读">
    <input type="checkbox" name="interest[]" value="coding" title="编程" checked>
  </div>
</div>

<!-- 开关 -->
<div class="layui-form-item">
  <label class="layui-form-label">开关</label>
  <div class="layui-input-block">
    <input type="checkbox" name="switch" lay-skin="switch">
  </div>
</div>

五、表格组件

1. 基础表格

layui.use('table', function(){
  var table = layui.table;
  
  // 渲染表格
  table.render({
    elem: '#demo'
    ,url: '/api/user/list' // 数据接口
    ,cols: [[
      {field: 'id', title: 'ID', width:80, sort: true}
      ,{field: 'username', title: '用户名', width:120}
      ,{field: 'email', title: '邮箱', width:200}
      ,{field: 'create_time', title: '创建时间', width:160, sort: true}
      ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} // 工具条
    ]]
    ,page: true // 开启分页
  });
  
  // 监听工具条
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      layer.msg('ID：'+ data.id + ' 的查看操作');
    } else if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.alert('编辑行：<br>'+ JSON.stringify(data))
    }
  });
});

<!-- 表格容器 -->
<table id="demo" lay-filter="demo"></table>

<!-- 工具条模板 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>

2. 表格高级功能

table.render({
  // ...
  toolbar: '#toolbarDemo' // 顶部工具栏
  ,defaultToolbar: ['filter', 'print', 'exports'] // 内置工具栏
  ,totalRow: true // 开启合计行
  ,height: 'full-200' // 高度自适应
  ,limit: 15 // 每页显示条数
  ,limits: [10, 20, 30, 40] // 每页条数选择
  ,text: {
    none: '暂无相关数据' // 空数据提示
  }
  ,done: function(res, curr, count){
    // 数据渲染完成后回调
  }
});

六、弹层组件

1. 基础弹层

layui.use('layer', function(){
  var layer = layui.layer;
  
  // 信息框
  layer.alert('内容');
  
  // 询问框
  layer.confirm('确定删除吗？', {
    btn: ['确定', '取消'] 
  }, function(){
    // 确定回调
  }, function(){
    // 取消回调
  });
  
  // 加载层
  var index = layer.load();
  // 关闭加载层
  layer.close(index);
  
  // 自定义层
  layer.open({
    type: 1 // 0-4，0：信息框，1：页面层，2：iframe层，3：加载层，4：tips层
    ,title: '标题'
    ,content: $('#content') // 内容元素
    ,area: ['600px', '400px'] // 宽高
    ,btn: ['确定', '取消']
    ,btnAlign: 'c' // 按钮居中
    ,yes: function(index, layero){
      // 确定按钮回调
      layer.close(index); // 关闭弹层
    }
  });
});

2. iframe 弹层

layer.open({
  type: 2,
  title: '用户详情',
  content: '/user/detail?id=123',
  area: ['800px', '500px'],
  maxmin: true // 允许最大化最小化
});

七、导航组件

1. 水平导航

<ul class="layui-nav">
  <li class="layui-nav-item"><a href="">首页</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">产品</a>
    <dl class="layui-nav-child">
      <dd><a href="">选项一</a></dd>
      <dd><a href="">选项二</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">关于</a></li>
</ul>

2. 垂直导航

<ul class="layui-nav layui-nav-tree" lay-filter="nav">
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">系统管理</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">用户管理</a></dd>
      <dd><a href="">角色管理</a></dd>
    </dl>
  </li>
</ul>

八、日期与时间选择

1. 日期选择器

layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  // 日期范围
  laydate.render({
    elem: '#dateRange'
    ,range: true
  });
  
  // 时间选择
  laydate.render({
    elem: '#timePicker'
    ,type: 'time'
  });
  
  // 自定义格式
  laydate.render({
    elem: '#customDate'
    ,format: 'yyyy年MM月dd日'
  });
});

九、分页组件

layui.use('laypage', function(){
  var laypage = layui.laypage;
  
  // 完整功能
  laypage.render({
    elem: 'page'
    ,count: 100 // 数据总数
    ,curr: 2 // 当前页
    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
    ,jump: function(obj, first){
      if(!first){
        // 点击非第一页时触发
        console.log('加载第'+ obj.curr +'页数据');
      }
    }
  });
});

十、文件上传

<div class="layui-upload">
  <button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
  <div class="layui-upload-list">
    
    <p id="uploadText"></p>
  </div>
</div>

<script>
layui.use('upload', function(){
  var upload = layui.upload;
  
  // 单文件上传
  upload.render({
    elem: '#uploadBtn'
    ,url: '/api/upload'
    ,accept: 'images' // 限定文件类型
    ,multiple: false // 禁止多文件
    ,done: function(res){
      // 上传成功回调
      layer.msg('上传成功');
      $('#previewImg').attr('src', res.data.src);
    }
    ,error: function(){
      // 失败回调
      layer.msg('上传失败');
    }
  });
});
</script>

十一、模板引擎

layui.use('laytpl', function(){
  var laytpl = layui.laytpl;
  
  // 编译模板
  var getTpl = demo.innerHTML
  ,view = document.getElementById('view');
  
  // 编译模板
  laytpl(getTpl).render({
    title: 'Layui'
    ,list: [{name: '张三'}, {name: '李四'}]
  }, function(html){
    view.innerHTML = html;
  });
});

<script id="demo" type="text/html">
  <h3>{{ d.title }}</h3>
  <ul>
    {{# layui.each(d.list, function(index, item){ }}
      <li>{{ index + 1 }}. {{ item.name }}</li>
    {{# }); }}
  </ul>
</script>

<div id="view"></div>

十二、工具函数

1. 实用工具

layui.use('util', function(){
  var util = layui.util;
  
  // 事件处理
  util.event('lay-active', {
    btn1: function(){
      layer.msg('按钮1被点击');
    }
  });
  
  // 倒计时
  var endTime = new Date(2024, 0, 1).getTime();
  util.countdown(endTime, function(date, serverTime, timer){
    var str = date[0] + '天' + date[1] + '时' + date[2] + '分' + date[3] + '秒';
    layui.$('#countdown').html(str);
  });
});

2. 颜色工具

layui.use('colorpicker', function(){
  var colorpicker = layui.colorpicker;
  
  // 渲染颜色选择器
  colorpicker.render({
    elem: '#colorPicker'
    ,format: 'rgb'
    ,predefine: true
    ,colors: ['#009688', '#1E9FFF', '#FF5722']
    ,done: function(color){
      $('body').css('background-color', color);
    }
  });
});

十三、扩展模块

1. 自定义模块

// 定义模块
layui.define(['jquery'], function(exports){
  var $ = layui.$;
  
  var demo = {
    hello: function(str){
      alert('Hello '+ (str || 'world'));
    }
  };
  
  // 输出接口
  exports('demo', demo);
});

// 使用模块
layui.use('demo', function(){
  var demo = layui.demo;
  demo.hello('Layui');
});

十四、主题定制

/* 主题色 */
.layui-layout-admin .layui-header {
  background-color: #3A3F51; /* 头部颜色 */
}

/* 按钮颜色 */
.layui-btn-primary {
  background-color: #4a76fd;
}

/* 导航颜色 */
.layui-nav .layui-nav-item a:hover, 
.layui-nav .layui-this a {
  background-color: #1E9FFF;
  color: #fff;
}

十五、最佳实践建议

模块化管理：按需加载模块，避免全局污染
事件委托：使用 util.event()处理动态元素事件
响应式设计：结合栅格系统实现响应式布局
性能优化：
- 表格大数据使用分页
- 避免频繁的 DOM 操作

错误处理：

table.render({
  // ...
  error: function(res, msg){
    layer.msg('数据加载失败: ' + msg);
  }
});

以上是 Layui 的主要语法和组件使用示例。Layui 的核心优势在于其简洁性和模块化设计，特别适合快速开发后台管理系统。虽然官方已于 2021 年宣布暂停维护，但其稳定性和丰富的组件库仍使其在企业级应用中具有广泛的使用价值。

Layui 语法详解与全功能示例

一、Layui 基础语法

1. 模块加载

2. 配置全局参数

二、布局系统

1. 栅格布局

2. 后台布局

三、基础组件

1. 按钮

2. 图标

四、表单组件

1. 基础表单

2. 表单元素

五、表格组件

1. 基础表格

2. 表格高级功能

六、弹层组件

1. 基础弹层

2. iframe 弹层

七、导航组件

1. 水平导航

2. 垂直导航

八、日期与时间选择

1. 日期选择器

九、分页组件

十、文件上传

十一、模板引擎

十二、工具函数

1. 实用工具

2. 颜色工具

十三、扩展模块

1. 自定义模块

十四、主题定制

十五、最佳实践建议

网站公告

今日签到

热门文章

最新发布