Layui

最新推荐文章于 2023-10-25 20:06:54 发布

You_Ancestor

最新推荐文章于 2023-10-25 20:06:54 发布

阅读量288

点赞数

文章标签： layui

本文链接：https://blog.csdn.net/You_Ancestor/article/details/121733305

版权

本文详细介绍了Layui框架的使用，包括特定的数据格式交互、字段拼接技巧、弹窗的基础语法和网页嵌套方法，以及在主页、表格和表单中的应用。

摘要由CSDN通过智能技术生成

Layui

特定的数据格式交互

layui有自己的一套特定的数据格式交互，必须有参数

字段	说明	值
code	状态码(成功 0，失败其他)	int
msg	错误提示	string
count	总数(分页)	int
data	实体对象的集合	object[]

拼接

在使用过程中，会遇到多个字段放在同一栏的情况，这时候就需要使用拼接

//多个字段拼接
{field:'area',title:'房屋名称', width:200,  
    templet:function (d) {		//templet可以进行方法的编写
        return d.area + '-' + d.ased + '-' + d.aasd;
        // return d.area+"我是啦啦啦";	//拼接字符一样
    }
}

弹窗

基础语法

layui.use('layer',function(){
	var layui = layui.layer;
    layer,msg('HELLO WORLD');
})

网页嵌套

layui.use('layer', function () {
    layer.open({
        type: 2,                          //  2 - url
        content: ["页面"],      	  // 弹出层的 url []不出现滚动,'no'
        area: ["400px", "530px"],         //  大小
        title: ['用户添加'],               //  定义弹出层名称 
        fixed: false,                     //  鼠标滚动时，层是否固定在可视区域
        //maxmin: true,                   //  最大小化按钮
        shadeClose: true,				  //是否点击遮罩关闭
        cancel: function () {             //请求回调，右上角关闭执行return false开启该代码可禁止点击该按钮关闭
        }, success: function (layero, index) {  //请求回调，打开窗口时执行
        }, end: function () {                   //请求回调，窗口销毁时执行
            location.reload();                  //窗口销毁时刷新主页面数据
        }
    })
})

主页

<!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&#