精华内容
下载资源
问答
  • 前端采用Bootstrap,layui后端采用Spring+SpringMVC+Mybatis技术整合SSM框架 小型系统 学习使用 后端增删改查 访客管理 地图API JQUERY日历 前端Bootstrap设计 书画页面
  • layui后端框架的基本使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <...

    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" />
      <script src="layui/layui.js"></script>
    </head>
    <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域(可配合layui已有的水平导航) -->
        <ul class="layui-nav layui-layout-left">
          <li class="layui-nav-item"><a href="">控制台</a></li>
          <li class="layui-nav-item"><a href="">商品管理</a></li>
          <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>
              <dd><a href="">授权管理</a></dd>
            </dl>
          </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
          <li class="layui-nav-item">
            <a href="javascript:;">
              <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
              贤心
            </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>
      </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:;">所有商品</a>
              <dl class="layui-nav-child">
                <dd><a href="index.html">列表一</a></dd>
                <dd><a href="index2.html">列表二</a></dd>
                <dd><a href="javascript:;">列表三</a></dd>
                <dd><a href="">超链接</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;">解决方案</a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;">列表一</a></dd>
                <dd><a href="javascript:;">列表二</a></dd>
                <dd><a href="">超链接</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item"><a href="">云市场</a></li>
            <li class="layui-nav-item"><a href="">发布商品</a></li>
          </ul>
        </div>
      </div>
      
      <div class="layui-body">
        <!-- 内容主体区域 -->
        <iframe src="demo5.html" id="main" width="100%" style="height: 99.9%" frameborder="0"></iframe>
      </div>
      
      <div class="layui-footer">
        <!-- 底部固定区域 -->
          最简layui后端框架的使用
      </div>
    </div>
    <script>
        //layui的后端主体部分的页面跳转实现
        layui.use(['element','jquery'],function(){
            var $=layui.jquery;
          var element = layui.element;
          $(document).ready(function(){
      $("dd>a").click(function (e) {
          e.preventDefault();
          $("#main").attr("src",$(this).attr("href"));
        });
      });
     });
    </script>
    <script>
    //JavaScript代码区域
    layui.use('element', function(){
      var element = layui.element;
      
    });
    </script>
    </body>
    </html>
    

     

    展开全文
  • layui 后端人员的学习

    2021-01-26 10:17:15
    文章目录layui1.图标方法1:字符实体方法2:使用样式2. 按钮颜色样式按钮尺寸图标按钮圆角按钮按钮组事件监听3. 导航栏菜单导航栏方向(水平)导航栏方向(垂直)导航栏内容:4. 选项卡默认风格简介风格卡片风格选项卡...

    layui

    部分内容转自https://blog.csdn.net/weixin_43591980/article/details/109148129

    layui的使用:

    首先导入css和js

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aKkJrAjn-1611627200389)(C:\Users\yyyzl\AppData\Roaming\Typora\typora-user-images\image-20210124201027470.png)]

    1.图标

    layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 color、font-size,就可以改变图标的颜色和大小。你可以通过 font-classunicode 来定义不同的图标。

    LayUi官网图标文档:https://www.layui.com/doc/element/icon.html

    方法1:字符实体

    <!-- 方法1:字符实体(必须在容器标签内) -->
    <div class="layui-icon" style="color: red;">&#xe68f;</div>
    

    方法2:使用样式

    <!-- 方法2:使用样式 -->
    <i class="layui-icon layui-icon-heart-fill" style="color: green;"></i>
    

    2. 按钮

    任意HTML元素设定class=“layui-btn”,建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格。

    LayUi官网按钮文档:https://www.layui.com/doc/element/button.html

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vWVWLQNN-1611627200395)(C:\Users\yyyzl\AppData\Roaming\Typora\typora-user-images\image-20210124201937370.png)]

    颜色样式

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

    按钮尺寸

    <button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
        <button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
    <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled">迷你禁用按钮</button>
    

    图标按钮

    <button type="button" class="layui-btn"><i class="layui-icon">&#xe608;</i> 添加</button>
    
    <button type="button" class="layui-btn"><i class="layui-icon">&#x1002;</i></button>
    <button type="button" class="layui-btn layui-icon layui-icon-rate-half"></button>
    

    圆角按钮

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

    按钮组

    <div class="layui-btn-group">
        <button type="button" class="layui-btn">增加</button>
        <button type="button" class="layui-btn">编辑</button>
        <button type="button" class="layui-btn">删除</button>
    </div>
    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe654;</i>
        </button>
        <button type="button" class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe642;</i>
        </button>
        <button type="button" class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe640;</i>
        </button>
        <button type="button" class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe602;</i>
        </button>
    </div>
    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon">&#xe654;</i>
        </button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon">&#xe642;</i>
        </button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon">&#xe640;</i>
        </button>
    </div>
    

    事件监听

    layui的modules内部自带jquery。但是我们需要如下使用:

    <script type="text/javascript">
        layui.use(["jquery"],function (){
           var $=layui.jquery;
           $(".layui-btn").click(function (){
              alert($(this).html());
           });
        });
    </script>
    

    3. 导航栏菜单

    导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在。面包屑结构简单,支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的,但一些交互操作,如呼出二级菜单等,需借助element模块才能使用。你可以移步文档左侧【内置模块 - 常用元素操作 element】了解详情

    LayUi官网导航文档:https://www.layui.com/doc/element/nav.html

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qUJBpS5l-1611627200400)(C:\Users\yyyzl\AppData\Roaming\Typora\typora-user-images\image-20210124204812712.png)]

    导航栏方向(水平)

    layui-nav

    <!-- 水平导航 -->
    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item layui-this"><a href="">产品</a></li>
        <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>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
        <!-- 头像菜单项 -->
        <li class="layui-nav-item" style="float: right;">
            <a href=""><img src="https://t.cn/RCzsdCq" 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 src="../layui/layui.js"></script>
    <script>
        //注意:导航 依赖 element 模块,否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;
    
            //…
        });
    </script>
    

    导航栏方向(垂直)

    layui-nav layui-nav-tree

    <!-- 垂直导航 -->
    <ul class="layui-nav layui-nav-tree" lay-filter="">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item layui-this"><a href="">产品</a></li>
        <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>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>
    
    <script src="../layui/layui.js"></script>
    <script>
        //注意:导航 依赖 element 模块,否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;
    
            //…
        });
    </script>
    

    导航栏内容:

    • layui-nav:表示导航栏菜单
      • layui-nav-item:表示导航菜单的一个子项
        • layui-nav-child:表示子项的子项
      • layui-this:表示当前选中的菜单项

    4. 选项卡

    导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能。面包屑结构简单,支持自定义分隔符。

    依赖加载组件:element (请注意:必须加载element模块,相关功能才能正常使用,详见:内置组件 - 常用元素操作)

    LayUI官网选项卡文档:https://www.layui.com/doc/element/tab.html

    默认风格

    layui-tab

    <!-- 默认风格 -->
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li>用户管理</li>
            <li>权限分配</li>
            <li>商品管理</li>
            <li>订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>
    
    <script src="../layui/layui.js"></script>
    <script>
        //注意:选项卡 依赖 element 模块,否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;
    
            //…
        });
    </script>
    

    简介风格

    layui-tab layui-tab-brief

    <!-- 简洁风格 -->
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li>用户管理</li>
            <li>权限分配</li>
            <li>商品管理</li>
            <li>订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>
    
    <script src="../layui/layui.js"></script>
    <script>
        //注意:选项卡 依赖 element 模块,否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;
    
            //…
        });
    </script>
    

    卡片风格

    layui-tab layui-tab-card

    <!-- 卡片风格 -->
    <!-- lay-allowclose="true":卡片选项可关闭 -->
    <div class="layui-tab layui-tab-card" lay-allowclose="true">
        <ul class="layui-tab-title">
          <li class="layui-this">网站设置</li>
          <li>用户管理</li>
          <li>权限分配</li>
          <li>商品管理</li>
          <li>订单管理</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
          <div class="layui-tab-item layui-show">1</div>
          <div class="layui-tab-item">2</div>
          <div class="layui-tab-item">3</div>
          <div class="layui-tab-item">4</div>
          <div class="layui-tab-item">5</div>
          <div class="layui-tab-item">6</div>
        </div>
    </div>
    
    <script src="../layui/layui.js"></script>
    <script>
        //注意:选项卡 依赖 element 模块,否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;
    
            //…
        });
    </script>
    

    选项卡内容

    • layui-tab:代表一个选项卡
      • layui-tab-title:代表选项卡标题
        • layui-this:代表选中当前标题
        • layui-tab-content:代表选项卡中的内容
          • layui-tab-item:代表选项卡对应标题下的内容
          • layui-show:显示选中标题下的内容

    选项卡特殊属性

    动态tab

    lay-allowclose="true"代表是否启用关闭按钮

    <!-- lay-allowclose="true":卡片选项可关闭 -->
    <div class="layui-tab layui-tab-card" lay-allowclose="true">
    

    lay-filter

    layui可以找到元素的一个方式。

    可以添加tab、切换tab、删除tab。具体案例看官网。

    5. 进度条(略)

    LayUI官网进度条文档:https://www.layui.com/demo/progress.html

    6. 面板 + 布局(重点)

    一般的面板通常是指一个独立的容器,而折叠面板则能有效地节省页面的可视面积,非常适合应用于:QA说明、帮助文档等。

    layui 的栅格系统采用业界比较常见的 12 等分规则,内置移动设备、平板、桌面中等和大型屏幕的多终端适配处理,最低能支持到ie8。

    依赖加载组件:element

    LayUI官网面板文档:https://www.layui.com/doc/element/tab.html

    LayUI官网布局文档:https://www.layui.com/doc/element/layout.html

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OEnLpae2-1611627200411)(C:\Users\yyyzl\AppData\Roaming\Typora\typora-user-images\image-20210124210611840.png)]

    面板

    卡片面板

    • layui-card:代表一个卡片面板
      • layui-card-header:代表卡片面板头部
      • layui-card-body:代表卡片面板内容

    折叠面板(默认)

    • layui-collapse:代表一个折叠面板
      • layui-colla-item:代表一个折叠面板的内容项
        • layui-colla-title:代表内容项的标题
        • layui-colla-content:代表内容项的内容
        • layui-show:代表内容项默认展开

    手风琴面板

    在普通折叠面板的基础上加上lay-accordion 属。

    手风琴和普通折叠面板的区别是,前者一次只能打开一个面板,后者可以打开多个面板

    布局

    布局属性
    • layui-row
      • layui-col-space15代表列之间的间距,距离范围: space0-space30
        • layui-col-md6代表一列 md1-md12 代表当前列占整行的x/12
          • layui-col-md-offset3 代表列的偏移

    列可以同时出现最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕),以呈现更加动态灵活的布局。

    例如:

    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
    	移动:6/12 | 平板:6/12 | 桌面:4/12
    </div>
    

    实例:

    <div class="layui-row layui-col-space30">
        <div class="layui-col-md6" style="background-color: ghostwhite;">
            <!-- 卡片面板 -->
            <div class="layui-card">
                <div class="layui-card-header">卡片面板</div>
                <div class="layui-card-body">
                    卡片式面板面板通常用于非白色背景色的主体内<br>
                    从而映衬出边框投影
                </div>
            </div>
        </div>
        <div class="layui-col-md6" style="background-color: ghostwhite;">
            <!-- 卡片面板 -->
            <div class="layui-card">
                <div class="layui-card-header">卡片面板</div>
                <div class="layui-card-body">
                    卡片式面板面板通常用于非白色背景色的主体内<br>
                    从而映衬出边框投影
                </div>
            </div>
        </div>
        <div class="layui-col-md12" style="background-color: ghostwhite;">
            <!-- 卡片面板 -->
            <div class="layui-card">
                <div class="layui-card-header">卡片面板</div>
                <div class="layui-card-body">
                    卡片式面板面板通常用于非白色背景色的主体内<br>
                    从而映衬出边框投影
                </div>
            </div>
        </div>
        <div class="layui-col-md12" style="background-color: ghostwhite;">
            <!-- 折叠面板 -->
            <div class="layui-collapse">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">杜甫</h2>
                  <div class="layui-colla-content">内容区域</div>
                </div>
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">李清照</h2>
                  <div class="layui-colla-content">内容区域</div>
                </div>
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">鲁迅</h2>
                  <div class="layui-colla-content layui-show">内容区域</div>
                </div>
              </div>
        </div>
        <div class="layui-col-md12" style="background-color: ghostwhite;">
            <!-- 手风琴面板 -->
            <div class="layui-collapse" lay-accordion>
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">杜甫</h2>
                  <div class="layui-colla-content">内容区域</div>
                </div>
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">李清照</h2>
                  <div class="layui-colla-content">内容区域</div>
                </div>
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">鲁迅</h2>
                  <div class="layui-colla-content layui-show">内容区域</div>
                </div>
              </div>
        </div>
    </div>
    
    <script src="../layui/layui.js"></script>
    <script>
        //注意:选项卡 依赖 element 模块,否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;
    
            //…
        });
    </script>
    

    7.徽章

    LayUI官网时徽章文档:https://www.layui.com/doc/element/badge.html

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Biotfr4k-1611627200413)(C:\Users\yyyzl\AppData\Roaming\Typora\typora-user-images\image-20210124223911328.png)]

    • layui-badge-dot:小圆点
    • layui-badge:弧形徽章
    • layui-badge-rim:边框徽章
    小圆点:<span class="layui-badge-dot layui-bg-green"></span>
    常规弧形徽章:<span class="layui-badge"></span>
    边框徽章:<span class="layui-badge-rim">6</span>
    
    <button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
    
    <button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
    

    8.时间线

    LayUI官网时间线文档:https://www.layui.com/doc/element/timeline.html

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sxLrLXRG-1611627200415)(C:\Users\yyyzl\AppData\Roaming\Typora\typora-user-images\image-20210124224143130.png)]

    • layui-timeline:代表一个时间线
      • layui-timeline-item:代表一个时间节点
      • layui-timeline-axis:代表左边竖线
        • layui-timeline-content:时间线的内容
        • layui-text:代表文本
          • layui-timeline-title:代表标题
            • 可以分为标题和内容
              • < h2>标题
              • < p>内容
    <ul class="layui-timeline">
      <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
          <h3 class="layui-timeline-title">8月18日</h3>
          <p>
            layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
            <br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
            <br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i>
          </p>
        </div>
      </li>
      <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
          <h3 class="layui-timeline-title">8月16日</h3>
          <p>杜甫的思想核心是儒家的仁政思想,他有“<em>致君尧舜上,再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有:</p>
          <ul>
            <li>《登高》</li>
            <li>《茅屋为秋风所破歌》</li>
          </ul>
        </div>
      </li>
      <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
          <h3 class="layui-timeline-title">8月15日</h3>
          <p>
            中国人民抗日战争胜利72周年
            <br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
            <br>铭记、感恩
            <br>所有为中华民族浴血奋战的英雄将士
            <br>永垂不朽
          </p>
        </div>
      </li>
      <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
          <div class="layui-timeline-title">过去</div>
        </div>
      </li>
    </ul>
    

    9.动画(略)

    LayUI官网动画文档:https://www.layui.com/doc/element/anim.html

    10.颜色选择器(略)

    LayUI官网颜色选择器文档:https://www.layui.com/doc/modules/colorpicker.html

    11. 滑块(略)

    官网案例地址:https://www.layui.com/doc/modules/slider.html

    12. 评分(略)

    官网案例地址:https://www.layui.com/doc/modules/rate.html

    13. 轮播

    官网案例地址:https://www.layui.com/doc/modules/carousel.html

    <body>
    <br>
    <br>
    <br>
    <div class="layui-carousel" id="test" lay-filter="test4" style="">
        <div carousel-item="">
            <div><img src="resources/images/1.jpg" width="100%" height="100%"></div>
            <div><img src="resources/images/2.jpg" width="100%" height="100%"></div>
            <div><img src="resources/images/3.jpg" width="100%" height="100%"></div>
            <div><img src="resources/images/4.jpg" width="100%" height="100%"></div>
            <div><img src="resources/images/5.jpg" width="100%" height="100%"></div>
        </div>
    </div>
    <br>
    <br>
    </body>
    <script src="resources/layui/layui.js"></script>
    <script>
        layui.use(['element', 'jquery', 'carousel'], function () {
            var $ = layui.jquery;
            var carousel = layui.carousel;
            var element = layui.element;
            //图片轮播
            carousel.render({
                elem: '#test'
                , width: '100%'
                , height: '400px'
                , interval: 3000
            });
        });
    </script>
    

    14. 代码修饰器(略)

    官网案例地址:https://www.layui.com/doc/modules/code.html

    15. 时间和日期选择器(略)

    需要掌握。

    官网案例地址:https://www.layui.com/doc/modules/laydate.html

    16. 表单及其元素 (from/input/select)

    官网案例地址:https://www.layui.com/demo/form.html

    案例

    查看案例就能写。

    表单对象及其相关事件

    官网案例:https://www.layui.com/doc/modules/form.html#val

    都是通过lay-filter找的

    监听提交事件

      //监听提交 demo1是按钮的lay-filter名字叫demo1
      form.on('submit(demo1)', function(data){
    	console.log(data.elem);//被执行事件的元素DOM对象,一般为button对象
        console.log(data.form);//被执行提交的form对象,一般存在form标签时才会返回
        console.log(data.field);//当前容器的全部表单字段,名值对形式:{name:value}
          
        //如果想用异步提交,ajax
        //$.post();
          
        return false;//阻止表单跳转。如果需要表单跳转,去掉即可。
      });
    

    监听下拉框改变事件

    form.on('select(filter)', function(data){
      console.log(data.elem); //得到select原始DOM对象
      console.log(data.value); //得到被选中的值
      console.log(data.othis); //得到美化后的DOM对象
    });
    

    监听复选框改变事件

    form.on('checkbox(filter)', function(data){
      console.log(data.elem); //得到checkbox原始DOM对象
      console.log(data.elem.checked); //是否被选中,true或者false
      console.log(data.value); //复选框value值,也可以通过data.elem.value得到
      console.log(data.othis); //得到美化后的DOM对象
    });  
    

    监听开关改变事件

    form.on('switch(filter)', function(data){
      console.log(data.elem); //得到checkbox原始DOM对象
      console.log(data.elem.checked); //开关是否开启,true或者false
      console.log(data.value); //开关value值,也可以通过data.elem.value得到
      console.log(data.othis); //得到美化后的DOM对象
    });  
    

    监听单选框选中事件

    form.on('radio(filter)', function(data){
      console.log(data.elem); //得到radio原始DOM对象
      console.log(data.value); //被点击的radio的value值
    });  
    

    更新渲染

    向select里面添加一个选项

    //点击按钮,向select里面添加一个选项
    $("#btn1").click(function(){
       // 得到select对象
       var jp=$("#jiguan");
       alert(jp.html());
       jp.append("<option value=深圳>深圳</option>")
       alert(jp.html());
        
       //渲染下拉框
       //form.render("select");
       //渲染所有
       form.render();
    });
    

    表单赋值 / 取值

    首先要给表单加上lay-filter

    用于给指定表单集合的元素赋值和取值。如果 object 参数存在,则为赋值;如果 object 参数不存在,则为取值。
    注:其中「取值」功能为 layui 2.5.5 开始新增

    $("#btn2").click(function(){
        //给表单赋值
        form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
              "username": "贤心" // "name": "value"
              ,"sex": "女"
              ,"auth": 3
              ,"check[write]": true
              ,"open": false
              ,"desc": "我爱layui"
        });
       //获取表单区域所有值
    	var data1 = form.val("formTest");
    });
    

    第二个参数中的键值是表单元素对应的 namevalue

    表单验证

    我们对表单的验证进行了非常巧妙的支持,大多数时候你只需要在表单元素上加上 lay-verify="" 属性值即可。如:

    <input type="text" lay-verify="email"> 
     
    还同时支持多条规则的验证,如下:
    <input type="text" lay-verify="required|phone|number">
    

    还可以自定义规则

    form.verify({
      username: function(value, item){ //value:表单的值、item:表单的DOM对象
        if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
          return '用户名不能有特殊字符';
        }
        if(/(^\_)|(\__)|(\_+$)/.test(value)){
          return '用户名首尾不能出现下划线\'_\'';
        }
        if(/^\d+\d+\d$/.test(value)){
          return '用户名不能全为数字';
        }
        
        //如果不想自动弹出默认提示框,可以直接返回 true,这时你可以通过其他任意方式提示(v2.5.7 新增)
        if(value === 'xxx'){
          alert('用户名不能为敏感词');
          return true;
        }
      }
      
      //我们既支持上述函数式的方式,也支持下述数组的形式
      //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字]
      ,pass: [
        /^[\S]{6,12}$/
        ,'密码必须6到12位,且不能出现空格'
      ] 
    }); 
    

    当你自定义了类似上面的验证规则后,你只需要把 key 赋值给输入框的 lay-verify 属性即可:

    <input type="text" lay-verify="username" placeholder="请输入用户名">
    <input type="password" lay-verify="pass" placeholder="请输入密码">
    

    17.弹出层

    LayUI官方文档:https://www.layui.com/doc/modules/layer.html

    单独的layer网站:https://layer.layui.com/

    弹框

    • layer.alert():提示框(可加图标)
    • layer.confirm():确认框
    • layer.prompt():输入框
    • layer.tab():选项卡弹框
    • layer.photos(options):相册层弹框。图片需要通过json传递,json编写查看官网
    • layer.msg:弱弱的提示框
    • layer.tips:吸附提示框(可控制上下左右方位,前提必须外边框足够大)
    • layer.open(options):原始弹框的核心方法··
     <br>
     <button type="button" id="btn1" class="layui-btn">alert</button>
     <button type="button" id="btn2" class="layui-btn">confirm</button>
     <button type="button" id="btn3" class="layui-btn">prompt</button>
     <button type="button" id="btn4" class="layui-btn">tab</button>
     <button type="button" id="btn5" class="layui-btn">photos</button>
     <button type="button" id="btn6" class="layui-btn">msg</button>
     <br><br><br>
     <div style="width: 200px;height: 200px;">
         <button type="button" id="btn7" class="layui-btn">tips</button>
     </div>
     <br>
    
    <script src="../layui/layui.js"></script>
    <script>
        layui.use(['element', 'jquery', 'carousel', 'layer'], function () {
            var $ = layui.jquery;
            var carousel = layui.carousel;
            var element = layui.element;
            var layer = layui.layer;
    
            //alert
            $("#btn1").click(function () {
                layer.alert("只是简单的提示框!");
                layer.alert("加个图标的提示框", { icon: 6 });
                // 图标分为1-7
                // 如果还想执行yes回调,可以放第三个参数
            })
    
            //confirm
            $("#btn2").click(function () {
                layer.confirm("你确定要退出吗?", { icon: 3, title: '提示' }, function (index) {
                    alert("你选择了确定")
                    layui.close(index);
                });
            })
    
            //prompt
            $("#btn3").click(function () {
                layer.prompt({
                    formType: 2,
                    value: '初始值',
                    title: '请输入值',
                    area: ['200px', '100px'] //自定义文本域宽高
                }, function (value, index, elem) {
                    alert(value); //得到value
                    layer.close(index);
                });
            })
    
            //tab
            $("#btn4").click(function () {
                layer.tab({
                    area: ['600px', '300px'],
                    tab: [{
                        title: 'TAB1',
                        content: '内容1'
                    }, {
                        title: 'TAB2',
                        content: '内容2'
                    }, {
                        title: 'TAB3',
                        content: '内容3'
                    }]
                });
            })
    
            //photos
            $("#btn5").click(function () {
                layer.photos("只是简单的提示框!");
            })
    
            //msg
            $("#btn6").click(function () {
                layer.msg("弱弱的提示框!");
                layer.msg("带图标的弱弱的提示框!",{icon:6});
            })
    
            //tips
            $("#btn7").click(function () {
                layer.tips("简单的吸附提示框!",'#btn7',{tips:1});
            })
        });
    </script>
    
    

    layer.open()基础参数

    • title - 标题:类型:String/Array/Boolean,默认:‘信息’

      title支持三种类型的值,若你传入的是普通的字符串,如title :‘我是标题’,那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: [‘文本’, ‘font-size:18px;’],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false

    • content - 内容:类型:String/DOM/Array,默认:’’

      content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。

      /!*
       如果是页面层
       */
      layer.open({
        type: 1, 
        content: '传入任意的文本或html' //这里content是一个普通的String
      });
      layer.open({
        type: 1,
        content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
      });
      //Ajax获取
      $.post('url', {}, function(str){
        layer.open({
          type: 1,
          content: str //注意,如果str是object,那么需要字符拼接。
        });
      });
      /!*
       如果是iframe层
       */
      layer.open({
        type: 2, 
        content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
      }); 
      /!*
       如果是用layer.open执行tips层
       */
      layer.open({
        type: 4,
        content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
      });        
      
    • skin - 样式类名:类型:String,默认:’’

      skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。这是一个很好的切入点,意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有:layui-layer-lan**layui-layer-molv,未来我们还会选择性地内置更多,但更推荐您自己来定义。以下是一个自定义风格的简单例子

      //单个使用
      layer.open({
        skin: 'demo-class'
      });
      //全局使用。即所有弹出层都默认采用,但是单个配置skin的优先级更高
      layer.config({
        skin: 'demo-class'
      })
      //CSS 
      body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
      body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
      body .demo-class .layui-layer-btn a{background:#333;}
      body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
      …
      加上body是为了保证优先级。你可以借助Chrome调试工具,定义更多样式控制层更多的区域。  
      
    • area - 宽高:类型:String/Array,默认:‘auto’

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

    • offset- 坐标:

      类型:String/Array,默认:垂直水平居中

      offset默认情况下不用设置。但如果你不想垂直水平居中,你还可以进行以下赋值:

      备注
      offset: ‘auto’ 默认坐标,即垂直水平居中
      offset: ‘100px’ 只定义top坐标,水平保持居中
      offset: [‘100px’, ‘50px’] 同时定义top、left坐标
      offset: ‘t’ 快捷设置顶部坐标
      offset: ‘r’ 快捷设置右边缘坐标
      offset: ‘b’ 快捷设置底部坐标
      offset: ‘l’ 快捷设置左边缘坐标
      offset: ‘lt’ 快捷设置左上角
      offset: ‘lb’ 快捷设置左下角
      offset: ‘rt’ 快捷设置右上角
      offset: ‘rb’ 快捷设置右下角
    • btn - 按钮(每个按钮都能回调,右上角取消也可以)

      类型:String/Array,默认:‘确认’

      信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。当您只想自定义一个按钮时,你可以btn: ‘我知道了’,当你要定义两个按钮时,你可以btn: [‘yes’, ‘no’]。当然,你也可以定义更多按钮,比如:btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …],按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){},以此类推。

    • btnAlign- 按钮排列

      类型:String,默认:r

      你可以快捷定义按钮的排列位置,btnAlign的默认值为r,即右对齐。该参数可支持的赋值如下:

      备注
      btnAlign: ‘l’ 按钮左对齐
      btnAlign: ‘c’ 按钮居中对齐
      btnAlign: ‘r’ 按钮右对齐。默认值,不用设置
    • closeBtn - 关闭按钮

      类型:String/Boolean,默认:1

      layer提供了两种风格的关闭按钮,可通过配置12来展示,如果不显示,则closeBtn: 0

    • shade - 遮罩

      类型:String/Array/Boolean,默认:0.3

      即弹层外区域。默认是0.3透明度的黑色背景(’#000’)。如果你想定义别的颜色,可以shade: [0.8, ‘#393D49’];如果你不想显示遮罩,可以shade: 0

    • shadeClose - 是否点击遮罩关闭

      类型:Boolean,默认:false

      如果你的shade是存在的,那么你可以设定shadeClose来控制点击弹层外区域关闭。

    • icon- 图标:信息框和加载层的私有参数

      类型:Number,默认:-1(信息框)/0(加载层)

      信息框默认不显示图标。当你想显示图标时,默认皮肤可以传入0-6如果是加载层,可以传入0-2。如:

      //eg1
      layer.alert('酷毙了', {icon: 1});
      //eg2
      layer.msg('不开心。。', {icon: 5});
      //eg3
      layer.load(1); //风格1的加载
      
    • time- 自动关闭所需毫秒:类型:Number,默认:0

      默认不会自动关闭。当你想自动关闭时,可以time: 5000,即代表5秒后自动关闭,注意单位是毫秒(1秒=1000毫秒)

    • maxmin - 最大最小化。

      类型:Boolean,默认:false

      该参数值对type:1type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可

    • anim - 弹出动画:类型:Number,默认:0

      我们的出场动画全部采用CSS3。这意味着除了ie6-9,其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画,设置 anim: -1 即可。另外需要注意的是,3.0之前的版本用的是 shift 参数

      备注
      anim: 0 平滑放大。默认
      anim: 1 从上掉落
      anim: 2 从最底部往上滑入
      anim: 3 从左滑入
      anim: 4 从左翻滚
      anim: 5 渐显
      anim: 6 抖动
    • yes成功回调

       yes: function(index, layero){
          //do something
          layer.close(index); //如果设定了yes回调,需进行手工关闭
        }
      
    • cancel关闭回调

      cancel: function(index, layero){ 
        if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
          layer.close(index)
        }
        return false; 
      }  
      
    • type - 基本层类型:类型:Number,默认:0

      layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用*layer.open({type: 1})*方式调用,则type为必填项(信息框除外)

      layer.type=1:页面层,把页面上某一段html代码放到弹出层中。此时的content属性可以使用html代码,也可以使用页面元素选择器(id,class)

      layer.type=2:iframe层,此时的content就是一个页面的url

      注意弹框也可以用来做表单提交,类似于bootstrap的模态框,其有专门的请求提交类型method:‘post’ 以及回调函数success:function(),这里可以看下面这篇博客自行了解:

      LayUI弹出层表单提交参考demo

    18.数据表格

    LayUI的数据表格可以通过拿到后端回调的json字符串,直接渲染到表格中,并自带分页功能,从而节约了后端分页的负担!
    为方便测试,这里我采用LayUI 官方提供的json串接口:
    https://www.layui.com/demo/table/user/

    实现方式:

    html实现、js实现(掌握)

    基本参数

    详情参见:基础参数一览表

     table.render({
                elem: '#userTable'    //渲染的目标对象
                , url: 'resources/json/user.json'   //数据接口
                , toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板,还可以为boolean类型
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , title: '用户数据表'  //数据导出来的标题
                // , width: '50'   //表格宽度。可以自定义多少,默认填满父容器,想百分比设置个对应的父容器即可。
                // ,height:'full-100'
                // ,cellMinWidth:100  //设置列的最小默认宽度
    /*            ,done: function(res, curr, count){  //数据渲染完的回调
                    //如果是异步请求数据方式,res即为你接口返回的信息。
                    //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
                    //curr得到当前页码
                    //count得到数据总量
                }*/
                ,totalRow: true //是否启用合并行
                , page: true  //是否开启分页
                // ,limit: 20 //每页几条
                // ,limits:[20,40,60,80] //每页条数的选项
                // ,text: { none: 无数据 }  //数据接口异常时的显示
         ...cols
     }
    

    cols表头参数

    详情参见:cols表头参数

    field:和数据接口里面的 data[{“id”:1}]的 key映射

    title:表头的内容

    width:宽度

    hide:true是否隐藏

    sort:true 是否开启列排序sedit:true 是否支持编辑

    align:'center'内容对齐方式

    templet模板

    totalBowText:合计行的文本 前提是表格开启合并行

    totalRow:true是否合计前提是表格开启合并行

    toolbar: "#userBar"引入行的工具档

    cols: [[
                    {type: 'checkbox', fixed: 'left', LAY_CHECKED: true}   
                    //type设定列类型。可选值有:normal(常规列,无需设定)checkbox(复选框列)radio(单选框列增)numbers(序号列)space(空列)
                    //fixed是固定在那边,LAY_CHECKED默认选中什么,添加在这里就是全选,添加在json中就是选中对应的该条
                    , {field: 'id', title: 'ID', width: 80}  //field就是对应json中data中的字段
                    , {field: 'username', title: '用户名', width: 120, edit: 'text', align: "center"}   //title就是表格上的名字
                    // edit代表单元格是否可以编辑  align单元格中的字是否居中
                    , {
                        field: 'email', title: '邮箱', width: 150, edit: 'text', templet: function (res) {  //templet是模板
                            return '<em>' + res.email + '</em>'
                        }
                    }
                    , {field: 'sex', title: '性别', width: 80, edit: 'text', sort: true}   
                    //sort排序,只是排列页面上的数据,该列会出现小箭头可以点击排序
                    , {field: 'city', title: '城市', width: 100, totalRowText: "合计"}  //totalRowText用于显示自定义的合计文本
                    , {field: 'sign', title: '签名'}
                    , {field: 'experience', title: '积分', width: 80, totalRow: true} //totalRow是否开启该列的自动合计功能
                    , {field: 'ip', title: 'IP', width: 120}
                    , {field: 'logins', title: '登入次数', width: 100, sort: true}
                    , {field: 'joinTime', title: '加入时间', width: 120}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150} //toolbar绑定按钮
                ]]
    

    相关事情的监听

    官网案例

    监听头工具栏事件

    前提按钮上必须有lay-event 事件

    //监听头工具栏事件  
            table.on('toolbar(userTable)',function (obj){   //userTable 是table绑定的lay-filter
                switch(obj.event){    //需要在按钮上加上  lay-event 事件 ,案例为add和batchdel
                    case 'add':
                        layer.msg('添加');
                        break;
                    case 'batchdel':
                        layer.msg('删除');
                        break;
                };
            });
    

    监听复选框选择事件

            //监听复选框选择事件
            table.on('checkbox(userTable)',function (obj){   //userTable 是table绑定的lay-filter
                console.log(obj.checked); //当前是否选中状态
                console.log(obj.data); //选中行的相关数据
                console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
            });
    

    监听单元格编辑事件

    前提是单元格可以编辑,在cols里面加上edit:true

            //监听单元格编辑事件
            table.on('edit(userTable)', function(obj){ //注:edit是固定事件名,test是table原始容器的属性 lay-filter="对应的值"
                console.log(obj.value); //得到修改后的值
                console.log(obj.field); //当前编辑的字段名
                console.log(obj.data); //所在行的所有相关数据
                //使用post请求更新数据
    /*            $.post("url?"+obj.field+"&id="+obj.data.id,function (json){
                    
                })*/
            });
    

    监听行单双击事件

    单双击事件只能选择一个

    //监听行单击事件
    table.on('row(test)', function(obj){
      console.log(obj.tr) //得到当前行元素对象
      console.log(obj.data) //得到当前行数据
      //obj.del(); //删除当前行,数据库内没删除
      //obj.update(fields) //修改当前行数据
    });
     
    //监听行双击事件
    table.on('rowDouble(test)', function(obj){
      //obj 同上
    })
    

    监听行中工具条点击事件

    前提按钮上必须有lay-event 事件

    /监听行中工具条点击事件
            //监听工具条 
            table.on('tool(userTable)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
    
                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something
    
                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        ,title: 'xxx'
                    });
                } else if(layEvent === 'LAYTABLE_TIPS'){
                    layer.alert('Hi,头部工具栏扩展的右侧图标。');
                }
            });
    

    基础事件

    获取选中行

    var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值
     
    console.log(checkStatus.data) //获取选中行的数据
    console.log(checkStatus.data.length) //获取选中行数量,可作为是否有选中行的条件
    console.log(checkStatus.isAll ) //表格是否全选
    

    表格重载

    /*                    table.reload("userTable",{  //userTable 即为基础参数 id 对应的值
                            url:'resources/json/user.json'
                        })*/
                        render.reload({url:'resources/json/user.json'});  //render是整个table.render的返回值
                        break;
    

    实例demo

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数据表格</title>
        <link href="resources/layui/css/layui.css" rel="stylesheet">
    </head>
    <body>
    <!--搜索条件开始-->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>表单集合演示</legend>
    </fieldset>
    <form class="layui-form" action="" method="post">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="id" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">用户邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="email" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="starttime" id="starttime" readonly autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="endtime" id="endtime" readonly autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">性别</label>
                <input type="radio" name="sex" value="1" title="">
                <input type="radio" name="sex" value="0" title="">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" id="dosearch"><span class="layui-icon layui-icon-search"></span>查询
                </button>
                <button type="reset" class="layui-btn layui-btn-primary"><span class="layui-icon layui-icon-refresh"></span>重置
                </button>
            </div>
        </div>
    </form>
    <!--搜索条件结束-->
    
    <!--数据表格开始-->
    <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
    <div id="barDemo" style="display: none">
        <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>
    </div>
    <div id="toolbarDemo" style="display: none">
        <a class="layui-btn layui-btn-xs" lay-event="add">增加</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="batchdel">删除</a>
        <a class="layui-btn layui-btn-xs" lay-event="getselect">得到选中行</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="reloadtable">刷新数据</a>
    </div>
    <!--数据表格结束-->
    
    <!--添加和修改的弹出层开始-->
    <div style="display: none" id="saveorupdatediv">
        <form class="layui-form" lay-filter="dataFrm"  id="dataFrm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">编号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="id" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="email" lay-verify="required|email" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">城市</label>
                    <div class="layui-input-inline">
                        <input type="text" name="city" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">性别</label>
                    <input type="radio" name="sex" value="1" title="" checked>
                    <input type="radio" name="sex" value="0" title="">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="dosubmit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <!--添加和修改的弹出层结束-->
    
    <script src="resources/layui/layui.js"></script>
    <script type="text/javascript">
        layui.use(['jquery', 'layer', 'form', 'table', 'laydate'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var laydate = layui.laydate;
    
            //绑定时间选择器
            laydate.render({
                elem: "#starttime"
            })
            laydate.render({
                elem: "#endtime"
            })
    
            //渲染数据表格
            var tableIns = table.render({
                elem: '#userTable'    //渲染的目标对象
                , url: 'resources/json/person.json'   //数据接口
                , toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板,还可以为boolean类型
                , title: '用户数据表'  //数据导出来的标题
                , height: "full-300"
                , cellMinWidth: 100  //设置列的最小默认宽度
                , done: function (res, curr, count) {  //数据渲染完的回调
                    //如果是异步请求数据方式,res即为你接口返回的信息。
                    //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
                    //curr得到当前页码
                    //count得到数据总量
                }
                , page: true  //是否开启分页
                , cols: [[
                    {type: 'checkbox', fixed: 'left', LAY_CHECKED: true, align: "center"}
                    //type设定列类型。可选值有:normal(常规列,无需设定)checkbox(复选框列)radio(单选框列增)numbers(序号列)space(空列)
                    //fixed是固定在那边,LAY_CHECKED默认选中什么,添加在这里就是全选,添加在json中就是选中对应的该条
                    , {field: 'id', title: 'ID', align: "center"}  //field就是对应json中data中的字段
                    , {field: 'username', title: '用户名', edit: 'text', align: "center"}   //title就是表格上的名字
                    // edit代表单元格是否可以编辑  align单元格中的字是否居中
                    , {
                        field: 'email', title: '邮箱', width: 150, edit: 'text', templet: function (res) {  //templet是模板
                            return '<em>' + res.email + '</em>'
                        }, align: "center"
                    }
                    , {
                        field: 'sex', title: '性别', edit: 'text', sort: true, templet: function (d) {
                            return d.sex == '1' ? '男' : '女';
                        }, align: "center"
                    }
                    //sort排序,只是排列页面上的数据,该列会出现小箭头可以点击排序
                    , {field: 'city', title: '城市', totalRowText: "合计", align: "center"}  //totalRowText用于显示自定义的合计文本
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', align: "center"} //toolbar绑定按钮
                ]]
            });
    
            //监听头工具栏事件
            table.on('toolbar(userTable)', function (obj) {   //userTable 是table绑定的lay-filter
                switch (obj.event) {    //需要在按钮上加上  lay-event 事件 ,案例为add和batchdel
                    case 'add':
                        openAddUser();
                        break;
                    case 'batchdel':
                        layer.msg('删除');
                        break;
                };
            });
    
    
            //监听行中工具条点击事件
            //监听工具条
            table.on('tool(userTable)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
                data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
                if (layEvent === 'detail') { //查看
                    //do somehing
                } else if (layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if (layEvent === 'edit') { //编辑
                    openUpdateUser();
                } else if (layEvent === 'LAYTABLE_TIPS') {
                    layer.alert('Hi,头部工具栏扩展的右侧图标。');
                }
    
            });
            var url;
            var mainIndex;
    
            //点击添加,弹出框
            function openAddUser(){
                mainIndex=layer.open({
                    type: 1,
                    title:"添加新用户",
                    area:["800px"],
                    content:$("#saveorupdatediv"),
                    success:function (){
                        alert($("#dataFrm"));
                        $("#dataFrm")[0].reset();
                        url="user/add.action";
                    }
                })
            }
            //点击添加,弹出框
            function openUpdateUser(){
                mainIndex = layer.open({
                    type: 1,
                    title:"修改用户",
                    area:["800px"],
                    content:$("#saveorupdatediv"),
                    success:function (index){
                        form.val("dataFrm",data);
                        url="user/add.action";
                    }
                });
            }
    
            form.on("submit(dosubmit)",function (obj){
                //序列化表单数据
                var params=$("#dataFrm").serialize();
                alert(params);
                $.post(url,params,function (obj){
                    layer.msg("成功")
                    layer.close(mainIndex);//关闭弹出层
                    tableIns.reload(); //刷新数据表格
                });
            })
        });
    </script>
    </body>
    </html>
    

    19.文件上传

    官方文档

    springboot+LayUI 文件上传(单文件多文件)

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,337
精华内容 2,534
关键字:

layui后端登录