https://www.cnblogs.com/Big-Boss/p/9531235.html

/*** 服務商管理初始化*/ var invoice = {id: "invoiceTable", //表格idseItem: null, //選中的條目table: null,layerIndex: -1 }; /*** 初始化表格的列*/ invoice.initColumn = function () {return [{field: 'getSelections', radio: true,visible: true},{title: '工單編號', field: 'workOrderNo', visible: true, align: 'center', valign: 'middle',formatter:function(value,row,index){return "<a href='javascript:void(0)' id=\"order"+value+"\" data=\""+value+"\" onmouseover='showOrderInfo(this)' onmouseout='hideOrderInfo(this)'>"+value+"</a>";}},{title: '工單總價（元）', field: 'workOrderPrice', visible: true, align: 'center', valign: 'middle'},{title: '工單完成日期', field: 'workOrderComDate', visible: true, align: 'center', valign: 'middle'},{title: '服務人員編號', field: 'userSn', visible: true, align: 'center', valign: 'middle',formatter:function(value,row,index){return "<a href='javascript:void(0)' id=\"user"+row.workOrderNo+"\" data=\""+value+"\" data-workOrderNo=\""+row.workOrderNo+"\" onmouseover='showUserInfo(this)' onmouseout='hideUserInfo(this)'>"+value+"</a>";}},{title: '安裝數量', field: 'num', visible: true, align: 'center', valign: 'middle'},{title: '服務人員應結款（元）', field: 'userPrice', visible: true, align: 'center', valign: 'middle'},{title: '合計金額（元）', field: 'userTotalPrice', visible: true, align: 'center', valign: 'middle'},{title: '工單創建時間', field: 'workOrderCreated', visible: true, align: 'center', valign: 'middle'},{title: '創建人', field: 'workOrderCreater', visible: true, align: 'center', valign: 'middle'},{title: '工單核對時間', field: 'workOrderCheckDate', visible: true, align: 'center', valign: 'middle'},{title: '核對人', field: 'workOrderChecker', visible: true, align: 'center', valign: 'middle'},{title: '備注', field: 'remark', visible: true, align: 'center', valign: 'middle',formatter:function(value,row,index){return '<a href="javascript:void(0);" onclick="invoice.agree('+row['id']+')" style="color:blue">查看備注記錄</a>';}},{title: '狀態', field: 'status', visible: true, align: 'center', valign: 'middle',formatter:function(value,row,index){if (value == 0) {return "待對賬";}else if (value == 1) {return "待設置";}else if (value == 2) {return "待上傳憑證";}else if (value == 3) {return "已完成";}}},{title: '操作', field: '', visible: true, align: 'center', valign: 'middle',formatter:function(value,row,index){if (row.status == 0) {return '<a href="javascript:void(0);" onclick="invoice.setDz('+row['id']+')" style="color:blue">對賬完成</a><br><a href="javascript:void(0);" onclick="invoice.refuse('+row['id']+')" style="color:red">添加備注</a>';}else if (row.status == 1) {return '<a href="javascript:void(0);" onclick="invoice.go_setKpf('+row['id']+')" style="color:blue">設置開票方</a><br><a href="javascript:void(0);" onclick="invoice.refuse('+row['id']+')" style="color:red">添加備注</a>'}else if (row.status == 2) {return '<a href="javascript:void(0);" onclick="invoice.go_setPz('+row['id']+')" style="color:blue">上傳發票憑證</a><br><a href="javascript:void(0);" onclick="invoice.refuse('+row['id']+')" style="color:red">添加備注</a>'}else if (row.status == 3) {return '<a href="javascript:void(0);" onclick="invoice.refuse('+row['id']+')" style="color:red">添加備注</a>'}}}]; };var differentindex = 999; function showOrderInfo(e) {var workOrderNo = $(e).attr('data');openOrderMsg(workOrderNo); }function hideOrderInfo(e) {layer.close(differentindex); }function openOrderMsg(workOrderNo) {var html = "";var ajax = new $ax(Feng.ctxPath + "/invoice/getWorkOrderInfo", function(data){if (data == "" || data == null || data == undefined) {html += "工單信息不存在!";}else{var value = data.workOrderStatus;var isBack = data.isBack;var status;if(value==8){if (isBack == null || isBack == 0 || isBack == 1 || isBack == 5) {status = "待指派";}else if (isBack == 3 || isBack == 4) {status = "待服務商接單";}}else if(value==9){status = '待安裝師傅接單';}else if(value==10){status = '待簽到';}else if(value==101){status = '待核銷';}else if(value==102){status = '待回訪';}else if(value==5){status = '已完成';}html += '<table width="500" border="0" cellspacing="0" cellpadding="0">'html += '<tr> 'html += '<td width="auto">客戶信息</td> 'html += '<td width="auto">客戶電話</td> 'html += '<td width="auto">服務地區</td> 'html += '<td width="auto">服務地址</td> 'html += '<td width="auto">產品信息</td> 'html += '<td width="auto">工單狀態</td> 'html += '</tr> 'html += '<tr> 'html += '<td>'+data.buyerName+'</td> 'html += '<td>'+data.phone+'</td> 'html += '<td>'+data.buyerAddress+'</td> 'html += '<td>'+data.buyerDetailAddress+'</td> 'html += '<td>'+data.remark+'</td> 'html += '<td>'+status+'</td> 'html += '</tr> 'html += '</table>'}},function(data){html += "獲取工單信息失敗，請聯系管理員!";});ajax.set("workOrderNo",workOrderNo);ajax.start();differentindex = layer.tips(html, '#order'+workOrderNo, {tips: [3, '#3595CC'],time: 0,area: 'width:auto;height:auto'}); }var differentindex1 = 999; function showUserInfo(e) {var userSn = $(e).attr('data');var workOrderNo = $(e).attr('data-workOrderNo');openUserMsg(workOrderNo,userSn); }function hideUserInfo(e) {layer.close(differentindex1); }function openUserMsg(workOrderNo,userSn) {var html = "";var ajax = new $ax(Feng.ctxPath + "/invoice/getUserInfo", function(data){if (data == "" || data == null || data == undefined) {html += "服務人員信息不存在!";}else{var nameType;if (data.identity == 1 || data.identity == 2) {nameType = "服務商";}else if (data.identity == 3){nameType = "個人技師";}html += '<table width="250" border="0" cellspacing="0" cellpadding="0">'html += '<tr> 'html += '<td width="auto">服務人員類型</td> 'html += '<td width="auto">服務人員</td> 'html += '<td width="auto">服務人員電話</td> 'html += '</tr> 'html += '<tr> 'html += '<td>'+nameType+'</td> 'html += '<td>'+data.name+'</td> 'html += '<td>'+data.mobile+'</td> 'html += '</tr> 'html += '</table>'}},function(data){html += "獲取服務人員信息失敗，請聯系管理員!";});ajax.set("userSn",userSn);ajax.start();differentindex1 = layer.tips(html, '#user'+workOrderNo, {tips: [3, '#3595CC'],time: 0,area: 'width:auto;height:auto'}); }/*** 設置對賬成功*/ invoice.setDz = function (id) {if (id == "" || id == undefined) {Feng.info("請先選中表格中的某一記錄！");return false;}var ajax = new $ax(Feng.ctxPath + "/invoice/setDz", function (data) {Feng.success("對賬成功!");invoice.table.refresh();}, function (data) {Feng.error("對賬失敗!" + data.responseJSON.message + "!");});ajax.set("id",id);ajax.start(); };/*** 設置開票方*/ invoice.go_setKpf = function (id) {if (id == "" || id == undefined) {Feng.info("請先選中表格中的某一記錄！");return false;}var index = layer.open({type: 2,title: '設置開票方',area: ['80%', '80%'], //寬高fix: false, //不固定maxmin: true,content: Feng.ctxPath + '/invoice/go_setKpf/' + id});this.layerIndex = index; };/*** 上傳憑證*/ invoice.go_setPz = function (id) {if (id == "" || id == undefined) {Feng.info("請先選中表格中的某一記錄！");return false;}var index = layer.open({type: 2,title: '上傳憑證',area: ['80%', '80%'], //寬高fix: false, //不固定maxmin: true,content: Feng.ctxPath + '/invoice/go_setPz/' + id});this.layerIndex = index; };copyUrl = function(text){text=text.replace("http","https");var oInput = document.createElement('input');oInput.value = text;document.body.appendChild(oInput);oInput.select(); // 選擇對象document.execCommand("Copy"); // 執行瀏覽器復制命令oInput.className = 'oInput';oInput.style.display='none';Feng.info("復制成功！"); }/*** 檢查是否選中*/ invoice.check = function () {var selected = $('#' + this.id).bootstrapTable('getSelections');if(selected.length == 0){Feng.info("請先選中表格中的某一記錄！");return false;}else{invoice.seItem = selected[0];return true;} };/*** 跳轉到裝修風格添加頁面*/ invoice.go_addInfo = function () {var index = layer.open({type: 2,title: '添加服務商',area: ['100%', '100%'], //寬高fix: false, //不固定maxmin: true,content: Feng.ctxPath + '/service/go_add'});this.layerIndex = index; // window.location.href = Feng.ctxPath + '/service/go_add'; };/*** 工單日志詳情頁*/ invoice.detailLog = function (id) {var index = layer.open({type: 2,title: '提現訂單詳情',area: ['100%', '100%'], //寬高fix: false, //不固定maxmin: true,content: Feng.ctxPath + '/invoice/detailLog/' + id});this.layerIndex = index; // window.location.href = Feng.ctxPath + '/service/go_update/' + id;return true;};/*** 查詢服務商管理列表*/ invoice.search = function () {var queryData = {};queryData['workOrderNo'] = $("#workOrderNo").val()==undefined ? "":$("#workOrderNo").val();queryData['userInfo'] = $("#userInfo").val()==undefined ? "":$("#userInfo").val();queryData['invoiceInfo'] = $("#invoiceInfo").val()==undefined ? "":$("#invoiceInfo").val();queryData['timeType'] = $("#timeType").val()==undefined ? "":$("#timeType").val();queryData['startTime'] = $("#startTime").val()==undefined ? "":$("#startTime").val();queryData['endTime'] = $("#endTime").val()==undefined ? "":$("#endTime").val();invoice.table.refresh({query: queryData}); };$(function () {var defaultColunms = invoice.initColumn();var table = new BSTable(invoice.id, "/invoice/listPage", defaultColunms);table.setPaginationType("server");invoice.table = table.init(); });/*** 提現審核通過*/ invoice.agree = function(id) {Feng.confirm("是否確認通過？",function(){var ajax = new $ax(Feng.ctxPath + "/invoice/agree/" + id, function (data) {Feng.success("通過成功!");invoice.table.refresh();}, function (data) {Feng.error("通過失敗!" + data.responseJSON.message + "!");});ajax.set("id",id);ajax.start();});return true;}/*** 提現審核拒絕*/ invoice.refuse = function(id) {Feng.confirm("是否確認拒絕？",function(){var ajax = new $ax(Feng.ctxPath + "/invoice/refuse/" + id, function (data) {Feng.success("拒絕成功!");invoice.table.refresh();}, function (data) {Feng.error("拒絕失敗!" + data.responseJSON.message + "!");});ajax.set("id",id);ajax.start();});return true;}

總結

以上是生活随笔為你收集整理的使用layer.tips实现鼠标悬浮时触发事件提示消息实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。