前端框架Layui学习五：弹出层和数据表格

最新推荐文章于 2024-07-17 15:36:21 发布
最新推荐文章于 2024-07-17 15:36:21 发布
阅读量3.3k 收藏 43
点赞数 5
文章标签： 前端框架Layui 弹出层和数据表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhengzaifeidelushang/article/details/107378990
版权

Layui

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，拿来即用。

一、弹出层

在 layui 中使用 layer

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

在这里插入图片描述
普通信息框：
layer.alert(content, options, yes)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/css/layui.css">
    <link rel="stylesheet" href="../static/css/layer.css">
    <link rel="stylesheet" href="../static/css/laydate.css">
</head>
<body style="padding: 20px">

    <button type="button" class="layui-btn" id="btn1">alert</button>
    <button type="button" class="layui-btn" id="btn2">confirm</button>
    <button type="button" class="layui-btn" id="btn3">prompt</button>
    <button type="button" class="layui-btn" id="btn4">tab</button>
    <button type="button" class="layui-btn" id="btn5">photos</button>
    <button type="button" class="layui-btn" id="btn6">tips</button>
    <button type="button" class="layui-btn" id="btn7">msg</button>
    <script src="../static/css/layui.js"></script>

    <script type="text/javascript">
        layui.use(["jquery",'form','element','layer'],function() {
            let $ = layui.jquery;
            var form = layui.form;
            var element = layui.element;
            var layer = layui.layer;

            $("#btn1").click(function () {
               //layer.alert('提示');
                // layer.alert('加了个图标',{icon:6});
                layer.alert('有了回调', function(index){
                //do something
                    alert("ok")
                    layer.close(index);
            });
            });
        });
    </script>
</body>

询问框：
layer.confirm(content, options, yes, cancel)
在这里插入图片描述

$("#btn2").click(function () {
                layer.confirm('确定退出么？',{icon:3,title:'提示'},function(index){
                    alert('ok');
                    layer.close(index);
                }
            )
            })

输入层：
layer.prompt(options, yes)
在这里插入图片描述

            $("#btn3").click(function () {
                layer.prompt(function(value,index,elem){
                    alert(value);
                    layer.close(index);
                }
            )
            })

在这里插入图片描述

       $("#btn3").click(function () {
                layer.prompt({
                    formType: 2,
                    value: '初始值',
                    title: '请输入值',
                    area: ['800px', '350px'] //自定义文本域宽高
                }, function(value, index, elem){
                    alert(value); //得到value
                    layer.close(index);
                });

            })

相册层：layer.photos(options)
相册层，也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。

1）json格式传入
如果是json传入，返回的json需严格按照如下格式：
在这里插入图片描述

images.json文件

{
  "title": "相册标题",
  "id": 123,
  "start": 0,
  "data": [
    {
      "alt": "图片名1",
      "pid": 666,
      "src": "../static/images/1.jpg",
      "thumb": "../static/images/1.jpg"
    },
    {
      "alt": "图片名2",
      "pid": 666,
      "src": "../static/images/2.jpg",
      "thumb": "../static/images/2.jpg"
    },
    {
      "alt": "图片名3",
      "pid": 666,
      "src": "../static/images/3.jpg",
      "thumb": "../static/images/3.jpg"
    }
  ]
}

$("#btn5").click(function(){
                $.get("../static/images/images.json",function (json) {
                    layer.photos({
                        photos:json,
                        anim:5
                    });

                });

            });

tips层：layer.tips(content, follow, options)
在这里插入图片描述

 $("#btn6").click(function(){
                layer.tips('只想提示地精准些', '#btn6');
            });

提示框： layer.msg(content, options, end)

      $("#btn7").click(function(){
                layer.msg('只想弱弱提示');
            });
layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
layer.type=0

在这里插入图片描述

