layui 使用技巧

单选框取值

var value = $('#contentDiv input[name="jumpType"]:checked ').val();
理解 layui.each(list, function)
可以把这个函数理解为简单的 foreach，对 list 中的每个元素调用 function

如下拉框取值时：
done: function (elem, data) {
layui.each(data.data, function (index, item) {
$("#contentCarouseJumpAppUuid").val(item.appUuid);
$("#contentCarouseJumpAppName").val(item.appName);
})
}
弹窗页获取数据是从前一页面调用 admin.open 时 set 到 adminData 变量中了。在弹窗也通过如下方式获取值。

var data = admin.getLayerData('#sceneTypeForm');
form.val('sceneTypeForm', data);
链接跳转打开新页面，传递参数用的是 / 而不是 ? ，最后会拼接一个 .html，所以是这样写：

//子项列表
function typeSub(data) {
index.openNewTab({
name: '子项管理',
url: '#/scene/sceneTypeSub/list/typeId=' + data.id
})
}
下拉框取值
- html
<label class="layui-form-label w-auto">所属类型：</label>
<select name="typeName" id="typeName" lay-filter="typeName" class="layui-input"> <option value=""></option> </select>
- 模板：
<script id="sceneTypeSubTpl" type="text/html"> {{# layui.each(d, function(index, item){ }} <option value="{{ item.code }}" >{{ item.name }}</option> {{# }); }} </script>
- 取值设值并渲染：
  //初始化字典数据，第一个参数是一个获取数据的方法，可以进去复制里面的 ajax 方法自己写一个，然后调用这个方法就可以
  laytpl(sceneTypeSubTpl.innerHTML).render(krt.getDicList("scene_state_type", 0), function (html) {
  $('#typeName').append(html);
  });
  form.render('select');
- 监听事件
  form.on('select(typeName)', function(data){ // 对应的是 lay-filter
  var name = $(data.elem).find("option:selected").html();
  $("#typeCode").val(name);
  });
状态列样式为切换标签形式
- 模板：
<script type="text/html" id="tableState"> </script>
- table 内列的定义：
  {field: 'state', title: '状态', templet: '#tableState'},
- 切换时调用方法
  // 修改子项状态
  form.on('switch(ckState)', function (obj) {
  layer.load(2);
  admin.req('scene/v1/sceneTypeSub/state', {
  id: obj.elem.value,
  state: obj.elem.checked ? 1 : 0
  }, function (res) {
  layer.closeAll('loading');
  if (res.code === 200) {
  layer.msg(res.msg, {icon: 1});
  } else {
  layer.msg(res.msg, {icon: 2});
  $(obj.elem).prop('checked', !obj.elem.checked);
  form.render('checkbox');
  }
  }, 'get');
  });
表单校验
对普通的校验是在标签的 lay-verify 属性中填写的，
支持 required（必填项）、phone（手机号）、email（邮箱）、url（网址）、number（数字）、date（日期）、identity（身份证）、自定义值

对于自定义值，可以像如下代码的方式添加规则：

// 添加表单验证方法
form.verify({
	clientId: function (value, item) { // value 表示表单的值，item 表示表单的 DOM 对象
		var msg;
		admin.ajax({
			type: "get",
			url: config.base_server + 'auth/v1/client/checkClientId',
			async: false,
			data: {"clientId": value},
			success: function (res) {
				if (res.code === 200 && res.data === false) {
					msg = "应用已存在";
				}
			}
		});
		return msg;
	}
});

文件下载

文件下载用 window.open 的方式，打开一个页面，页面返回内容是直接写入 response 的 outputStream 中。
response.setHeader("Content-Disposition", "attachment;filename=" + zipFileName);

// 批量下载二维码
form.on('submit(downloadBatch)', function (data) {
data.field.typeId = typeId;
console.log(data)
window.open(config.base_server + 'scene/v1/sceneQrcode/downloadBatch'+getJSONUrlParam(data.field));
});

// 将 json 对象转换为 URL 的参数
function getJSONUrlParam(data) {
let param ='';
Object.keys(data).forEach(function (value, index, array) {
let pp = value+"="+encodeURIComponent(data[value])+"&";
param += pp;
});
if (param != ''){
param = "?"+param.substring(0,param.length-1);
}
return param;
}
获取接口数据方法

// 填充下拉框方法
function fillOption(url, params) {
var list = {};
var paramStr = '';
if (params != null) {
paramStr = getJSONUrlParam(params);
}
admin.ajax({
type: "get",
url: config.base_server + url + paramStr,
async: false,
data: {},
success: function (res) {
if (res.code === 200) {
list = res.data;
} else {
layer.msg(res.msg, {icon: 2});
}
}
});
return list;
}

// 将 json 对象转换为 URL 的参数
function getJSONUrlParam(data) {
let param ='';
Object.keys(data).forEach(function (value, index, array) {
let pp = value+"="+encodeURIComponent(data[value])+"&";
param += pp;
});
if (param != ''){
param = "?"+param.substring(0,param.length-1);
}
return param;
}
展示二维码

弹窗模板
<script type="text/html" id="tableModelSceneQrcode">

<button class="layui-btn-sm layui-btn-primary" type="button" ew-event="closeDialog">关闭</button> <button class="layui-btn-sm layui-btn" type="button" lay-filter="sceneQrcode-download" id="sceneQrcodeDownload">下载二维码</button>

</script>
// 查看二维码（后台返回）调用后台下载二维码的方法即可
function see(data) {
var html = ""
admin.open({
type: 1,
title: data.name + '的二维码',
area: ['300px', '450px'],
content: $('#tableModelSceneQrcode').html(),
success: function (layero, dIndex) {
$("#sceneQrcodeShowDiv").html(html);
$("#sceneQrcodeTitleDiv").html('二维码名称：'+data.name);
$("#codeName").val(data.name);
$("#codeId").val(data.id);
}
});
}

// 查看二维码（前端生成）
function see(data) {
admin.open({
type: 1,
title: data.name + '的二维码',
area: ['300px', '450px'],
content: $('#tableModelSceneQrcode').html(),
success: function (layero, dIndex) {
// 二维码初始化
var cardQrcode = new QRCode(document.getElementById("sceneQrcodeShowDiv"), {
text: data.id,
width: 256, // 宽度
height: 256, // 高度
colorDark: "#000000", // 颜色
colorLight: "#ffffff", // 背景颜色
correctLevel: QRCode.CorrectLevel.H
});
$("#sceneQrcodeTitleDiv").html('二维码名称：'+data.name);
$("#codeName").val(data.name);
$("#codeId").val(data.id);
}
});
}

// 点击二维码下载图片(前端生成)
function download(name, id){
var data = $("canvas").slice(-1)[0].toDataURL().replace("image/png", "image/octet-stream;");//获取二维码值，并修改响应头部。　　　
var filename= name + '.png';//保存的图片名称和格式，canvas默认使用的png格式。这个格式效果最好。
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
}

// 点击二维码下载图片(后台返回)
function download(name, id){
window.open(config.base_server + 'scene/v1/sceneQrcode/downloadQrCode?code=' + id + '&name=' + name);
}

日期格式化

/**
- =====================================
- ```
          日期相关方法
```
- =====================================
  /
  ;(function($)
  {
  $.extend(
  {
  /*
  * 将日期格式化成指定格式的字符串
  * @param date 要格式化的日期，不传时默认当前时间，也可以是一个时间戳
  * @param fmt 目标字符串格式，支持的字符有：y,M,d,q,w,H,h,m,S，默认：yyyy-MM-dd HH:mm:ss
  * @returns 返回格式化后的日期字符串
  /
  formatDate: function(date, fmt)
  {
  date = date == undefined ? new Date() : date;
  date = typeof date == 'number' ? new Date(date) : date;
  fmt = fmt || 'yyyy-MM-dd HH:mm:ss';
  var obj =
  {
  'y': date.getFullYear(), // 年份，注意必须用getFullYear
  'M': date.getMonth() + 1, // 月份，注意是从0-11
  'd': date.getDate(), // 日期
  'q': Math.floor((date.getMonth() + 3) / 3), // 季度
  'w': date.getDay(), // 星期，注意是0-6
  'H': date.getHours(), // 24小时制
  'h': date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, // 12小时制
  'm': date.getMinutes(), // 分钟
  's': date.getSeconds(), // 秒
  'S': date.getMilliseconds() // 毫秒
  };
  var week = ['天', '一', '二', '三', '四', '五', '六'];
  for(var i in obj)
  {
  fmt = fmt.replace(new RegExp(i+'+', 'g'), function(m)
  {
  var val = obj[i] + '';
  if(i == 'w') return (m.length > 2 ? '星期' : '周') + week[val];
  for(var j = 0, len = val.length; j < m.length - len; j++) val = '0' + val;
  return m.length == 1 ? val : val.substring(val.length - m.length);
  });
  }
  return fmt;
  },
  /*
  * 将字符串解析成日期
  * @param str 输入的日期字符串，如'2014-09-13'
  * @param fmt 字符串格式，默认'yyyy-MM-dd'，支持如下：y、M、d、H、m、s、S，不支持w和q
  * @returns 解析后的Date类型日期
  /
  parseDate: function(str, fmt)
  {
  fmt = fmt || 'yyyy-MM-dd';
  var obj = {y: 0, M: 1, d: 0, H: 0, h: 0, m: 0, s: 0, S: 0};
  fmt.replace(/([^yMdHmsS]?)(([yMdHmsS])\3*)([^yMdHmsS]?)/g, function(m, $1, $2, $3, $4, idx, old)
  {
  str = str.replace(new RegExp($1+'(\d{'+$2.length+'})'+$4), function(_m, $1)
  {
  obj[$3] = parseInt(.getMonthDays();
  * 方式二： $.getMonthDays(new Date()); * 方式三：$ .getMonthDays(2013, 12);
  /
  getMonthDays: function(date, month)
  {
  var y, m;
  if(date == undefined) date = new Date();
  if(date instanceof Date)
  {
  y = date.getFullYear();
  m = date.getMonth();
  }
  else if(typeof date == 'number')
  {
  y = date;
  m = month-1;
  }
  var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // 非闰年的一年中每个月份的天数
  //如果是闰年并且是2月
  if(m == 1 && this.isLeapYear(y)) return days[m]+1;
  return days[m];
  },
  /*
  * 计算2日期之间的天数，用的是比较毫秒数的方法
  * 传进来的日期要么是Date类型，要么是yyyy-MM-dd格式的字符串日期
  * @param date1 日期一
  * @param date2 日期二
  /
  countDays: function(date1, date2)
  {
  var fmt = 'yyyy-MM-dd';
  // 将日期转换成字符串，转换的目的是去除"时、分、秒"
  if(date1 instanceof Date && date2 instanceof Date)
  {
  date1 = this.format(fmt, date1);
  date2 = this.format(fmt, date2);
  }
  if(typeof date1 === 'string' && typeof date2 === 'string')
  {
  date1 = this.parse(date1, fmt);
  date2 = this.parse(date2, fmt);
  return (date1.getTime() - date2.getTime()) / (10006060*24);
  }
  else
  {
  console.error('参数格式无效！');
  return 0;
  }
  }
  });
  })(jQuery);