公文传输系统代码

gw.html

点击查看代码
<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<head>
  <meta charset="utf-8">
  <title></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/layui/css/layui.css" tppabs="/static/layui/css/layui.css"  media="all">
  <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>

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

<script type="text/html" id="toolbarDemo">

  <div>
    搜索:
    <div class="layui-inline">
      <input class="layui-input"  id="demoReload" placeholder="请输所属人" autocomplete="off">
    </div>

    <button class="layui-btn" data-type="reload" id="search">搜索</button>
  </div>
  <br>
  <!--    <button type="button" class="layui-btn layui-btn-danger" lay-event="batchDels"><i class="layui-icon"></i></button>&lt;!&ndash;删除&ndash;&gt;-->
<!--  <button class="layui-btn" id="add">新增</button>-->
  <button class="layui-btn layui-btn-hei" lay-submit lay-filter="export" id="s"> <i class="iconfont icon-export"></i> 导出word</button>
  <button class="layui-btn" onclick=" window.location.reload();
">刷新</button>


</script>
<script type="text/html" id="barDemo">
<!--  <a class="layui-btn layui-btn-xs" lay-event="edit" id="edit">编辑</a>-->
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="img">
  <!-- 这里的 checked 的状态只是演示 -->
  <img src="https://www.duoxiangpai.com/wp-content/uploads/tupianbd/2/253/3133036867/2807880355.jpg"/>
  <!--    <img src="/static/uploadFile/temps/{{d.img}}"/>-->
  <!--    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 10003 ? 'checked' : '' }}>-->
</script>
<script type="text/html" id="img2">
  <!-- 这里的 checked 的状态只是演示 -->
  <img src="/static/uploadFile/temps/{{d.uimg}}"/>
  <!--    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 10003 ? 'checked' : '' }}>-->
</script>
<script src="/static/layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 -->
<script>
  form.on('submit(export)', function (data) {
    //     var postData = {
    //         其他条件: data.field.其他,
    //         page:1,
    //         limit: 20000
    // } //默认最多导出20000条,自己定,也可不设置分页数量,这样就需要后台添加一个新的查询方法或者写个动态sql

    // $.post('/admin/userList', postData, function(res) {
    $.post('/admin/userList', function(res) {
      if(res.code==0){
        table.exportFile('s', res.data, 'docx'); //表名 数据  格式
      }else{
        layer.msg(res.msg, {icon: 5});
      }
    })
  });