<body style="padding: 20px">

     <button type="button" class="layui-btn" id="btn7">layer.open.type=0</button>
     <button type="button" class="layui-btn" id="btn8">layer.open.type=1</button>
     <button type="button" class="layui-btn" id="btn9">layer.open.type=2</button>

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

    <script type="text/javascript">
        layui.use(["jquery",'form','element','layer'],function() {
            let $ = layui.jquery;
            var form = layui.form;
            var element = layui.element;
            var layer = layui.layer;

            $("#btn7").click(function(){
                layer.open({
                    type:0, //设置类型 默认为0 1页面层 2ifream层
                    title:"提示", //标题
                    content:'你好么',//内容 type=0为内容
                    skin:'layui-layer-molv',//皮肤
                    area:['500px','300px'], //宽高
                    icon:1, //只对type=0有效
                    btn:['按钮一','按钮二','按钮三'],
                    yes: function(index,layero){
                        alert("按钮一");
                        layer.close(index);
                    },
                    btn2:function (index,layero) {
                        alert("按钮二")
                    },
                    btn3:function (index,layero) {
                        alert("按钮三")
                    },
                    cancel:function () {
                        alert("cancel")
                    },
                    btnAlign:'c', //按钮对齐方式
                    shade:[0.8,'#393D49'], //遮罩
                    shadeClose:true //当点击遮罩是否关闭弹层

                    });
            });
        });
    </script>
</body>
layer.type=1

页面层，可以把页面上的某一段HTML代码放到弹出层里面，此时的content属性可以使用html代码，也可以使用页面元素选择器
在这里插入图片描述

                  $("#btn8").click(function(){
                layer.open({
                    type:1, //设置类型 默认为0 1页面层 2ifream层
                    title:"提示", //标题
                    content:$('#mydiv'),//内容 type=0为内容
                    skin:'layui-layer-molv',//皮肤
                    area:['500px','300px'], //宽高
                    });
            });
layer.type=2

type=2是一个iframe层，此时的content就是一个页面的url
在这里插入图片描述

                  $("#btn9").click(function(){
                layer.open({
                    type:2, //设置类型 默认为0 1页面层 2ifream层
                    title:"提示", //标题
                    content:"test2.html",//内容 type=0为内容
                    skin:'layui-layer-molv',//皮肤
                    area:['500px','300px'], //宽高
                    });
            });

二、数据表格

在这里插入图片描述
1.数据准备
users.json数据格式

{
  "code": 0
  ,"msg": ""
  ,"count": 101
  ,"data": [{
    "id": "10001"
    ,"username": "杜甫"
    ,"email": "xianxin@layui.com"
    ,"sex": "男"
    ,"city": "浙江杭州"
    ,"sign": "点击此处，显示更多。当内容超出时，点击单元格会自动显示更多内容。"
    ,"experience": "116"
    ,"ip": "192.168.0.8"
    ,"logins": "108"
    ,"joinTime": "2016-10-14"
  }, {
    "id": "10002"
    ,"username": "李白"
    ,"email": "xianxin@layui.com"
    ,"sex": "男"
    ,"city": "浙江杭州"
    ,"sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。"
    ,"experience": "12"
    ,"ip": "192.168.0.8"
    ,"logins": "106"
    ,"joinTime": "2016-10-14"
    ,"LAY_CHECKED": true
  }, {
    "id": "10003"
    ,"username": "王勃"
    ,"email": "xianxin@layui.com"
    ,"sex": "男"
    ,"city": "浙江杭州"
    ,"sign": "人生恰似一场修行"
    ,"experience": "65"
    ,"ip": "192.168.0.8"
    ,"logins": "106"
    ,"joinTime": "2016-10-14"
  }, {
    "id": "10004"
    ,"username": "李清照"
    ,"email": "xianxin@layui.com"
    ,"sex": "女"
    ,"city": "浙江杭州"
    ,"sign": "人生恰似一场修行"
    ,"experience": "666"
    ,"ip": "192.168.0.8"
    ,"logins": "106"
    ,"joinTime": "2016-10-14"
  }, {
    "id": "10005"
    ,"username": "冰心"
    ,"email": "xianxin@layui.com"
    ,"sex": "女"
    ,"city": "浙江杭州"
    ,"sign": "人生恰似一场修行"
    ,"experience": "86"
    ,"ip": "192.168.0.8"
    ,"logins": "106"
    ,"joinTime": "2016-10-14"
  }, {
    "id": "10006"
    ,"username": "贤心"
    ,"email": "xianxin@layui.com"
    ,"sex": "男"
    ,"city": "浙江杭州"
    ,"sign": "人生恰似一场修行"
    ,"experience": "12"
    ,"ip": "192.168.0.8"
    ,"logins": "106"
    ,"joinTime": "2016-10-14"
  }, {
    "id": "10007"
    ,"username": "贤心"
    ,"email": "xianxin@layui.com"
    ,"sex": "男"
    ,"city": "浙江杭州"
    ,"sign": "人生恰似一场修行"
    ,"experience": "16"
    ,"ip": "192.168.0.8"
    ,"logins": "106"
    ,"joinTime": "2016-10-14"
  }, {
    "id": "10008"
    ,"username": "贤心"
    ,"email": "xianxin@layui.com"
    ,"sex": "男"
    ,"city": "浙江杭州"
    ,"sign": "人生恰似一场修行"
    ,"experience": "106"
    ,"ip": "192.168.0.8"
    ,"logins": "106"
    ,"joinTime": "2016-10-14"
  }]
}

