从基础到入门的 LayUI

最新推荐文章于 2024-06-24 23:23:11 发布

金木君

最新推荐文章于 2024-06-24 23:23:11 发布

阅读量726

点赞数

文章标签： java

本文链接：https://blog.csdn.net/JinMujun/article/details/109400697

版权

1、layui

1.安装

将解压的layui 文件夹拷贝到web 目录

2.引入

在jsp中插入这个依赖

  <link rel="stylesheet" href="/layui/css/layui.css">

    <script src="/layui/layui.js"></script>

3.使用

使用时，首先要导入模块

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="/layui/css/layui.css">

    <script src="/layui/layui.js"></script>
</head>
<body>

<!-- 你的HTML代码 -->

<h1>hello layui</h1>
<script>
    //一般直接写在一个js文件中
    //  layui.use 让layui  加载 layer 模块  form 模块
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form;
        // 土司  串口 tips
        layer.msg('Hello World');
        layer.msg(" 一会放学")
    });
    
</script>
</body>
</html>

4.表格

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>


</head>
<body>


<!--  创建一个空 表格-->
<table id="demo" lay-filter="test"></table>
<script>

    /*  加载表格 模块*/
    layui.use('table', function(){
        // 获取 table 模块
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'  //   去挂在 id 为 demo 的table
            ,height: 200
            ,toolbar:true// 开启工具栏
            ,url: '/getStudentByPage' //数据接口
            ,page: {
                limit:2//每页显示1条
                ,limits:[1,2,3] //可选每页条数
                ,first: '首页' //首页显示文字，默认显示页号
                ,last: '尾页'
                ,prev: '<em>←</em>' //上一页显示内容，默认显示 > <
                ,next: '<i class="layui-icon layui-icon-next"></i>'
                ,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
            }
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'name', title: '学生名', width:80}
                ,{field: 'sex', title: '性别', width:80, sort: true}
                ,{field: 'age', title: '年龄', width: 80, sort: true}
                ,{field: 'height', title: '身高', width: 80}
                ,{field: 'birthday', title: '生日', width: 80}
                ,{field:"right",title:"操作",toolbar: '#barDemo'}// 工具栏要绑定 一个模块
            ]]
        });

        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var layEvent = obj.event;
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    // 向服务端发送删除请求
                    // 此处可以发送ajax
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);// 关闭弹窗
                });
            } else if(layEvent

最低0.47元/天解锁文章

金木君

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从基础到入门的 LayUI

1、layui1.安装将解压的layui 文件夹拷贝到web 目录2.引入在jsp中插入这个依赖 <link rel="stylesheet" href="/layui/css/layui.css"> <script src="/layui/layui.js"></script>3.使用使用时，首先要导入模块<!DOCTYPE html><html><head> <meta charset
复制链接

扫一扫