</script>
<script>
  var crewJSONData;
  layui.use('table', function(){
    var table = layui.table;

    //温馨提示:默认由前端自动合计当前行数据。从 layui 2.5.6 开始: 若接口直接返回了合计行数据,则优先读取接口合计行数据。
    //详见:https://www.layui.com/doc/modules/table.html#totalRow
    table.render({ //相当于加载
      elem: '#test'
      ,url:'/admin/gwList'/*tpa=https://www.layuiweb.com/test/table/demo1.json*/
      ,toolbar: '#toolbarDemo'
      ,title: '图片管理'
      ,totalRow: true
      ,cols: [
        [
          {type: 'checkbox', fixed: 'left'}
          ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
          ,{field:'uname', title:'所属人', width:120, edit: 'text'}
          ,{field:'uid', title:'所属人id', width:120, edit: 'text'}
          ,{field:'file', title:'文件', width:150, edit: 'text', templet: function(res){
            return '<a href="/static/uploadFile/temps/'+res.file+'" download="'+res.file+'">'+ res.file +'</a>'
          }}
          ,{field:'state', title:'状态', width:120, edit: 'text'}
          ,{field:'type', title:'类型', width:120, edit: 'text'}
          ,{field:'key', title:'密钥', width:120, edit: 'text'}
          ,{field:'date', title:'创建日期', width:120, edit: 'text'}
          ,{field:'uname2', title:'发送人', width:120, edit: 'text'}
          ,{field:'uid2', title:'发送人id', width:120, edit: 'text'}
          // ,{field:'balance', title:'余额', width:120, edit: 'text'}
          // ,{field:'dz', title:'收货地', width:120, edit: 'text'}



          // ,{field:'img', title:'图片', width:120,templet: '#img', edit: 'text'}//传图片首先把templet里面选中body里的某个id
          /* ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
                   return '<em>'+ res.email +'</em>'
               }}
           ,{field:'experience', title:'积分', width:80, sort: true, totalRow: true}
           ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
           ,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
           ,{field:'sign', title:'签名'}
           ,{field:'city', title:'城市', width:100}
           ,{field:'ip', title:'IP', width:120}
           ,{field:'joinTime', title:'加入时间', width:120}
           ,{field:'ss', title:'ss', width:120}*/
          ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
        ]
      ]
      ,page: true //是否显示分页
      ,limits: [4,10,15] //每页条数选项
      ,limit: 4 //每页默认显示的条数
      ,parseData:function (res){
        crewJSONData=res.rows;
        console.log(res+"  "+JSON.toString(res)+" 2")
      }
    });
    //以下是搜索框进行监测
    $('#search').click(function () {
      var Nick = $('#demoReload').val();//获取输入框内容

      // var date = $('#time').val();
      // if($('#demoReload').val()==""){
      //     layer.msg('查询内容不能为空');
      //     return false;
      // }
      table.reload('test', {  //table.reload重载数据表格的语法,在文档中有
        url: '/admin/gw_search'
        // ,methods:"post"
        ,request: {
          pageName: 'page'  //页码的参数名称,默认:page
          ,limitName: 'limit'  //每页数据量的参数名,默认:limit
        }
        ,where: {
          // 向search_label传送数据
          // start:  date,
          name:Nick,


        }
        ,page: {
          curr: 1
        }
      });
      return false;
    })


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

    //点击添加按钮弹窗
    $("#add").click(function () {
      layui.use('layer', function () {
        layer.open({
          title: '添加信息',
          type: 2,
          content: '/admin/toGwAdd',
          area: ['800px', '400px'],
          maxmin: true
        })
      })
    })
    var exportOptions = {
      type: 'png', // 指定导出图片的格式,可选值:png, jpg, bmp, gif
      fileName: 'example.png', // 自定义导出的文件名
      quality: 0.8, // 指定导出图片的质量,可选值:0~1 之间的小数
      bgcolor: '#ffffff', // 指定导出图片的背景色
      width: 800, // 指定导出图片的宽度
      height: 600 // 指定导出图片的高度
    };
    $("#s").click(function (){
      console.log(crewJSONData)
      table.exportFile("test",crewJSONData,"docx",exportOptions)
      // $.post('/admin/userList', function(res) {
      //     console.log(res.data)
      //  table.exportFile("test",res.data,"docx")  //表格id,加载的数据,导出格式,
      // })

    })





    //工具栏事件
    table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'getCheckData':
          var data = checkStatus.data;
          layer.alert(JSON.stringify(data));
          break;
        case 'getCheckLength':
          var data = checkStatus.data;
          layer.msg('选中了:'+ data.length + ' 个');
          break;
        case 'isAll':
          layer.msg(checkStatus.isAll ? '全选': '未全选')
          break;
        case 'batchDels':  //批量删除
          var data = checkStatus.data;
          if(checkStatus.data.length==0){
            parent.layer.alert('请先选择要删除的数据行!');
            return ;
          }
          <!--将选中的拼接成字符串-->
          var nums = "";
          for(var i=0;i<checkStatus.data.length;i++){
            nums += checkStatus.data[i].id+",";
          }
          $.ajax({
            url:'/admin/batchDeleteTask',
            data:{'nums':nums},
            type:'post',
            success:function(data){
              if(data=="success"){
                layer.alert("批量删除成功");
                setTimeout('window.location.reload()',3000);
              }else{
                layer.alert("批量删除失败");
                setTimeout('window.location.reload()',1000);
              }
            }
          });
          break;
      };
    });

    //监听工具条
    table.on('tool(test)', function(obj){
      var data = obj.data;




      if(obj.event === 'del'){
        layer.confirm('真的删除行么', function(index){
          // obj.del();
          $.ajax({
            type: 'post',
            url: '/admin/deleteGw',//删除的路径
            async:true,
            dataType:"json",
            data:{
              id:data.id, //传一个id过去
            },
            success: function (data) {
              layer.alert('删除成功', {icon: 6, title: '提示', time: 1500})
              setTimeout(function () {
                window.location.reload();
                // window.location.href="index.html";
              }, 1500);
            },
            error: function () {
              window.location.reload();
              layer.alert('请求失败,系统错误', {icon: 7, title: '提示', time: 1000})
            }

          })
          layer.close(index);
        });
      }
      else if(obj.event === 'edit'){
        json = JSON.stringify(data);
        layui.use('layer', function () {
          layer.open({
            title: '修改信息',
            type: 2,
            content: '/admin/toGwEdit',
            area: ['800px', '400px'],
            maxmin: true
          })
        })
      }
    });
  });