2.数据表格代码
可以使用html实现
可以使用js实现

<body>

    <div style="display: none" id="userToolBar">
        <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-sm">增加</button>
            <button type="button" class="layui-btn layui-btn-sm">编辑</button>
            <button type="button" class="layui-btn layui-btn-sm">删除</button>
        </div>
    </div>

    <div id="userBar" 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>

    <table class="'layui-hide" id="userTable" lay-filter="userTable"></table>

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

    <script type="text/javascript">
        layui.use(["jquery",'form','element','layer','table'],function() {
            let $ = layui.jquery;
            var form = layui.form;
            var element = layui.element;
            var layer = layui.layer;
            var table = layui.table;

            //渲染数据表格
            table.render({
                elem: '#userTable', //渲染的目标对象
                url:'../static/images/users.json', //数据接口
                title:'用户数据登录表',//数据导出的标题
                page:true,//是否启动分页
                toolbar:"#userToolBar",//表格的工具条
                defaultToolbar:['filter','exports','print'],
                //width:220,
                //hight:300,
                //cellMinWidth:100,//设置列的最小默认宽度
                down:function(res,curr,count){
                    alert(res);//后台url返回的json串
                    alert(curr);//当前页
                    alert(count);//数据总条数
                },
                totalRow:true,//开启合并行
                limit:20,//设置每页显示的条数，默认为10
                limits:[20,40,60,80],
                loading:true,
                text:{
                    none:"未查询到数据"  //默认无数据
                },

                cols: [[ //列表数据
                    {type:'checkbox',fixed:'left'},
                    {field:'id', title:'ID', width:80,sort:true}, //field设定字段名，title设定标题名称,sort排页面已有数据
                    {field:'username', title:'用户名', width:120,edit:true,align:'center'},//edit可编辑
                    {field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
                        return '<em>'+ res.email +'</em>'
                    }},
                    {field:'sex', title:'性别', width:80, edit: 'text', sort: true,templet: function (d) {
                        return d.sex=='男'?'汉子':'妹子';
                    }},
                    {field:'city', title:'城市', width:100},
                    {field:'sign', title:'签名',totalRowText:'合计'},
                    {field:'experience', title:'积分', width:80,totalRow:true}, //totalRow合并计算
                    {field:'ip', title:'IP', width:120},
                    {field:'logins', title:'登入次数', width:100},
                    {field:'joinTime', title:'加入时间', width:120},
                    {fixed: 'right', title:'操作',toolbar:"#userBar",width:150}
    ]]

  });


        });
    </script>

3、相关事件监听

监听头工具栏事件
在这里插入图片描述

<body>
 	<table class="'layui-hide" id="userTable" lay-filter="userTable"></table>

    <div type="text/html" style="display: none" id="userToolBar">
        <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
        <a class="layui-btn layui-btn-xs" lay-event="batch_del">批量删除</a>
    </div>

            //头工具栏事件
  table.on('toolbar(userTable)', function(obj) {
      switch (obj.event) {
          case 'add':
              layer.msg('添加');
              break;
          case 'batch_del':
              layer.msg('批量删除');
              break;
      }
  })


        });
    </script>
</body>

监听复选框选择
在这里插入图片描述

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

监听单元格编辑

在这里插入图片描述


            //监听单元格编辑
        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(userTable)', function(obj){
                console.log(obj.tr) //得到当前行元素对象
                console.log(obj.data) //得到当前行数据
                obj.del(); //删除当前行
                //obj.update(fields) //修改当前行数据
            });

