html===layui==页面重新加载==要点

最新推荐文章于 2023-10-20 10:21:26 发布

dreamboycs

最新推荐文章于 2023-10-20 10:21:26 发布

阅读量1.8k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/dreamboycs/article/details/117318938

版权

html 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了网页交互的常见操作，包括页面刷新、删除确认、弹框对话、表单元素值获取以及AJAX请求。在编辑页面成功保存后，通过定时器实现页面刷新。删除操作后，使用layer提示并刷新页面。监听表格工具事件，执行删除和编辑功能，同时弹框功能用于确认操作。下拉框和多选框的值被用于动态显示和导出数据的条件判断。点击事件绑定用于处理文件删除和Ajax请求，实现特定功能。

摘要由CSDN通过智能技术生成

1.返回成功后的刷新页面

//edit页面刷新
if(saveResult.code == 200){
     setTimeout(function () {
        closeLayerIframe();
        //列表界面重载
        parent.layui.table.reload('listTable');//listTable列表页面的elem的id
      }, 1000);
 }

//列表页面的删除刷新
if (data.code == 200) {
    layer.msg('删除成功！');
    setTimeout(function () {
       location.reload('listTable');//listTable列表页面的elem的id
    }, 500);
 }

2.监听行工具事件

//监听行工具事件
        table.on('tool(list_table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('您确定要删除此条信息吗？', function (index) {
                    var send_action = "<?=$this->url('admin-role', ['action' => 'delete'])?>/" + data.id;
                    delete_data(send_action, {}, function (data) {
                        if (data.code == 200) {
                            layer.msg('删除成功！');
                            setTimeout(function () {
                                location.reload();
                            }, 500);
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                var topTitle = '编辑角色信息';
                var showUrl = "<?=$this->url('admin-role', ['action' => 'edit'])?>/" + data.id;
                maxOutIframe(showUrl, topTitle);
            }
        });
        //监听行工具栏事件
        table.on('toolbar(list_table)', function (obj) {
            if (obj.event === 'add') {
                var topTitle = '添加角色信息';
                var showUrl = "<?=$this->url('admin-role', ['action' => 'edit'])?>";
                maxOutIframe(showUrl, topTitle);
            }
        });

3.弹框

1.对话框 
layer.confirm('请确认是否导出【'+type_name+'】？', function(index){
       layer.close(index);//关闭弹窗
       window.open(url);//打开新页面跳转
       window.location.href="//www.100sucai.com";//在同当前窗口中打开窗口
    超链接<a href="//www.100sucai.com" title="100素材网" target="_blank">Welcome</a>//打开新页面跳转
 });

4.获取选中的值

//下拉框
<div class="layui-form-item" >
     <label class="layui-form-label">下拉框</label>
     <div class="layui-input-block" >
         <select name="form[stage_id]" id="brickType" lay-filter="brickType">
              <option value="0" >请选择</option>
              <option value="1" >下拉1</option>
              <option value="2" >下拉2</option>

         </select>
     </div>
</div>


//多选框
<div class="layui-form-item" id="flag" style="display: none" >
    <label class="layui-form-label">多选框</label>
    <div class="layui-input-block">
       <input type="checkbox" class="type" name = "form[type][]" value="1">名称1
       <input type="checkbox" class="type" name = "form[type][]" value="2">名称2
     </div>
</div>


<script>
    var val =0;
    layui.use(['form', 'laydate','layer'], function(){
        var form = layui.form;
        
        //获取下拉框值
        form.on('select(brickType)', function(data){
            val=data.value;
            if (val==1) {
                //隐藏页面展示
                $('#flag').css('display','block');
                $('#flag').show();
            }else{
                //让页面隐藏
                $('#flag').css('display','none');
                $('#flag').hide();
            }
        });

        form.render();//必须有这个，不然页面style会乱


        $('#modalSaveBtn').click(function(){

            var downtype = '';
            //获取多选框里被选中的值
            $('input[type=checkbox]:checked').each(function() {
                if(downtype == ''){
                    downtype += $(this).val();
                }else{
                    downtype += ','+$(this).val();
                }

            });

            var timestamp = Date.parse(new Date());
            if (val ==0){
                layer.msg("请选择导出类型");
                return false;
            }
            var type_name = '';
            if (val ==1){
                if (downtype ==''){
                    layer.msg("请选择导出数据类型");
                    return false;
                }
                var url = "<?=$this->url('joining-patient', ['action' => 'xlswriter','item_id'=>$this->item_id])?>/"+timestamp+"/"+val+"/"+downtype;
                type_name = '患者数据';
            } else{
                var url = "<?=$this->url('joining-patient', ['action' => 'xlswriterform','item_id'=>$this->item_id])?>/"+timestamp;
                type_name = '表单变量';
            }
            
            //确认对话框 
            layer.confirm('请确认是否导出【'+type_name+'】？', function(index){
                layer.close(index);
                window.open(url);
            });
            // window.open(url);
            
            定时循环
            //var s = 0;//设置轮询次数
            //var _time;
            //_time = setInterval(function(){
            //    var data = {
            //        code: timestamp
            //    };
            //    $.ajax({
            //        type: 'post',
            //        url: "<?//=$this->url('joining-patient', ['action' => 'loadinfo'])?>//",
            //        data: data,
            //        dataType: 'json',
            //        success: function(response) {
            //            if (response.code == 200) {
            //                layer.close();
            //                clearInterval(_time);
            //                layer.msg("下载成功");
            //            }
            //        },
            //        timeout: 10*10000,// 超时时间
            //        error: function (error) {
            //            // 立即发出请求
            //            layer.msg("服务器错误,请稍后重试");
            //            clearInterval(_time);
            //        }
            //    });
            //    s ++;
            //    if(s > 300){
            //        //最大轮询10次，及45秒后，关闭轮询
            //        clearInterval(_time);
            //    }
            //}, 1000);//3000:每3000秒轮询一次
            return false;

        });



    });
</script>

5.点击发送ajax

 $('.sumPationCountset').click(function () {
        var item_id = "<?=$this->item_id?>";
        var patient_id = "<?=$this->patient_id?>";
        var checktime_id = "<?=$this->id?>";
        var countid = $(this).attr('lay-id');
        $.ajax({
            type: 'post',
            url: "url",
            data: {item_id:item_id,patient_id:patient_id,checktime_id:checktime_id,countid:countid},
            dataType: 'json',
            success: function(res) {
                if(res.code == 200){
                    $('#resultShow'+countid).html(res.result);
                }

            },
            error: function (error) {
                layer.msg('系统出小差了！');
            }

        });
    });

6.绑定点击事件

 $(document).on('click', '.outplan_file', function() {
     var file_name = $(this).parent().children("span").html();
     $('.'+file_name).remove();
     $(this).parent().remove();
});


//自动执行
$(function(){



})