layui数据表格重载

aaaaaaddddsssss

561人浏览 · 2021-01-13 10:01:36

aaaaaaddddsssss · 2021-01-13 10:01:36 发布

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入layui样式-->
    <link rel="stylesheet" href="layui/css/layui.css" media="all">

    <script src="layui/lay/modules/jquery.js"></script>
    <script src="layui/jquery.js"></script>
  <script src="layui/layui.all.js"></script>
</head>
<script>
     $(function () {

         $("#cha").click(function () {
            var d11= $("#test1").val();
             var d22= $("#test2").val();

             if(d11=="" || d22==""){
                 layer.msg('请不要不选择!');
             }
// window.location.href="/designe/dyfPrescriptions/TDaoExcel?d1="+d11+"&d2="+d22
           $.ajax({
               url:"/designe/dyfPrescriptions/TDaoExcel",
               type:"GET",
               data:{"d1":d1,"d2":d2},
               async:false,
               beforeSend:function () {
                   this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
               },
               success:function(data){
                   console.log(data)
                   if(data.status == 'error'){
                       layer.msg(data.msg,{icon: 5});//失败的表情
                       o.removeClass('layui-btn-disabled');
                       return;
                   }else{
                       layer.msg(data.msg, {
                           icon: 6,//成功的表情
                           time: 1000 //1秒关闭（如果不配置，默认是3秒）
                       }, function(){
                           location.reload();
                       });
                   }
               },
               complete: function () {
                   layer.close(this.layerIndex);
               },


           })


         })




     })
</script>

<body style="text-align: center;">
<br/>
<br/>
<br/>

<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
    <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
</div>
<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
    <input type="text" class="layui-input" id="test2" placeholder="yyyy-MM-dd">
</div>
    <!--<button class="layui-btn" data-type="reload">查询</button>-->
<div class="layui-btn" data-type="reload"  lay-filter="rechar_btn" id="rechar_btn" >查询</div>

               <!--<button class="layui-btn" onClick="location='/designe/dyfPrescriptions/DaoExcel';"><span></span>导成Excel</button>-->


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

</table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <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="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

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

        table.render({
            elem: '#test'
            ,url:'/designe/dyfPrescriptions/queryAll'
            ,method:"get"
            ,parseData:function (res) {
                console.log(res);
                return{
                    "code":0
                    ,"msg":""
                ,"count":100
                    ,"data":res
                }

            }
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
                ,{field:'createTime', title:'createTime', width:120, edit: 'text'}
                ,{field:'isSuffering', title:'isSuffering', width:80, edit: 'text', sort: true}
                ,{field:'amount', title:'amount', width:80, edit: 'text', sort: true}
                ,{field:'sufferingNum', title:'sufferingNum', width:100}
                ,{field:'companyNum', title:'companyNum'}
                ,{field:'remark', title:'remark', width:80, sort: true}

            ]]
            ,page: 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 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });



        var $ = layui.$, active = {
            reload: function(){
                var d11= $("#test1").val();
                var d22= $("#test2").val();
                alert(d11)
                alert(d22)


                //执行重载
                table.reload('test', {
                    beforeSend:function () {
                        this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
                    },
                    url:'/designe/dyfPrescriptions/TDaoExcel',
                    where:{
                        d1:d11,
                        d2:d22
                    }
                    ,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }

                });
            }
        };

        $('#rechar_btn').on('click', function(){
            var type = $(this).data('type');

            if( $("#test1").val()=="" || $('#test2').val()==""){
                layer.msg('查询条件不能为空');
                return false;
            }

            active[type] ? active[type].call(this) : '';
        });

    });



</script>

</body>



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

        //执行一个laydate实例
        laydate.render({
            elem: '#test1', //指定元素
        });
        laydate.render({
            elem: '#test2', //指定元素
        });
    });
</script>
</html>