监听行双击事件

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

绑定工具条模板：toolbar
通常你需要在表格的每一行加上 查看、编辑、删除 这样类似的操作按钮，而 tool 参数就是为此而生，你因此可以非常便捷地实现各种操作功能。tool 参数和 templet 参数的使用方式完全类似，通常接受的是一个选择器，也可以是一段HTML字符。
在这里插入图片描述

//监听工具条
            table.on('tool(userTable)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                
                if (layEvent === 'del') { //查看
                    //do somehing
                    layer.msg("删除");
                    layer.confirm('真的删除行么', function (index) {
                        layer.close(index);
                    });
                } else if (layEvent === 'edit') { //编辑
                    //do something
                    layer.msg('修改')
                    //同步更新缓存对应的值
                }
            });

获取选中行

在这里插入图片描述

<body>

    <div type="text/html" style="display: none" id="userToolBar">
        <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
        <a class="layui-btn layui-btn-xs" lay-event="batch_del">批量删除</a>
        <a type='button' class="layui-btn layui-btn-sm" lay-event="getSelect">得到选中行</a>
        <a type="button" class="layui-btn layui-btn-sm" lay-event="reloadTable">刷新数据</a>
    </div>

   
            //头工具栏事件
  table.on('toolbar(userTable)', function(obj) {
      switch (obj.event) {
          case 'add':
              layer.msg('添加');
              break;
          case 'batch_del':
              layer.msg('批量删除');
              break;
          case 'getSelect':
              var checkStatus = table.checkStatus('userTable'); //idTest 即为基础参数 id 对应的值
              console.log(checkStatus.data) //获取选中行的数据
              console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
              console.log(checkStatus.isAll ) //表格是否全选
              break;
      }
  })
          
    </script>
</body>

刷新数据
在这里插入图片描述

<body>
    <div type="text/html" style="display: none" id="userToolBar">
        <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
        <a class="layui-btn layui-btn-xs" lay-event="batch_del">批量删除</a>
        <a type='button' class="layui-btn layui-btn-sm" lay-event="getSelect">得到选中行</a>
        <a type="button" class="layui-btn layui-btn-sm" lay-event="reloadTable">刷新数据</a>
    </div>

    <script type="text/javascript">
        layui.use(["jquery",'form','element','layer','table'],function() {
            let $ = layui.jquery;
            var form = layui.form;
            var element = layui.element;
            var layer = layui.layer;
            var table = layui.table;

            //渲染数据表格
            table.render({
                elem: '#userTable', //渲染的目标对象
                url:'../static/images/users.json', //数据接口
                title:'用户数据登录表',//数据导出的标题
                page:true,//是否启动分页
                toolbar:"#userToolBar",//表格的工具条
                defaultToolbar:['filter','exports','print'],
                //width:220,
                //hight:300,
                //cellMinWidth:100,//设置列的最小默认宽度
                down:function(res,curr,count){
                    alert(res);//后台url返回的json串
                    alert(curr);//当前页
                    alert(count);//数据总条数
                },
                totalRow:true,//开启合并行
                limit:20,//设置每页显示的条数，默认为10
                limits:[20,40,60,80],
                loading:true,
                text:{
                    none:"未查询到数据"  //默认无数据
                },

                cols: [[ //列表数据
                    {type:'checkbox',fixed:'left'},
                    {field:'id', title:'ID', width:80,sort:true}, //field设定字段名，title设定标题名称,sort排页面已有数据
                    {field:'username', title:'用户名', width:120,edit:true,align:'center'},//edit可编辑
                    {field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
                        return '<em>'+ res.email +'</em>'
                    }},
                    {field:'sex', title:'性别', width:80, edit: 'text', sort: true,templet: function (d) {
                        return d.sex=='男'?'汉子':'妹子';
                    }},
                    {field:'city', title:'城市', width:100},
                    {field:'sign', title:'签名',totalRowText:'合计'},
                    {field:'experience', title:'积分', width:80,totalRow:true}, //totalRow合并计算
                    {field:'ip', title:'IP', width:120},
                    {field:'logins', title:'登入次数', width:100},
                    {field:'joinTime', title:'加入时间', width:120},
                    {fixed: 'right', title:'操作',toolbar:"#userBar",width:150}
    ]]

  });


            //头工具栏事件
  table.on('toolbar(userTable)', function(obj) {
      switch (obj.event) {
          case 'add':
              layer.msg('添加');
              break;
          case 'batch_del':
              layer.msg('批量删除');
              break;
          case 'getSelect':
              var checkStatus = table.checkStatus('userTable'); //idTest 即为基础参数 id 对应的值
              console.log(checkStatus.data) //获取选中行的数据
              console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
              console.log(checkStatus.isAll ) //表格是否全选
              break;
          //表格重载
          case 'reloadTable':
              table.reload('userTable',{
                  url:'../static/images/users.json'
              })
              break;
      }
  })
        });
    </script>
