layui模态框提交数据

最新推荐文章于 2024-03-27 12:34:06 发布

qq_27878777

最新推荐文章于 2024-03-27 12:34:06 发布

阅读量589

点赞数 1

文章标签： layui jquery javascript

本文链接：https://blog.csdn.net/qq_27878777/article/details/122085781

版权

列表界面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
      <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">登录名</label>
            <div class="layui-input-block">
              <input type="text" name="loginname" placeholder="请输入" autocomplete="off" class="layui-input">

            </div>
          </div>

        <div class="layui-inline">
          <label class="layui-form-label">手机</label>
          <div class="layui-input-block">
            <input type="text" name="telphone" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>

          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
      </div>
    </div>
  </div>
</div>

<div class="layui-card-body">

  <!--工具栏-->
  <div style="padding-bottom: 10px;">
    <button class="layui-btn layuiadmin-btn-admin" data-type="batchdel">删除</button>
    <button class="layui-btn layuiadmin-btn-admin" data-type="add">添加</button>
  </div>

  <!--数据表格-->
  <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>

  <!--状态工具条-->
  <script type="text/html" id="status">
    <input type="checkbox" name="status" lay-filter="status" lay-id="{{d.id}}" lay-skin="switch" lay-text="正常|禁用" value="{{d.status}}" {{# if(d.status==0){ }} checked {{# } }} >
  </script>

  <!--表格右侧的操作列-->
  <script type="text/html" id="options">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
</div>


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

  layui.config({
      base:'/static/layuiadmin/'
  }).extend({
    index: 'lib/index'
  }).use(['jquery', 'table', 'element', 'form', 'layer','index','useradmin'], function () {
    var table = layui.table;
    var $ = layui.jquery;
    var element = layui.element;
    var form = layui.form;
    var layer = layui.layer;

    //用户表格初始化
    var dataTable = table.render({
      elem: '#dataTable'
      , height: 500
      , url: "{:url('/super/admin')}" //数据接口
      // , where: {model: "user"}
      // , page: true //开启分页
      , cols: [[ //表头
        {checkbox: true, fixed: true}
        , {field: 'id', title: 'ID', sort: true, width: 80}
        , {field: 'username', title: '登录名'}
        , {field: 'mobile', title: '手机号'}
        , {field: 'nickname', title: '昵称'}
        , {field: 'status', title: '状态', toolbar: '#status'}
        , {field: 'login_time', title: '上次登录时间'}
        , {field: 'login_ip', title: '登录IP'}
        , {field: 'create_date', title: '创建时间'}
        , {fixed: 'right', title: '操作', width: 320, align: 'center', toolbar: '#options'}
      ]]
    });


    //监听工具条
    table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
      var data = obj.data //获得当前行数据
              , layEvent = obj.event; //获得 lay-event 对应的值
      if (layEvent === 'del') {
        layer.confirm('确认删除吗？', function (index) {
          layer.close(index);
          var load = layer.load();
          $.post("{:url('super/admin/del')}", {ids: [data.id]}, function (res) {
            layer.close(load);
            if (res.code == 1) {
              layer.msg(res.msg, {icon: 1, time: 1500}, function () {
                obj.del();
              })
            } else {
              layer.msg(res.msg, {icon: 2, time: 1500})
            }
          });
        });
      }
    });

    //监听搜索
    form.on('submit(LAY-user-back-search)', function(data){
      var field = data.field;
      //执行重载
      table.reload('dataTable', {
        where: field
      });

    });





    //监听状态
    form.on('switch(status)', function(data){
      var status = data.elem.checked?0:1;
      var id = $(data.elem).attr('lay-id');
      var load = layer.load();
      $.post("{:url('/super/admin/status')}",{status:status,id:id},function (res) {
        layer.close(load);
        if (res.code==1){
          layer.msg(res.msg,{icon:1,time:1500})
        } else {
          layer.msg(res.msg,{icon:2,time:1500},function () {
            $(data.elem).prop('checked',!$(data.elem).prop('checked'));
            form.render()
          })
        }
      })

    });



    var active = {
      batchdel: function(){
          var ids = []
          var checkStatus = table.checkStatus('dataTable')
          ,checkData = checkStatus.data; //得到选中的数据
        if (checkData.length > 0){
            $.each(checkData,function (index, element) {
                ids.push(element.id)
            })
        }

          if(checkData.length === 0){
            return layer.msg('请选择数据');
          }
        layer.confirm('确定删除吗？', function(index) {
            layer.close(index)
            var load = layer.load();
            $.post('{:url("super/admin/del")}', {ids: ids}, function(res){
                layer.close(load)
                if(res.code==1){
                  layer.msg(res.msg, {icon:1, time:1500},function () {
                      dataTable.reload()
                  })
                }else{
                    layer.msg(res.msg,{icon:2, time:1500})
                }
            });
        })
      },

      add: function(){
        layer.open({
            type:2
            ,title:'添加管理员'
            ,content:'{:url("/super/admin/add")}'
            ,area:['420px','420px']
            ,id: 'LAY_layuipro'
            ,btn:['确定', '取消']
            ,moveType : 1
            ,yes:function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submitID = 'LAY-user-back-submit'
                    ,submitFilterID = 'LAY-user-front-submit'
                    ,submit = layero.find('iframe').contents().find('#'+ submitID);
					//这里是监听 提交按钮的lay-filter
                  iframeWindow.layui.form.on('submit('+ submitFilterID +')', function(data){
                    var field = data.field;
                    // console.log(field)
                    $.ajax({
                        url:'{:url("/super/admin/doadd")}',
                        type:'post',
                        data:field,
                        dataType:'json',
                        success:function(res){
                            if(res.code==1){
                              layer.msg(res.msg, {icon:1, time:1500},function () {
                                dataTable.reload()
                              })
                            }else{
                              layer.msg(res.msg,{icon:2, time:1500})
                            }
                        }

                    })

                    layer.close(index);
                  })
              submit.trigger('click');
            }
        });
      }
    }


      $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });

  })
</script>

</body>
</html>

新增界面




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 管理员 iframe 框</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin" style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">登录名</label>
        <div class="layui-input-inline">
            <input type="text" name="username" lay-verify="required" placeholder="登录名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机</label>
        <div class="layui-input-inline">
            <input type="text" name="mobile" lay-verify="phone" placeholder="请输入号码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-inline">
            <input type="text" name="nickname" lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="text" name="password" lay-verify="required" placeholder="请输密码" autocomplete="off" value="123456" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-back-submit" value="确认">
    </div>
</div>

<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form'], function(){
        var $ = layui.$
            ,form = layui.form ;
    })
</script>
</body>
</html>

qq_27878777

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layui模态框提交数据

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewpo
复制链接

扫一扫