問題1：解決對layui中的表格添加合計的問題
第1步：在Table中render中添加字段： totalRow: true, 開啟總和模式
第2步：在要寫合計的參數中寫上合計： totalRowText: '合計',
第3步：.在要計算數值的字段中添加上： totalRow: true
如果需要多個要計算的字段參數，就把totalRow: true 放在每一個參數中
問題2.跳轉Table表的問題
第1步：在要鏈接的某列中寫上模板：templet: '#usernameTpl'
第2步：在模板中寫上鏈接， a標簽中寫上跳轉的頁面，並傳遞參數：
<script type="text/html" id="usernameTpl">
<a href="vaccineCountTable.html?labelname={{ d.label }}" class="layui-table-link" style="text-decoration: underline;" target="_blank">{{d.unitName}}</a>
</script>
問題3：解決把傳遞過來的參數放在調取的接口參數中，但頁面上要靈活，且點擊其他的條件也是可以調取的參數問題？
解決問題的思路：
1.讓通過鏈接傳來的參數與頁面中的參數共用一個全局變量 ，且把頁面中的獲取到的條件也設成全局變量
2.當通過其他行跳轉的參數點擊跳轉到這個頁面時，調取查詢的函數
3.在函數中，進行判斷 如果 剛進入頁面時，頁面上的條件全局變量為null 或“ ”就用公用的全局參數等於傳來的參數，
反之，如果不為null ，那就說明，條件被人重新選擇了，這時候讓全局變量等於選擇的條件參數，然后放進去到接口
的參數中
第1步：獲取到頁面中的url鏈接並解析截取關鍵字與傳遞的參數：
// 拆分url
function getQueryVariableTrend(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
第2步:把傳遞獲取到的參數也寫成全局變量：
//傳遞過來的數據
var labelnameByTrend ='';
labelnameByTrend = getQueryVariableTrend("labelname");
第3步:判斷頁面中的條件是否為空，如果為條件為null就讓傳遞接口的參數等於傳遞的參數，否則傳遞接口的參數等於選中的條件：
dataLabel：頁面中的條件 labelnameByData：寫入傳遞接口的參數 labelnameByTrend：頁面傳遞過來的參數
if(dataLabel=="") {
labelnameByData = labelnameByTrend
}else {
labelnameByData=dataLabel
}
第4步：放在接口中 如下：
$.ajax(BaseHost + queryStatisticsUrL,{
data:{
label:labelnameByData,
},
問題4：解決已實現跳轉 但頁面跳轉至新的，但不再整個父框架中的問題？
第1步： 在某行上添加鏈接，可進行跳轉，在要添加的鏈接某列上添加：
templet: '#usernameTpl'
第2步： 添加模板 ，在a鏈接中添加事件觸發：lay-event="isWorkEvent"
在前提寫的摸索出來的代碼：<a href="vaccineCountTable.html?labelname={{ d.label }}">{{d.unitName }}</a>
但問題是跳到了一個新的界面
<script type="text/html" id="usernameTpl">
<a class="layui-table-link" style="text-decoration: underline; " target="_blank" lay-event="isWorkEvent">{{d.unitName}}</a>
</script>
第3步，在整體表格的加載中添加代碼如下： 此代碼可在父框架的頁面下直接跳轉
var datalabel=data.label; //要傳遞的參數
console.log("--------"+datalabel)
if (obj.event == 'isWorkEvent') {
var okTab = parent.objOkTab;
var url = "pages/vaccineCountTable.html" +
"?labelname=" + datalabel;
var page = '<div lay-id="" data-url="' + url + '"><cite>疫苗接種統計詳情</cite></div>';
okTab.tabAdd(page);
}
問題5：行程碼中解決的問題？
在上傳的文件中判斷不小於幾k 或者不大於多少的問題：
if(file.size>1024 * 1024 * 4) {
layer.msg('圖片大小不能超過4M');
}
else if(file.size<1024 * 15) {
layer.msg('圖片大小不能小於15K,請上傳100k-200k不超過4M的圖片');
}
問題6：刀壽退賠廠商因為角色權限看不見某列的問題？
解決方法：
在表格中的done：function（）{
// 如果角色為2或3 加工商或加具商的情況下 根據角色判斷然后進行隱藏或顯示
if(empuserType==2|| empuserType==3 ) {
$(".layui-table-box").find("[data-field='filePath']").css("display","none");
} else {
$(".layui-table-box").find("[data-field='filePath']").css("display","block");
}
}
問題7：解決圖片顯示，如果圖片源是null 就不顯示，如果有數據，就顯示的問題？
1，最初的寫法在列表內部寫法：
templet: function(d) {
return '<div><a href="'+d.filePath+'" style="cursor:pointer; color:blue" target="_blank">查看</a></div>';
}
2.要展示數據源是null，不顯示問題：
在列中寫上路徑：
templet: '#filePathButton'
<script type="text/html" id="filePathButton">
{{# if(d.filePath==null){ }}
<p></p>
{{# } else if(d.filePath !==null) { }}
<div><a href="{{d.filePath}}" style="cursor:pointer; color:blue;text-decoration: underline;" target="_blank">查看</a></div>;
{{# } }}
</script>
問題8：在Tble中選擇某一列選擇點擊圖片，顯示當前圖片？
第1步： 在某一列中寫入模板：如下代碼
{
field: 'filePath',
title: '疫苗記錄',
sort: true,
width: '120',
align: 'center',
templet: function(d) {
return '<div onclick="show_img(this)"><a src="'+d.filePath+'" style="cursor:pointer; color:blue" target="_blank">查看</a></div>';
}
},
第2步： 寫上當前的方法 當點擊當前a鏈接的時候進行觸發的方法： // 這一塊的鏈接是線上可點擊的鏈接 直接用方法顯示圖片上
//顯示大圖片
window.show_img = function (t) {
var t = $(t).find("a");
//頁面層
layer.open({
title: "接種疫苗信息",
type: 1,
skin: 'layui-layer-rim', //加上邊框
area: ['80%', '95%'], //寬高
shadeClose: true, //開啟遮罩關閉
end: function (index, layero) {
return false;
},
content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" width="90%" height="90%"/></div>'
});
}
在table中顯示縮略圖的方法：
第一步：
cols: [[ //表頭
{
field: 'brand_img_url',
title: '圖片',
sort: true,
templet: function(d){
return '<div οnclick="show_img(this)" ><img src="'+d.brand_img_url+'" alt="" width="50px" height="50px"></a></div>';
}
}
]]
第二步：
//顯示大圖片
function show_img(t) {
var t = $(t).find("img");
//頁面層
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上邊框
area: ['80%', '80%'], //寬高
shadeClose: true, //開啟遮罩關閉
end: function (index, layero) {
return false;
},
content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
});
}
在table中顯示如果有數據就顯示，沒有數據就不顯示的圖片查看的方法？
第1步： 在當前列寫上模板
{
field: 'filePath',
title: '下載附件',
sort: true,
width: '120',
align: 'center',
fixed: "right",
templet: '#filePathButton'
},
第2步：在模板中寫上如果信息是null 就不填 如果不是null 就把數據放在a鏈接中
<script type="text/html" id="filePathButton">
{{# if(d.filePath==null){ }}
<p></p>
{{# } else if(d.filePath !==null) { }}
<div><a href="{{d.filePath}}" style="cursor:pointer; color:blue;text-decoration: underline;" target="_blank">查看</a></div>;
{{# } }}
</script>
問題9：在Tble中選擇某一列添加千位分隔符？
第一步： 為某列添加模板渲染：
{
field: "totalMoney",
title: "廠商責任賠付金額",
sort: true,
align: "right",
width: '13%',
templet: '#totalMoneyButton',
},
第2步： 在模板中對字段進行函數調用：
<script type="text/html" id="totalMoneyButton">{{number(d.totalMoney)}} </script>
第三步：千位分隔符的函數方法如下：
// 千分位函數調取方法
function number(s, n) {
if (s !== null && s !== undefined && s !== '') {
n = n >= 0 && n <= 20 ? n : 2;
s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
var l = s.split(".")[0].split("").reverse(),
r = s.split(".")[1];
r = r == null ? "" : "." + r;
var t = "";
// console.log(l)
if (l[l.length - 1] === '-') {//負數不需要分隔號,
for (var i = 0; i < l.length; i++) {
if (l[i]==='-') {
t += l[i]+""
continue
}
//不是數組的倒數第二個元素才加"," ["0", "4", "5", "-"]
t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length-1 ? "," : "");
//i + 1 != l.length會變成-,540.00,因為在5時元素位置2+1為3非數組長度
//t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : "");
}
}
else {
for (var i = 0; i < l.length; i++) {
t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : "");
}
}
return (
t.split("").reverse().join("") + r //r 為小數部分
);
}else{
return ''
}
}
問題10：在一個刀壽趨勢echart圖 滿足兩種操作 一種操作，正常進入 網頁 正常調用接口 第二種操作 是郵件操作：根據郵件發送的參數進行調取這個頁面與方法？
第1步：.首先根據條件進行判斷，當頁面一顯示的時候就調用此方法:
window.onload = function () {
getUrlsendData();
}
//獲取發送郵件的連接
function getUrlsendData() {
// 1.默認先獲取自己的鏈接
var url=window.location.href;
// url="http://appservice.casetekcorp.com:8443/tool/KnifeRefundWeb/pages/knifeAchievementRate-Echart.html?buName=BU1&model=&date=2021-06-28&type=week";
//獲取如果連接中沒傳參數，正常運行
2. 判斷此url鏈接中是否帶？ 通過ndexOf 來進行尋找 是否能找到，如果找不到結果為-1 的話 就讓周日的Tab中的塊隱藏着，並且調取接口方法
if(url.indexOf("?")==-1)
{
// 隱藏周月
document.getElementById('WeekTab').style.display = 'none';
getUserData()
}
else{
3.反之 鏈接中有？ 鏈接且帶參數 就把鏈接的url放在函數中進行查分 獲取取到的參數並放在input中 並且根據參數調取函數
//傳參數數據
geturlData(url);
// 隱藏周月
document.getElementById('WeekTab').style.display = 'block';
getUserData();
}
}
function geturlData(url) {
1. 用solit拆分 ？ 分隔 取得？ 之后的參數
let param=url.split("?")[1];
2.用split拆分以& 為分隔的參數與屬性
let arr=param.split("&");
let obj={};
3. 對arr進行遍歷 以等號對每個參數進行獲取
for(let i=0; i<arr.length;i++) {
let arr_param=arr[i].split("=");
obj[arr_param[0]]=arr_param[1];
}
params = obj;
//bu 獲取到bu 的參數
var projuctData=params.buName;
//幾種
var modelData=params.model;
//按周按月
typeData=params.type;
//Bus 把獲取到的參數放在 當前的條件中
projuctDatalist = document.getElementById("Project").value = projuctData;
//機種
modelDatalist = document.getElementById("model").value = modelData;
//日期
warningDate=$("#warningDate").val(params.date);
}
第二步：對echart 進行遍歷 根據機種進行判斷當借口成功調取時
layer.closeAll('loading');
mailData = data.data;
var colors = ['#5470C6', '#91CC75','#8e0fe5', '#EE6666', '#009688'];
var title = ['使用壽命','標准壽命','刀具數量','達成率','成本'];
setData(mailData,title,colors)
對整個echart進行獲取：
function setData(mailData,title,colors) {
for (let i = 0; i < mailData.buName.length; i++) {
for (let index = 0; index < mailData.buData[i].model.length; index++) {
var model = mailData.buData[i].model[index];
var actualLifeList = mailData.buData[i].trendData[index].actualLife;
var standardLifeList = mailData.buData[i].trendData[index].standardLife;
var countList = mailData.buData[i].trendData[index].toolCount;
var rateList = mailData.buData[i].trendData[index].rate;
var moneyList = mailData.buData[i].trendData[index].toolMoney;
var dateList = mailData.buData[i].trendData[index].date;
var trend = document.getElementById('RateList');
var div = document.createElement('div');
var id = 'div' + i + '' +index;
div.style.width = '1300px';
div.style.height = '500px';
div.style.marginTop='27px';
div.style.marginLeft='-66px';
div.id = id;
var h1 = document.createElement('h1');
h1.id = 'h1' + i + '' +index;
h1.style.fontSize = '15px';
h1.style.color = 'red';
h1.style.fontWeight = 'bolder';
h1.style.marginTop = '27px';
h1.innerHTML = 'BU名 : ' + mailData.buName[i] + '</br>機種 : ' + model;
trend.appendChild(h1);
trend.appendChild(div);
var myChart = echarts.init(div);
var option;
option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
legend: {
data: title
},
xAxis: [{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: dateList
}],
yAxis: [{
type: 'value',
name: title[0],
position: 'right',
axisLine: {
show: true,
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: title[1],
position: 'right',
offset: 80,
axisLine: {
show: true,
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: title[2],
position: 'right',
offset: 160,
axisLine: {
show: true,
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: title[3],
position: 'left',
axisLine: {
show: true,
lineStyle: {
color: colors[3]
}
},
axisLabel: {
formatter: '{value}%'
}
},
{
type: 'value',
name: title[4],
position: 'left',
offset: '60',
axisLine: {
show: true,
lineStyle: {
color: colors[4]
}
},
axisLabel: {
formatter: '{value}￥'
}
}
],
series: [{
name: title[0],
type: 'bar',
data: actualLifeList
},
{
name: title[1],
type: 'bar',
yAxisIndex: 1,
data: standardLifeList
},
{
name: title[2],
type: 'bar',
yAxisIndex: 2,
data: countList
},
{
name: title[3],
type: 'line',
yAxisIndex: 3,
data: rateList
},
{
name: title[4],
type: 'line',
yAxisIndex: 4,
data: moneyList
}
]
};
myChart.setOption(option, true);
}
}
}
問題11：在對在一行中把數據傳到編輯的頁面，且如果新增的話，也可以進行選擇單獨的頁面？
1.在廠區中在渲染select中傳過來的數據放在判斷中如下 這是傳過來的數據：
var province_Data= '';
var provinceIdt_Data= '';
(function(window) {
function setData(data) {
if (data) {
var form = layui.form;
cityIdData = data.cityId;
cityName_Data = data.cityName;
var dangerLevel_Data = data.dangerLevel;
province_Data = data.province;
provinceIdt_Data = data.provinceId;
// //選擇 省市
// /中高風險選項
if(dangerLevel_Data==2) {
$("#highRisk").prop("checked",true)
} else if(dangerLevel_Data==1){
$("#middleRisk").prop("checked",true)
} else if(dangerLevel_Data==0) {
$("#noneRisk").prop("checked",true)
}
}
}
2.對廠區進行判斷：
//獲取省
function getProvince() {
var token = window.localStorage.getItem('token');
$.ajax(BaseHost + getProvinceURL, {
data:{
token:token,
cityId:ProvincecityId
},
dataType: 'json',
type: 'post',
timeout: 10000,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success: function(data) {
var data = data.data;
form = layui.form;
var select = $("select[name=Province]");
select.empty();
select.append(new Option("--請選擇--", ""));
var index='';
for (var i = 0; i < data.length; i++) {
select.append(new Option(data[i].cityName, data[i].cityId));
if(province_Data==data[i].cityName) { // 從此處判斷 重中之重 關鍵代碼
$("#Province").find("option[value='"+provinceIdt_Data+"']").attr("selected","selected")
}
getCity(provinceIdt_Data)
}
form.render('select');
},
error: function(xhr, type, errorThrown) {
layer.msg("請求失敗，請重試")
}
});
}
對傳來的單選框進行默認選中： // /中高風險選項
if(dangerLevel_Data==2) {
$("#highRisk").prop("checked",true)
} else if(dangerLevel_Data==1){
$("#middleRisk").prop("checked",true)
} else if(dangerLevel_Data==0) {
$("#noneRisk").prop("checked",true)
}