</body>

三、layui弹出层和数据表格综合案例

实现添加数据，修改数据

在这里插入图片描述

在这里插入图片描述
全部代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/css/layui.css">
    <link rel="stylesheet" href="../static/css/layer.css">
    <link rel="stylesheet" href="../static/css/laydate.css">

</head>
<body>

    <!--搜索条件开始-->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;" >
        <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="name" 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>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="start_time" readonly="readonly" id="start_time" placeholder="yyyy-MM-dd">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="endtime" readonly="readonly" id="endtime" placeholder="yyyy-MM-dd">
                </div>
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search" id="doSearch" lay-submit="" lay-filter="demo1">查询</button>
                <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">重置</button>
            </div>
        </div>

    </form>

    <!--搜索条件结束-->


    <!--数据表格开始-->
    <div type="text/html" style="display: none" id="userToolBar">
        <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
        <a class="layui-btn layui-btn-xs" lay-event="batch_del">批量删除</a>
    </div>

    <div id="userBar" style="display: none;">
        <a class="layui-btn layui-btn-xs" lay-event="edit" id="modify">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </div>

    <table class="'layui-hide" id="userTable" lay-filter="userTable"></table>
    <!--数据表格结束-->

    <!--添加和修改弹出层开始-->
        <div style="display:none;padding: 20px" id="addnewdata">
            <form class="layui-form" action="" method="post" 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" 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="name" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <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="city" autocomplete="off" class="layui-input">
                        </div>
                    </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" style="text-align: center;">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" id="dosubmit" lay-submit="" lay-filter="dosubmit">提交</button>
                        <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">关闭</button>
                    </div>
                </div>
            </form>


        </div>
    <!--添加和修改弹出层结束-->


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

    <script type="text/javascript">
        layui.use(["jquery",'form','element','layer','table','laydate'],function() {
            let $ = layui.jquery;
            let form = layui.form;
            let element = layui.element;
            let layer = layui.layer;
            let table = layui.table;
            let laydate = layui.laydate;



            laydate.render({
                elem:'#start_time',
                type:'datetime',
                calendar:'True'
            });


                 laydate.render({
                elem:'#endtime',
                type:'datetime',
                calendar:'True'
            });

            //渲染数据表格
            var tableIns=table.render({
                elem: '#userTable', //渲染的目标对象
                url:'../static/images/users.json', //数据接口
                title:'用户数据登录表',//数据导出的标题
                page:true,//是否启动分页
                toolbar:"#userToolBar",//表格的工具条
                defaultToolbar:['filter','exports','print'],
                //width:220,
                hight:"full-300",
                //cellMinWidth:100,//设置列的最小默认宽度
                down:function(res,curr,count){
                    alert(res);//后台url返回的json串
                    alert(curr);//当前页
                    alert(count);//数据总条数
                },
                //totalRow:true,//开启合并行
                limit:30,//设置每页显示的条数，默认为10
                //limits:[20,40,60,80],
                loading:true,
                text:{
                    none:"未查询到数据"  //默认无数据
                },

                cols: [[ //列表数据
                    {type:'checkbox',fixed:'left'},
                    {field:'id', title:'ID',sort:true}, //field设定字段名，title设定标题名称,sort排页面已有数据
                    {field:'username', title:'用户名',edit:true,align:'center'},//edit可编辑
                    {field:'email', title:'邮箱',align:'center',edit: 'text', templet: function(res){
                        return '<em>'+ res.email +'</em>'
                    }},
                    {field:'sex', title:'性别',align:'center',edit: 'text', sort: true,templet: function (d) {
                        return d.sex=='1'?'男':'女';
                    }},
                    {field:'city', title:'城市',align:'center'},
                    {fixed: 'right', title:'操作',align:'center',toolbar:"#userBar"}
    ]]

  });

            //监听工具条
            table.on('tool(userTable)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

                if (layEvent === 'del') { //查看
                    //do somehing
                    layer.msg("删除");
                    layer.confirm('真的删除行么', function (index) {
                        layer.close(index);
                    });
                } else if (layEvent === 'edit') { //编辑
                    //do something
                    openUpdateUser(data);
                    //同步更新缓存对应的值
                }
            });

            //头工具栏事件
            table.on('toolbar(userTable)', function(obj) {
                switch (obj.event) {
                    case 'add':
                        openAddUser();
                        break;
                    case 'batch_del':
                        layer.msg('批量删除');
                        break;
                    }
            })

            var url;
            var mainIndex;
            //打开添加页面
            function openAddUser(){
                mainIndex = layer.open({
                    type:1,
                    title:"添加用户",
                    content:$("#addnewdata"),
                    area:['800px','400px'],
                    success:function (index) {
                        //清空表单数据
                        $('#dataFrm')[0].reset();
                        url="user/updateUser.action";
                    }
                })
            }

            //打开添修改页面
            function openUpdateUser(data){
                mainIndex=layer.open({
                    type:1,
                    title:"修改用户",
                    content:$("#addnewdata"),
                    area:['800px','400px'],
                    success:function (index) {
                        form.val("dataFrm",data);
                    }
                })
            }

            //保存
            form.on("submit(dosubmit)",function (obj) {
                alert('ok');
                //序列化表单数据
                var params = $("#dataFrm").serialize();
                alert(params);
                $.post(url,params,function (obj) {
                    alert("成功");
                    //关闭弹出层
                    layer.close(mainIndex);
                    //刷新数据表格
                    tableIns.reload();

                })
            })

        });
    </script>
