- 单选框取值
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
<div class="layui-inline">
<label class="layui-form-label w-auto">所属类型：</label>
<div class="layui-input-inline">
<select name="typeName" id="typeName" lay-filter="typeName" class="layui-input">
<option value=""></option>
</select>
<input type="hidden" id="typeCode">
</div>
</div>
- 模板：
<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">
<input type="checkbox" lay-filter="ckState" value="{{d.id}}" lay-skin="switch"
lay-text="启用|停用" {{d.state=="1"?'checked':''}}/>
</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">
<div style="float:left;padding-left:20px;padding-right:20px;text-align:center;">
<div id="sceneQrcodeTitleDiv" style="margin-top: 10px"></div>
<div id="sceneQrcodeShowDiv" style="text-align: center; margin-top: 20px; margin-bottom: 20px"></div>
<div class="layui-form-item text-center">
<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>
</div>
<input type="hidden" id="codeName"/>
<input type="hidden" id="codeId"/>
</div>
</script>
// 查看二维码（后台返回）调用后台下载二维码的方法即可
function see(data) {
var html = "<img style='width: 260px; height: 260px' src= '" + config.base_server + "scene/v1/sceneQrcode/downloadQrCode?code=" + data.id + "&name=" + data.name + "'/>"
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(_$1);
return '';
});
return '';
});
obj.M--; // 月份是从0开始的，所以要减去1
var date = new Date(obj.y, obj.M, obj.d, obj.H, obj.m, obj.s);
if(obj.S !== 0) date.setMilliseconds(obj.S); // 如果设置了毫秒
return date;
},
/**
* 将一个日期格式化成友好格式，比如，1分钟以内的返回“刚刚”，
* 当天的返回时分，当年的返回月日，否则，返回年月日
* @param {Object} date
*/
formatDateToFriendly: function(date)
{
date = date || new Date();
date = typeof date === 'number' ? new Date(date) : date;
var now = new Date();
if((now.getTime() - date.getTime()) < 60*1000) return '刚刚'; // 1分钟以内视作“刚刚”
var temp = this.formatDate(date, 'yyyy年M月d');
if(temp == this.formatDate(now, 'yyyy年M月d')) return this.formatDate(date, 'HH:mm');
if(date.getFullYear() == now.getFullYear()) return this.formatDate(date, 'M月d日');
return temp;
},
/**
* 将一段时长转换成友好格式，如：
* 147->“2分27秒”
* 1581->“26分21秒”
* 15818->“4小时24分”
* @param {Object} second
*/
formatDurationToFriendly: function(second)
{
if(second < 60) return second + '秒';
else if(second < 60*60) return (second-second%60)/60+'分'+second%60+'秒';
else if(second < 60*60*24) return (second-second%3600)/60/60+'小时'+Math.round(second%3600/60)+'分';
return (second/60/60/24).toFixed(1)+'天';
},
/**
* 将时间转换成MM:SS形式
*/
formatTimeToFriendly: function(second)
{
var m = Math.floor(second / 60);
m = m < 10 ? ( '0' + m ) : m;
var s = second % 60;
s = s < 10 ? ( '0' + s ) : s;
return m + ':' + s;
},
/**
* 判断某一年是否是闰年
* @param year 可以是一个date类型，也可以是一个int类型的年份，不传默认当前时间
*/
isLeapYear: function(year)
{
if(year === undefined) year = new Date();
if(year instanceof Date) year = year.getFullYear();
return (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0);
},
/**
* 获取某一年某一月的总天数，没有任何参数时获取当前月份的
* 方式一：$.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()) / (1000*60*60*24);
}
else
{
console.error('参数格式无效！');
return 0;
}
}
});
})(jQuery);
993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