</script>
<script>

</script>
<!--<script>
    function req(){
        $.get("/list",res=>{
    $("#test").text()
        console.log(res)
        })
    }

    window.setInterval('req()',1000)


</script>-->
</body>
</html>

index.html

点击查看代码
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
<!--    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">-->
    <title>后台管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body class="layui-layout-body">

<!-- 顶部区域 -->
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">管理后台</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
<!--                <a href="javascript:;">-->
<!--                    <img src="./images/user3.png" class="layui-nav-img">-->
<!--                    小米-->
<!--                </a>-->
                <dl class="layui-nav-child">

                    <dd>
                        <!--TODO -->
                        <!--需要修改为自己项目的部分:-->
                        <!--1、属性data-url(需要在右边选项卡中打开的页面的路径)  -->
                        <!--2、属性data-title(选项卡标题)-->
                        <!--3、属性data-id必须唯一,tab选项卡根据这个值进行切换-->

                        <a href="#" data-url="profile" data-title="个人资料" data-id="44" class="site-demo-active"
                           data-type="tabAdd">
                            个人资料
                        </a>
                    </dd>

                    <dd>
                        <!--TODO -->
                        <!--需要修改为自己项目的部分:-->
                        <!--1、属性data-url(需要在右边选项卡中打开的页面的路径)  -->
                        <!--2、属性data-title(选项卡标题)-->
                        <!--3、属性data-id必须唯一,tab选项卡根据这个值进行切换-->

                        <a href="#" data-url="password" data-title="修改密码" data-id="55" class="site-demo-active" data-type="tabAdd">
                            修改密码
                        </a>
                    </dd>

                </dl>
            </li>
            <li class="layui-nav-item">
                <!--TODO -->
                <!--可能需要修改路径-->
                <a href="/logout">退出</a>
            </li>
        </ul>
    </div>


    <!-- 左侧导航栏 -->
    <div class="layui-tab  layui-side layui-tab-card site-demo-button" >
        <ul class="layui-nav layui-side layui-nav-tree layui-nav-side" >

            <li class="layui-nav-item layui-nav-itemed" >

                <a href="javascript:;">用户</a>

                <dl class="layui-nav-child">

                    <dd>

                        <a href="#" data-url="/admin/user" data-title="用户" data-id="1" id="default-tab" class="site-demo-active"
                           data-type="tabAdd">
                            用户
                        </a>
                    </dd>



                </dl>

            </li>


            <li class="layui-nav-item layui-nav-itemed" >

                <a href="javascript:;">公文管理</a>

                <dl class="layui-nav-child">


                    <dd>

                        <a href="#" data-url="/admin/gw" data-title="公文列表" data-id="7"  class="site-demo-active"
                           data-type="tabAdd">
                            公文列表
                        </a>
                    </dd>


                </dl>
            </li>

<!--  <li class="layui-nav-item layui-nav-itemed" >-->

