2021-3-30 工作记录--LayUI-Ajax请求地址及参数+实现页面跳转+viewer.js插件(可以使得点击图片后，图片可以根据鼠标放大和缩小)

一、Ajax请求地址及参数

操作里面的内容：

layui: （用来查找）


源码：

// 操作里的内容-按钮【**去layui官网上查找的步骤：layui-内置模块(左)-数据表格(左)-行工具事件(右)**】
 table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent === 'confirm'){ //确认通过
                    //do somehing
                    $.ajax ({
                        type:'post'
                        ,url: "{:url('successApply')}" // successApply 是请求地址
                        ,data: {id:data.id}
                        ,success:function (res) {
                            var res = JSON.parse(res);
                            if(res.sta == 2000) {
                                layer.msg(res.msg,{icon:1}); // 弹出框
                                $(tr).find(".laytable-cell-1-0-8").html(res.data.status);
                                $(tr).find(".confirm-btn").remove();
                            }else{
                                layer.msg(res.msg,{icon:2});
                            }
                        }
                        ,error:function (err) {
                            layer.msg('网络超时');
                        }
                    })
                } else if(layEvent === 'refuse'){ //驳回申请
                    layer.confirm('确定驳回申请吗？',function (index) {
                        $.ajax ({
                            type:'post'
                            ,url: "{:url('denyApply')}"
                            ,data: {id:data.id}
                            ,success:function (res) {
                                var res = JSON.parse(res);
                                if(res.sta == 2000) {
                                    layer.msg(res.msg,{icon:1}); // 弹出框
                                    $(tr).find(".laytable-cell-1-0-8").html(res.data.status);
                                    $(tr).find(".refuse-btn").remove();
                                }else{
                                    layer.msg(res.msg,{icon:2});
                                }
                            }
                            ,error:function (err) {
                                layer.msg('网络超时');
                            }
                        })
                    });
                } else if(layEvent === 'relieve'){ //解除停课
                    $.ajax ({
                        type:'post'
                        ,url: "{:url('relieve')}"
                        ,data: {id:data.id}
                        ,success:function (res) {
                            var res = JSON.parse(res);
                            if(res.sta == 2000) {
                                layer.msg(res.msg,{icon:1}); // 弹出框
                                $(tr).find(".laytable-cell-1-0-8").html(res.data.status);
                                $(tr).find(".relieve-btn").remove();
                            }else{
                                layer.msg(res.msg,{icon:2});
                            }
                        }
                        ,error:function (err) {
                            layer.msg('网络超时');
                        }
                    })
                }
            });

结果:

点击按钮有相应的变化

二、实现页面跳转

附加内容：

注意区分二者里面的参数

三、Viewer.js插件

1、首先去viewer.js官网，下载该插件，并引入需要的JS、CSS

2、代码

HTML：【交互数据时，用的是PHP写法】

对应代码：

<div class="layui-carousel" id="test1">
   <div carousel-item="">
      {volist name="$data.refundInfo.all_thumb_tmp" id="v" key="k"}
      <img data-original="{$data.refundInfo.all_thumb[$k-1]}" src="{$v}" onclick="show_img(this)" alt="">
      {/volist}
   </div>
</div>

后台传过来滴数据：【注意与上面HTML部分的内容相对应】

JS：

对应代码：

	// viewer.js-点击图片，图片放大
    function show_img(e) {
    	// 下面的ele是对应图片的父级div的DOM节点，这是jquery写法；
    	// 假如用原生js写的话，则可通过document.getElementId('#？？')获取到
        var ele = $(e).parent()[0]; // 获取到img的父级div的DOM节点，这样可以避免点击第一次点击不成功的问题
        const gallery = new Viewer(ele,{
            url: 'data-original', // 注意：这里一定要这样写，前车之鉴

			// 【补充知识】更新viewer里的图片：用viewer的实例调用下update
			// show:function(){
       		//   gallery.update()
        	// }
        })
        
         // 【补充知识】解决问题：viewer.js第一次点击，展示不了大图；解决方法：初始化的时候 调下show()方法
        // gallery.show();

    }

对上面代码中ele的理解：可以打印ele看一下（其实就是img的父级div的那部分html）

3、结果

点击前：

点击后：