后端程序员的前端捷径-超级容易上手使用的前端框架layUI（下）-阿里云开发者社区

后端程序员的前端捷径-超级容易上手使用的前端框架layUI（上）：https://developer.aliyun.com/article/1580664

7 layUI静态表格

属性名	属性值	备注
lay-even	无	用于开启隔行背景，可与其它属性一起使用

lay-skin=“属性值”	line （行边框风格） row （列边框风格） nob （无边框风格）	若使用默认风格不设置该属性即可
lay-size=“属性值”	sm （小尺寸） lg （大尺寸）	若使用默认尺寸不设置该属性即可

<table class="layui-table" lay-even lay-skin="nob" lay-size="lg">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
        <tr>
            <th>昵称</th>
            <th>加入时间</th>
            <th>签名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>贤心</td>
            <td>2016-11-29</td>
            <td>人生就像是一场修行</td>
        </tr>
        <tr>
            <td>许闲心</td>
            <td>2016-11-28</td>
            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
        </tr>
    </tbody>
</table>

8 layUI弹出层

使用弹出层需要导入layer模块

弹出提示信息（自动消失）

<script>
    //引入弹出层模块
    layui.use(['layer'],function () {
      var layer = layui.layer;
        //弹出提示信息
      layer.msg("hello,layer");
    }
</script>

弹出提示框

<script>
    //引入弹出层模块
    layui.use(['layer'],function () {
      var layer = layui.layer;
        //弹出提示框
      layer.alert("hello,layer");
    }
</script>

弹出询问框

<script>
    //引入弹出层模块
    layui.use(['layer'],function () {
      var layer = layui.layer;
        //弹出询问框
        layer.confirm("确定要删除吗?", {icon: 5, title:'警告'},function (index) {
            console.log("执行了。。。");
            layer.close(index);
        });
    }
</script>

弹出吸附信息

<button class="layui-btn" id="btn">点击</button>
<script>
    //引入弹出层模块
    layui.use(['layer'],function () {
      var layer = layui.layer;
        //弹出吸附信息
        $("#btn").click(function () {
            layer.tips("详细解释。。",'#btn')
        })
    }
</script>

弹出层

属性：

type - 基本层类型

layer提供了5种层类型。可传入的值有：

0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）

title - 标题

title支持三种类型的值

类型：String/Array/Boolean ，默认：‘信息’

content - 内容

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM

类型：String/DOM/Array，默认：‘’

area - 宽高

在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: ‘500px’，高度仍然是自适应的。当你宽高都要定义时，你可以area: [‘500px’, ‘300px’]

类型：String/Array，默认：‘auto’

resize - 是否允许拉伸

类型：Boolean，默认：true

success - 层弹出后的成功回调方法

类型：Function，默认：null

yes - 确定按钮回调方法

类型：Function，默认：null

cancel - 右上角关闭按钮触发的回调

类型：Function，默认：null

end - 层销毁后触发的回调

类型：Function，默认：null

<script>
    //引入弹出层模块
    layui.use(['layer'],function () {
    var layer = layui.layer;        
    //弹出层
    layer.open({
        type:1,
        content:"<div class='layui-container' style='height: 300px;background: #01AAED'></div>"
    });
    layer.open({
        type:1,
        anim:6,
        resize:false,
        content:$("#content"),
        area: ['600px', '600px']
    });
})
</script>

关闭父页面弹出层

var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

9 时间组件

使用时间组件需要导入laydate模块

<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
    <input type="text" class="layui-input" id="test1">
</div>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            //指定在某个元素上绑定laydate组件
            elem: '#test1' //指定元素
            // ,type:"year"
            //范围选择，有两个日期框
            // ,range: true
            //格式化选择的时间
            // ,format: 'yyyy年MM月dd日'
            //默认值
            // ,value:new Date()
            //最大最小值范围
            // ,min: '2020-1-1'
            // ,max: '2020-12-31'
            ,type:"time"
            ,min: '09:00:00'
            ,max: '18:00:00'
        });
    });
</script>

10 动态表格(重要)

10.1 表格渲染

使用动态表格需要导入table模块

方法渲染

<table id="demo" lay-filter="test"></table>
<!-- 数据操作 -->
<script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        // 为表格填充数据
        table.render({
            elem: '#demo' //表格元素
            ,height: 315
            ,url: 'js/emp.json' //此处为静态数据，未来替换成后端数据接口地址      
            ,cols: [[ //表头
                /**
                 * field 获取就送数据(必须与json格式的key保持一致)
                 * title 表格标题
                 * sort  是否支持排序
                 * fixed 是否固定
                 * type:checkbox  添加复选框
                 * toolbar:指定数据操作按钮
                 */
                {type:'checkbox',fixed: true}
                ,{field: 'id', title: 'ID', sort: true,fixed: true}
                ,{field: 'username', title: '用户名',fixed: true}
                ,{field: 'sex', title: '性别', sort: true,fixed: true}
                ,{field: 'city', title: '城市'}
                ,{field: 'sign', title: '签名'}
                ,{field: 'experience', title: '积分', sort: true}
                ,{field: 'score', title: '评分', sort: true}
                ,{field: 'classify', title: '职业'}
                ,{field: 'wealth', title: '财富', sort: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]  
        });
    });
</script>

自动渲染

满足一下三点：

带有 class=“layui-table” 的标签。

