完整的layui导航栏与数据表格及其批量删除、添加、模糊搜索等功能

最新推荐文章于 2023-03-17 09:11:21 发布
yuan2194655945
最新推荐文章于 2023-03-17 09:11:21 发布
阅读量1.1k
点赞数
本文链接：https://blog.csdn.net/yuan2194655945/article/details/101626318
版权
<!DOCTYPE html>
<html>
<head>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<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">
<meta http-equiv="Cache-Control" content="no-siteapp" />
      <meta charset="utf-8"> 
      <title>后台-留言管理</title>
      <link rel="stylesheet" href="layui/css/layui.css" media="all"> 
      <script src="echarts.min.js"></script>
      <style>
  .bg{
    width: 82%;
    height:200px;
	  position:absolute;
    left:15.5%;
    top:26%
}
.b{
	  position:absolute;
    left:0%;
    top:-120%
} 
.c{
	  position:absolute;
    top: -40px;
    left:195px;   
}       
.dropdown {
    position: absolute;
    top:3.5%;
    left:95%;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    left:-30px;
    background-color: #f9f9f9;
    min-width: 89px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}              
body{
   width:100%;
   height:100%;
   background-image: url('11q.png');
   background-repeat:no-repeat;
   background-size: 100%;
}
</style> 
</head>
<body>
  <div class="bg">    <table class="layui-hide" id="test" lay-filter="test"></table>
    <div class="c demoTable">
      搜索用户名：
      <div class="layui-inline">
        <input name="keyword" class="layui-input" id="demoReload" autocomplete="off" style="position: absolute;left:10px;top:-20px;width: 200px">
      </div>
      <button class="layui-btn" id="yuan" data-type="reload" style="position: absolute;left:320px;top:-10px">搜索</button>
    </div>
    <script id="toolbarDemo" type="text/html">
      <div class="b layui-btn-container">
        <button class="layui-btn layuiadmin-btn-list" data-type="getCheckData1">批量删除</button>
        <a class="layui-btn btn-add btn-default" id="btn-add">添加</a>
      </div>
    </script>
     
    <script id="barDemo" type="text/html">
      <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>
                  
    <script src="jquery.js" charset="utf-8"></script>        
    <script src="layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
     
    <script>
      var msg;
    $.ajax({
        type: 'get',
        url: 'user6.php',
        async:false,
        success: function (data) {
            msg = JSON.parse(data);
            $('.fr').text("共有数据: " + msg.length + " 条");
        }
    });
    //将数据库内容输入到data里
    function creatData() {
        var data = [];
        var length = msg.length;
        for (var i = 0; i < length; i++) {
            var obj = {
                "id": msg[i][0],
                "用户":msg[i][1],
                "编号": msg[i][2],
                "评论": msg[i][3],
                "昵称": msg[i][4],
                "头像地址": msg[i][5],
                "时间": msg[i][6],
            }
            data.push(obj);
        }
        return data;
    }
      layui.use(['table'], function () {
        var table = layui.table 
      table.render({
        elem: '#test'
        // ,url:'/test/table/demo1.json'
        ,toolbar: '#toolbarDemo'
        ,title: '用户数据表'
        ,cols: [[
          {type: 'checkbox', fixed: 'left'}
          ,{field:'id', title:'ID', width:63, fixed: 'left', unresize: true, sort: true,align:'center'}
          ,{field:'用户', title:'用户', edit: 'text',align:'center'}
          ,{field:'编号', title:'编号', edit: 'text',align:'center'}
          ,{field:'评论', title:'评论', edit: 'text',align:'center'}
          ,{field:'昵称', title:'昵称', edit: 'text',align:'center'}
          ,{field:'头像地址', title:'头像地址', edit: 'text',align:'center'}
          ,{field:'时间', title:'评论时间',align:'center'}
          ,{fixed: 'right', title:'操作', toolbar: '#barDemo',align:'center'}
        ]],
        data:creatData(),
        page: true,
        event: true,
        id:'testreload'
      });
      table.on('tool(test)', function(obj){
        var data = obj.data;
        var tr = obj.tr;
        // console.log(data.id);
        if(obj.event === 'del'){
          layer.confirm('真的要删除么？', function(index){
            obj.del();
            var id = data.id;
            var t =JSON.stringify(data);
             $.ajax({
             type: 'get',
             url: "delete6.php?id="+id,
            data: {'id': id,'content':t}
           })
          setTimeout(function(){
                            window.parent.location.reload();//修改成功后刷新父界面
                        }, 700);
                        layer.msg('删除成功', {
                            icon: 1
                        })
            layer.close(index);
          });
        } else if(obj.event === 'edit'){
          var data = obj.data;
          var id= data.id;
          var t =JSON.stringify(data);
          $.ajax({
             type: 'get',
             url: "cookie.php?id="+id,
            data: {'id': id,'content':t}
           })
          layer.open({
                type: 2,
                title: '用户修改',
                maxmin: true,
                area: ['420px', '400px'],
                shadeClose: false, //点击遮罩关闭
                content :'CollectorAdd-form16.html',
            });
            setFormValue(obj,data);
        }
      }); 
     
      var $=layui.$, active = {
    getCheckData1: function () {	
        var table = layui.table  //获取选中数据
      var checkStatus = table.checkStatus('testreload'),
                    data = checkStatus.data;
                if (data.length > 0) {
                    layer.confirm('确认要删除吗？', function (index) {
                        //对其选中的，通过循环和ajax将每个id都发送到del.php进行删除
                           for (var i = 0; i < data.length; i++) {
                                        var id = data[i]['id'];
                                        var t =JSON.stringify(data[i]);
                                        $.ajax({
                                            type: 'get',
                                            url: "delete6.php?id="+id,
                                            data: {'id': id,'content':t}
                                        })
                                    }
                            $(".layui-table-body .layui-form-checked").parents('tr').remove();
                            setTimeout(function(){
                            window.parent.location.reload();//修改成功后刷新父界面
                        }, 700);
                            layer.msg('删除成功', {
                            icon: 1
                        });
                    });
                } else {
                    layer.msg("请先选择需要删除的用户！");
                }
    },reload: function(){
  var demoReload = $('#demoReload');
      //执行重载
      table.reload('testreload', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,url: 'id6.php'
        ,method:'post'
        ,where: {
          id2:demoReload.val()
        }
      });
      }}
      $('#btn-add').on('click', function () {
            layer.open({
                type: 2,
                title: '信息添加',
                maxmin: true,
                area: ['420px', '400px'],
                shadeClose: false, //点击遮罩关闭
                content: 'CollectorAdd-form6.html',
            });
        });
      $('.demoTable.layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    $('.layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
    });         //注释：layui 批量删除 End
    </script></div> 
    <h2 style="color:white;position:absolute;top:2.5%;left:6.5%;font-size:20px;letter-spacing:4px;font-weight: 600">泥乡塑韵后台管理系统</h2>
    <h3 style="color:white;position:absolute;top:3.5%;left:76%;letter-spacing:2px">Welcome!</h3>
    <h3 style="color:white;position:absolute;top:3.5%;left:90%;letter-spacing:2px">Admin</h3>
    <div class="dropdown">
       <img src="san.png">
       <div class="dropdown-content">
        <a href="https://www.baidu.com/?tn=80035161_1_dg">退出</a>
        <a href="3.login.html" style="text-align: center">切换账号</a>
       </div>
     </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 "><a href="shou.html">首页</a></li>
            <li class=" layui-nav-item "><a href="yindao.html">引导页</a></li>
            <li class=" layui-nav-item "><a href="zhuye.html">主页</a></li>
            <li class="layui-nav-item layui-nav-itemed">
              <a class="" href="javascript:;">打卡</a>
              <dl class="layui-nav-child">
                    <dd><a href="tupian.html">图片管理</a></dd>
                    <dd><a href="liuyan.html" style="background-color:#86c2ef">留言管理</a></dd>
                    <dd><a href="daka.html">状态管理</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item ">
                    <a class="" href="javascript:;">发现</a>
                    <dl class="layui-nav-child">
                          <dd><a href="tupian.html">图片管理</a></dd>
                          <dd><a href="faxian.html">文字管理</a></dd>
                    </dl>
                  </li>
           <li class=" layui-nav-item "><a href="wode.html">我的</a></li>
            <li class="layui-nav-item">
              <a href="javascript:;">设置</a>
              <dl class="layui-nav-child">
                <dd><a href="fangke.html">访客管理</a></dd>
                <dd><a href="yonghu.html">用户管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item ">
          <a href="javascript:;">管理员管理</a>
          <dl class="layui-nav-child">
            <dd><a href="guanliyuan.html">权限管理</a></dd>
            <dd><a href="monitor.html">后台监控</a></dd>
      </dl>
    </li>
      </ul>
        </div>
      </div>
    <script>
    //JavaScript代码区域
    layui.use('element', function(){
      var element = layui.element;
      
    });
    </script>
    </body>
    </html>
yuan2194655945
关注
0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
完整的layui导航栏与数据表格及其批量删除、添加、模糊搜索等功能

<!DOCTYPE html><html><head><meta name="renderer" content="webkit|ie-comp|ie-stand"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewp...
复制链接

扫一扫