<!--                <a href="javascript:;">统计</a>-->

<!--                <dl class="layui-nav-child">-->

<!--                    <dd>-->

<!--                        <a href="#" data-url="/admin/tj" data-title=" 统计" data-id="8"  class="site-demo-active"-->
<!--                           data-type="tabAdd">-->
<!--                         统计列表-->
<!--                        </a>-->
<!--                    </dd>-->



<!--                </dl>-->
<!--            </li>-->




        </ul>


    </div>


    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-tab" lay-filter="demo" lay-allowClose="true">
            <!--tab页标题-->
            <ul class="layui-tab-title">
            </ul>

            <!--tab页标题上右键,出现下面的 关闭当前和关闭所有的选项-->
            <ul class="rightMenu" style="display: none;position: absolute;">
                <li data-type="closeThis" class="layui-bg-cyan">关闭当前</li>

                <li data-type="closeAll" class="layui-bg-cyan">关闭所有</li>
            </ul>

            <!--tab页主体内容区域-->
            <div class="layui-tab-content">

            </div>

        </div>
    </div>


    <div class="layui-footer">
        <!-- 底部固定区域 -->

    </div>

</div>
<!--jQuery在线引用地址(全)-->
<!--来源:https://www.bootcdn.cn/jquery/-->
<!--版本:3.3.1-->

<!--https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js-->

<!--BootstrapCDN-->
<!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">-->
<!--JS, Popper.js, and jQuery-->
<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>-->
<!--<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>-->
<!--<script src="http-->

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="/static/layui/layui.js"></script>

<script>

    layui.use(['element','layer'], function () {
        var $ = layui.jquery;
        var element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块

        //触发事件
        var active = {
            // 在这里给active绑定几项事件,后面可通过active调用这些事件
            tabAdd: function (url, id, name) {

                // 新增一个Tab项 传入三个参数,分别对应其标题,tab页面的地址,还有一个规定的id,是标签中data-id的属性值
                // 关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                element.tabAdd('demo', {
                    title: name,
                    // TODO
                    // 这里的选项卡页面路径:  src="' + url + '.html"  ,可能需要根据自己项目实际的后缀名修改
                    // content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '.html" style="width:100%;height:99%;"></iframe>',
                    content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>',
                    id: id // 规定好的id
                })
                CustomRightClick(id); // 自定义函数,给tab绑定右击事件
                FrameWH();  // 自定义函数,计算iframe层的大小
            },
            tabChange: function (id) {
                // 切换到指定Tab项
                element.tabChange('demo', id); // 根据传入的id传入到指定的tab项
            },
            tabDelete: function (id) {
                element.tabDelete("demo", id);// 删除
            }
            , tabDeleteAll: function (ids) {// 删除所有
                $.each(ids, function (i, item) {
                    element.tabDelete("demo", item); //ids是一个数组,里面存放了多个id,调用tabDelete方法分别删除
                })
            }

        };


        // 当点击有site-demo-active属性的标签时,即左侧菜单栏中内容 ,触发点击事件
        $('.site-demo-active').on('click', function () {
            var dataid = $(this);

            // 这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目,即已经打开的tab项数目
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                // 如果比零小,则直接打开新的tab项
                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
            } else {
                // 否则判断该tab项是否已经存在

                var isData = false; //初始化一个标志,为false说明未打开该tab项 为true则说明已有
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到,则说明该tab项已经打开
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                    }
                })
                if (isData == false) {
                    //标志为false 新增一个tab项
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                }
            }
            // 最后不管是否新增tab,最后都转到要打开的选项页面上
            active.tabChange(dataid.attr("data-id"));
        });


        function CustomRightClick(id) {

            //取消右键  rightMenu属性开始是隐藏的 ,当右击的时候显示,左击的时候隐藏
            $('.layui-tab-title li').on('contextmenu', function () {
                return false;
            })

            $('.layui-tab-title,.layui-tab-title li').click(function () {
                $('.rightMenu').hide();
            });

            //桌面点击右击
            $('.layui-tab-title li').on('contextmenu', function (e) {
                var popupmenu = $(".rightMenu");
                popupmenu.find("li").attr("data-id", id); //在右键菜单中的标签绑定id属性

                //判断右侧菜单的位置
                l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
                t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
                popupmenu.css({left: l, top: t}).show(); //进行绝对定位
                //alert("右键菜单")
                return false;
            });
        }

        $(".rightMenu li").click(function () {

            //右键菜单中的选项被点击之后,判断type的类型,决定关闭所有还是关闭当前。
            if ($(this).attr("data-type") == "closeThis") {
                //如果关闭当前,即根据显示右键菜单时所绑定的id,执行tabDelete
                active.tabDelete($(this).attr("data-id"))
            } else if ($(this).attr("data-type") == "closeAll") {
                var tabtitle = $(".layui-tab-title li");
                var ids = new Array();
                $.each(tabtitle, function (i) {
                    ids[i] = $(this).attr("lay-id");
                })
                //如果关闭所有 ,即将所有的lay-id放进数组,执行tabDeleteAll
                active.tabDeleteAll(ids);
            }

            $('.rightMenu').hide(); //最后再隐藏右键菜单
        })

        // 计算frame高度
        function FrameWH() {
            var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10;
            $("iframe").css("height", h + "px");
        }


        $(window).resize(function () {
            FrameWH();
        })


        var layer = layui.layer;
        layer.ready(function(){
            // layer.msg('您已进入页面了!');
            // 触发点击事件,这样就可以设置默认显示的选项卡页面
            // TODO
            // 可能需要修改的地方,标签id值
            $("#default-tab").trigger( "click" );
        });

    });