对标签设置属性 lay-data=“” 用于配置一些基础参数

在标签中设置属性*lay-data=“”*用于配置表头信息

<table class="layui-table" lay-data="{height:315, url:'js/user.json', page:true, id:'test'}" lay-filter="test">
    <thead>
        <tr>
            <th lay-data="{field:'id', width:80, sort: true}">ID</th>
            <th lay-data="{field:'username', width:80}">用户名</th>
            <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
            <th lay-data="{field:'city'}">城市</th>
            <th lay-data="{field:'sign'}">签名</th>
            <th lay-data="{field:'experience', sort: true}">积分</th>
            <th lay-data="{field:'score', sort: true}">评分</th>
            <th lay-data="{field:'classify'}">职业</th>
            <th lay-data="{field:'wealth', sort: true}">财富</th>
            <th lay-data="{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}">操作</th>
        </tr>
    </thead>
</table>
<!-- 数据操作 -->
<script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

templet - 自定义列模板

{field:'image', title:'头像', width:88, templet: function(res){
  return `<img src="${res.image}" width="80px" height="80px">`
}}

10.2 分页参数

分页条细节定制

<table id="demo" lay-filter="test"></table>
<script>
    layui.use("table",function(){
        var table = layui.table;
        table.render({
            elem: '#demo'，
            url:'js/user.json',//此处为静态数据，未来替换成后端数据接口地址
            cols:[[...]],
            //可以单独编写属性，只需要将page:true
            ,page: { //支持传入 laypage 组件的所有参数 - 详见文档
                    layout: ['prev', 'page', 'next', 'skip','limit', 'count' ] //自定义分页布局
                    ,curr:2 //设定初始在第 2页   默认为1
                  ,limit:5   //每页显示的条数   默认为10
                    ,groups: 10 //只显示 10个连续页码   默认为5
                    ,limits:[1,3,5,10] //每页条数的选择项 默认[10, 20, 30, 40, 50]
            }
       });
    });
</script>

10.3 监听行工具

<table id="demo" lay-filter="test"></table>
<script>
    layui.use("table",function(){
        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    //删除当前行
                    obj.del();
                    //发送异步请求，删除数据库中的数据
                    //关闭弹出层
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                console.log(data.username);
                //发送Ajax异步请求获取数据，显示在表单上     
                //表单赋值
                form.val('example', {
                    .....
                });
                //点击修改按钮显示弹出层
                layer.open({
                    type:1,
                    content:$("#content"),
                    area:["600px","600px"]
                })
                //给弹出层中的修改按钮绑定事件
                $("#updateBtn").click(function () {
                    //关闭所有页面层
                    layer.closeAll('page');                                  
                    //获取表单的数据
                    var data = form.val('example');
                    console.log(data);
                    //发送异步请求，提交数据
                    //表格重载
                    table.reload('demo', {
                        url: 'js/emp.json'
                    });
                })
            }
        });
    });
</script>

10.4 表格重载

//表格重载
table.reload('test', {
  url: 'js/emp.json'
});

11 文件上传

使用文件上传需要导入upload模块

普通图片上传

 <div class="layui-upload">
  <button type="button" class="layui-btn" id="test1">上传图片</button>
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="demo1">
  </div>
</div>

<script>
    layui.use(['upload', 'element', 'layer'], function(){
        var $ = layui.jquery
        ,upload = layui.upload
        ,element = layui.element
        ,layer = layui.layer;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'https://httpbin.org/post' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
            }
        });
    });
</script>

12 综合案例

使用layui后台布局实现管理系统

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 管理系统大布局 - Layui</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="">menu 11</a></dd>
          <dd><a href="">menu 22</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="">Sign out</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">menu group 1</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">menu 1</a></dd>
            <dd><a href="javascript:;">menu 2</a></dd>
            <dd><a href="javascript:;">menu 3</a></dd>
            <dd><a href="">the links</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">menu group 2</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">list 1</a></dd>
            <dd><a href="javascript:;">list 2</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
        <li class="layui-nav-item"><a href="">the links</a></li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    底部固定区域
  </div>
</div>
<script src="./layui/layui.js"></script>
<script>
//JS 
layui.use(['element', 'layer', 'util'], function(){
  var element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
  
  //头部事件
  util.event('lay-header-event', {
    //左侧菜单事件
    menuLeft: function(othis){
      layer.msg('展开左侧菜单的操作', {icon: 0});
    }
    ,menuRight: function(){
      layer.open({
        type: 1
        ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
        ,area: ['260px', '100%']
        ,offset: 'rt' //右上角
        ,anim: 5
        ,shadeClose: true
      });
    }
  });
  
});
</script>
</body>
</html>

后端程序员的前端捷径-超级容易上手使用的前端框架layUI（下）

7 layUI静态表格

8 layUI弹出层

9 时间组件

10 动态表格(重要)

10.1 表格渲染

10.2 分页参数

10.3 监听行工具

10.4 表格重载

11 文件上传

12 综合案例

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

后端程序员的前端捷径-超级容易上手使用的前端框架layUI（下）

7 layUI静态表格

8 layUI弹出层

9 时间组件

10 动态表格(重要)

10.1 表格渲染

10.2 分页参数

10.3 监听行工具

10.4 表格重载

11 文件上传

12 综合案例

热门文章

最新文章

相关课程

相关电子书

相关实验场景