</body>
</html>
快乐骑行^_^
关注
  • 5
    点赞
  • 踩
  • 43
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
layui 弹出层中显示table 表格
qq_43303896的博客
04-28 1万+
html: html渲染的table <table id="JobTable" lay-filter="JobTable"></table> layui弹框渲染的table <#-- 弹框的table--> <div id="openProductBox" style="displa...
layui写弹出框显示表单信息_layui之弹出form表单以及提交
weixin_27303545的博客
12-29 3490
在前端开发时经常会用到form表单来进行数据交互，layui框架教程栏目为大家介绍了用layui前端框架弹出form表单以及提交的方法，希望可以在大家学习layui时有一定的帮助。第一步:引用两个文件第二步:点击删除按钮弹出提示框/*删除开始*/$(".del").click(function () {var id = $(this).attr("id");layer.alert('您确定要删除操...
layui弹出层中显示表格
qq_37344867的博客
05-06 3017
业务需求：账号如果登录时，该账号具有多重身份，弹出弹框进行角色的选择 HTML <!-- 登录学校选择 --> <div id="layer-chooseSchool" lay-filter="chooseSchool-filter" style="display: none;"> <div class="popup_tips" style="text-align: left;padding:8px 15px;margin-bottom:0"> 该账号密码对应
layui前端开发-记录一次弹窗嵌套表格功能的开发
最新发布
U12Euphoria的博客
07-17 396
前端是真的难写哇，写的巨烂，毕竟平时很少写前端，很容易忘记。每次写都要抱着官方文档看，特此记录一下layui的使用。
layui中弹出层出现数据表格
weixin_52057887的博客
08-11 2619
layui中的弹出层出现数据表格 function popup(result) { layui.use('table', function () { var table = layui.table; layer.open({ type: 1, area: ["700px", '430px'], tit
layui的layer弹出层和form表单
热门推荐
阳某的博客
06-27 4万+
文章目录弹出层layerform表单增删改查所有代码 如果想用layui来完成增删改查，那么要会用弹出层和form表单这两个组件是必须的，所以今天就来介绍一些如何用layui完成基本的增删改查 弹出层layer 因为layui的特性，每次不管使用哪个组件，都要先把它的模块加载出来 比如我要用layer和form 那么就需要先这样定义,你的操作都是在这个里面进行，当然页可以一次性加载所有模块，详情...
项目中的layui总结(表单/表格/弹出层)
qq_45503686的博客
09-15 2010
本次项目使用到layui以下将对其进行总结 https://www.layui.com/ 附上layui网站 layui的基础引用 layui–upload文件上传 layui–form表单 layui–rate评分 layui–table表格（针对传输数据同官方文档不同） layui–layer弹出层 layui-导航 一、layui的基础引用 npm i layui -S 安装全局 1...
前端ui框架layui——layer弹出层-基础参数
Smile__Mo的博客
06-15 2381
layer 至今仍作为 layui 的代表作，她的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 Web 开发者的圈子里口口相传，乃至于成为今天的 layui 最强劲的源动力。目前，layer已成为国内最多人使用的 Web 弹层组件，GitHub 自然Stars5000+，官网累计下载量达50w+，大概有30万不同规模的 Web 平台使用过 layer。 之所以列举上面这些数字，并非是在夸夸其谈，而是懂 layer 的人都知
layui基础---弹出层
qq_44784185的博客
12-15 601
1.弹出层依赖模块 layui.use('layer',function(){ var layer = layui.layer; }) 2,弹出层方法 open() 1,open（）的基础属性
使用layui前端框架弹出form表单以及提交的示例
10-16
在本文中，我们将深入探讨如何使用layui前端框架来弹出form表单并进行数据提交。layui是一款基于HTML5和CSS3的轻量级前端组件库，它提供了丰富的UI组件和强大的交互功能，使得Web开发更加便捷高效。下面，我们就按照...
基于layui点击按钮弹出包含表单的窗口
03-16
在前端开发中，layui是一个非常流行的轻量级前端框架，尤其在构建用户界面时非常实用。layui提供了丰富的组件，如表格、按钮、弹窗、表单等，使得开发者能够快速构建美观且功能强大的Web应用。本篇文章将详细介绍...
layui弹出层按钮提交iframe表单的方法
10-18
今天小编就为大家分享一篇layui弹出层按钮提交iframe表单的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
LayUI弹出层（html）
03-12
1. **基础用法**：LayUI弹出层可以通过`layui.layer.open()`方法来创建。这个方法接受一个参数，这是一个配置对象，其中可以设置弹出层的标题、内容、类型、宽度、高度等属性。例如： ```javascript layui.use('...
最新版本的layui前端框架学习文档.zip
09-15
6. **弹出层（layer）**：layui内置的layer模块是一个强大的弹窗插件，不仅可以用于提示信息，还可以创建各种类型的内容层，如iframe层、图片层、表单层等，极大地丰富了页面交互。 7. **布局系统**：layui的栅格...
layui弹出层样式修改，使用css的background属性设置多个背景图附件
02-24
总的来说，通过理解和利用CSS的`background`属性，我们可以灵活地在layui弹出层中应用多张背景图片，以实现个性化的设计需求。同时，配合layui的主题系统，可以更方便地管理和维护这些样式，让开发更加高效。
layui弹出层提交表单！
Jarven_ma的博客
09-12 2万+
本文章使用layui框架，提交表单，如果使用其他的框架请右上角！ 首先设置弹出层如下图： layer.open({ type : 2, title : "信息編輯", area : [ '45%', '35%' ], shade : 0, sha...
layui弹出层表单
luoawai的博客
07-03 3万+
弹出层表单很常见,也很实用,无论是在’pc端网页还是在移动端. 现在用layui来实现一下这个表单吧. html <form class="layui-form" id="test" style="display:none"> <div class="layui-form-item"> <label class="layui-form-label">...
使用layui的弹出层表单，在页面弹出表单
世上哪有什么岁月静好,不过是有人替你负重前行
01-20 8580
弹出层表单很常见,也很实用,无论是在pc端网页还是在移动端. 现在用layui来实现一下这个表单吧. html <form class="layui-form" id="test" style="display:none"> <div class="layui-form-item"> <label class="layui-form-label">输入框</label> <div class="layui-input-block"&g
Django-Layui点击弹窗实现动态分页表格教程
2. Layui弹出层（layer）： 当按钮被点击时，执行JavaScript代码，调用`layui.layer.open`方法弹出一个对话框。`type:1`表示这是一个弹窗，`title`定义了对话框的标题，`area`设置弹窗的宽度和高度。`content`包含...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

快乐骑行^_^

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值