</script>


</body>
</html>

user.html

点击查看代码
<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<head>
    <meta charset="utf-8">
    <title></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/layui/css/layui.css" tppabs="/static/layui/css/layui.css"  media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>

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

<script type="text/html" id="toolbarDemo">

    <div>
        搜索:
        <div class="layui-inline">
            <input class="layui-input"  id="demoReload" placeholder="请输入用户名" autocomplete="off">
        </div>

        <button class="layui-btn" data-type="reload" id="search">搜索</button>
    </div>
<!--    <button type="button" class="layui-btn layui-btn-danger" lay-event="batchDels"><i class="layui-icon"></i></button>&lt;!&ndash;删除&ndash;&gt;-->
    <button class="layui-btn" id="add">新增</button>
    <button class="layui-btn" onclick=" window.location.reload();
">刷新</button>


</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" id="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="img">
    <!-- 这里的 checked 的状态只是演示 -->
    <img src="/static/uploadFile/temps/{{d.img}}"/>
    <!--    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 10003 ? 'checked' : '' }}>-->
</script>
<script type="text/html" id="img2">
    <!-- 这里的 checked 的状态只是演示 -->
    <img src="/static/uploadFile/temps/{{d.uimg}}"/>
    <!--    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 10003 ? 'checked' : '' }}>-->
</script>
<script src="/static/layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 -->

<script>
    layui.use('table', function(){
        var table = layui.table;

        //温馨提示:默认由前端自动合计当前行数据。从 layui 2.5.6 开始: 若接口直接返回了合计行数据,则优先读取接口合计行数据。
        //详见:https://www.layui.com/doc/modules/table.html#totalRow
        table.render({ //相当于加载
            elem: '#test'
            ,url:'/admin/userList'/*tpa=https://www.layuiweb.com/test/table/demo1.json*/
            ,toolbar: '#toolbarDemo'
            ,title: '图片管理'
            ,totalRow: true
            ,cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                    ,{field:'name', title:'用户', width:120, edit: 'text'}
                    ,{field:'pwd', title:'密码', width:120, edit: 'text'}
                    ,{field:'perms', title:'权限', width:120, edit: 'text'}

                    // ,{field:'dz', title:'收货地', width:120, edit: 'text'}



                    // ,{field:'img', title:'图片', width:120,templet: '#img', edit: 'text'}//传图片首先把templet里面选中body里的某个id
                    /* ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
                             return '<em>'+ res.email +'</em>'
                         }}
                     ,{field:'experience', title:'积分', width:80, sort: true, totalRow: true}
                     ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
                     ,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
                     ,{field:'sign', title:'签名'}
                     ,{field:'city', title:'城市', width:100}
                     ,{field:'ip', title:'IP', width:120}
                     ,{field:'joinTime', title:'加入时间', width:120}
                     ,{field:'ss', title:'ss', width:120}*/
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]
            ]
            ,page: true //是否显示分页
            ,limits: [4,10,15] //每页条数选项
            ,limit: 4 //每页默认显示的条数
        });
        //以下是搜索框进行监测
        $('#search').click(function () {
            var Nick = $('#demoReload').val();//获取输入框内容

            // var date = $('#time').val();
            // if($('#demoReload').val()==""){
            //     layer.msg('查询内容不能为空');
            //     return false;
            // }
            table.reload('test', {  //table.reload重载数据表格的语法,在文档中有
                url: '/admin/user_search'
                // ,methods:"post"
                ,request: {
                    pageName: 'page'  //页码的参数名称,默认:page
                    ,limitName: 'limit'  //每页数据量的参数名,默认:limit
                }
                ,where: {
                    // 向search_label传送数据
                    // start:  date,
                    name:Nick,


                }
                ,page: {
                    curr: 1
                }
            });
            return false;
        })


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

        //点击添加按钮弹窗
        $("#add").click(function () {
            layui.use('layer', function () {
                layer.open({
                    title: '添加信息',
                    type: 2,
                    content: '/admin/toUserAdd',
                    area: ['800px', '400px'],
                    maxmin: true
                })
            })
        })





        //工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了:'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选')
                    break;
                case 'batchDels':  //批量删除
                    var data = checkStatus.data;
                    if(checkStatus.data.length==0){
                        parent.layer.alert('请先选择要删除的数据行!');
                        return ;
                    }
                    <!--将选中的拼接成字符串-->
                    var nums = "";
                    for(var i=0;i<checkStatus.data.length;i++){
                        nums += checkStatus.data[i].id+",";
                    }
                    $.ajax({
                        url:'/admin/batchDeleteTask',
                        data:{'nums':nums},
                        type:'post',
                        success:function(data){
                            if(data=="success"){
                                layer.alert("批量删除成功");
                                setTimeout('window.location.reload()',3000);
                            }else{
                                layer.alert("批量删除失败");
                                setTimeout('window.location.reload()',1000);
                            }
                        }
                    });
                    break;
            };
        });

        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;




            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    // obj.del();
                    $.ajax({
                        type: 'post',
                        url: '/admin/deleteUser',//删除的路径
                        async:true,
                        dataType:"json",
                        data:{
                            id:data.id, //传一个id过去
                        },
                        success: function (data) {
                            layer.alert('删除成功', {icon: 6, title: '提示', time: 1500})
                            setTimeout(function () {
                                window.location.reload();
                                // window.location.href="index.html";
                            }, 1500);
                        },
                        error: function () {
                            window.location.reload();
                            layer.alert('请求失败,系统错误', {icon: 7, title: '提示', time: 1000})
                        }

                    })
                    layer.close(index);
                });
            }
            else if(obj.event === 'edit'){
                json = JSON.stringify(data);
                layui.use('layer', function () {
                    layer.open({
                        title: '修改信息',
                        type: 2,
                        content: '/admin/toUserEdit',
                        area: ['800px', '400px'],
                        maxmin: true
                    })
                })
            }
        });
    });
</script>
<script>

</script>
<!--<script>
    function req(){
        $.get("/list",res=>{
    $("#test").text()
        console.log(res)
        })
    }

    window.setInterval('req()',1000)


</script>-->
</body>
</html>
posted @ 2023-12-17 20:53  20211324李城斌  阅读(28)  评论(0编辑  收藏  举报