layUI
*** 【layer】 ****************************************************************************************************************************
layer弹窗：
layer.alert('弹框显示的内容',{icon:2});
【警告感叹号:0，打钩icon:1，叉叉icon:2，问号icon:3，已锁定icon:4，苦脸icon:5，笑脸icon:6，警告感叹号icon:7】
layer.alert('墨绿风格，点击确认看深蓝', {
skin: 'layui-layer-molv' //样式类名 自定义样式
,closebtn: 1 // 是否显示关闭按钮
,anim: 1 //动画类型
,btn: ['重要','奇葩'] //按钮
,icon: 6 // icon
,yes:function(){
layer.msg('按钮1')
}
,btn2:function(){
layer.msg('按钮2')
}});
layer.confirm（param1,param12,param13,param14）
layer.msg("")
layer.msg("you are the best!",{icon:""});
layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
time: 2000, //2s后自动关闭
btn: ['明白了', '知道了', '哦']
});
layer.tips('hi，我是tips', '#mybtn');//当成一个function用
layer.load(1);
layer.load(0);
var index = layer.load(0, {shade: false}); //显示加载图标
var index = layer.load(1, {shade: [0.1,'#fff'] //0.1透明度的白色背景}); //显示加载图标
layer.open();弹出层
【type：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）】
layer.open(){
type: 1,//1为页面层
title："标题",// - 标题
content: "html代码或页面路径",//- 内容
area: ['500px', '300px'],//宽高
maxmin:true,//最大化最小化
cancel:function(){ //右上角关闭按钮触发的回调
return false;//false表示不关闭
}
}
*** layui ****************************************************************************************************************************
table行列中插入图片：
{field: 'template_image', title: '模版图(点击预览)', templet:'<div><a href="javascript:enlarge("{{d.template_image}}")"><img src="{{d.template_image}}"></a></div>'}
增加点击图片预览功能：
function enlarge(imgsrc){
if(imgsrc){
var width = pagewidth*0.5+"px";
var height = pageheight*0.8+"px";
var imgwidth = pagewidth*0.5*0.9+"px";
layer.open({
type:1,
title:'查看大图',
area:[width,height],
shadeclose: true, //开启遮罩关闭
content:'<img src="'+imgsrc+'" style="width:'+imgwidth+';height:auto;position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;">'
})
}
}
-------------------------
table中根据后台传回来的数据决定数据渲染方式：
【done - 数据渲染完的回调】
例如：用户的‘启用’和‘禁用’按钮
done: function(res, curr, count){
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
console.log(res);
//得到当前页码
console.log(curr);
//得到数据总量
console.log(count);
for(var ind in res.data){
if(res.data[ind].status == "2"){
$("#tablecontainer").find('a[name="ban"]').eq(ind).text("启用");
$("#tablecontainer").find('a[name="ban"]').eq(ind).attr("lay-event","enable");
$("#tablecontainer").find('a[name="ban"]').eq(ind).removeclass("layui-btn-danger");
}
}
}
});
-------------------------
table中的行列要显示自定义的操作性按钮：
【既要显示后台获取的数据，也要显示按钮】
<script type="text/html" id="vipcustomerlist">
{{d.customer_count}} <a class="layui-btn layui-btn-xs" lay-event="check">查看</a>
</script>
{field: 'customer_count', title: '推广成功人次', sort: true, toolbar: '#vipcustomerlist'}
-------------------------
layui下select选项动态加载方案：
【html】
<div class="layui-inline">
<div class="layui-form">
<select id="vipcard" lay-verify="required"></select>
</div>
</div>
【js】
$(function (){
$.ajax({
url: origin + "/manager/vipretail/listvipcard",
type: "get",
datatype:"json",
async: false,
success: function (data) {
if(data && data.res){
layui.use(['layer', 'form'], function () {
var form = layui.form;
var html1 = '<dd lay-value="" class="layui-select-tips layui-this">请选择卡类型</dd>';
var html2 = '<option value="" >请选择卡类型</option>';
for (var i = 0; i < data.res.length; i++) {
html1 += '<dd lay-value="' + data.res[i].id + '">' + data.res[i].card_type + '</dd>';
html2 += '<option value="' + data.res[i].id + '">' + data.res[i].card_type + '</option>';
}
$("#vipcard").next().children().eq(1).html(html1);
$("#vipcard").html(html2);
form.render();//没有写这个，操作后没有效果
});
}
}
});
})
-------------------------
select/checkbox/radio没显示问题：
layui.use('form', function(){
var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
//……
//但是，如果你的html是动态生成的，自动渲染就会失效
//因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
form.render();
});
-------------------------
页面中用layui插件造成select的onchange事件不起作用的问题：
解决：
【html】
<select lay-filter="retaillevel">
<option value="" selected>请设置级别</option>
<option value="1">一级</option>
<option value="2">二级</option>
</select>
【js】
layui.use('form', function(){
var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
form.on('select(retaillevel)', function(data){
//console.log(data.elem); //得到select原始dom对象
//console.log(data.value); //得到被选中的值
//console.log(data.othis); //得到美化后的dom对象
if(data.value == 2){
$("#superior").css("display","block");
}else{
$("#superior").css("display","none");
}
});
//但是，如果你的html是动态生成的，自动渲染就会失效
//因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
//form.render();
});
-------------------------
关闭当前页面：
$('#closeiframe').click(function () {
//注意：parent 是 js 自带的全局对象，可用于操作父页面
var index = parent.layer.getframeindex(window.name); //获取窗口索引
parent.layer.close(index);
});
-------------------------
请求接口成功后的提示：
【方案一】弹出成功提示框。1.5秒后关闭本页面，刷新父页面的table的数据（table再请求一次）
layer.msg("新增成功！",{icon:1,time: 1500},function(){
var index = parent.layer.getframeindex(window.name);
parent.table.reload("alltable",{
page: {
curr: 1 //重新从第 1 页开始
}
}, 'data'); //只重载数据
parent.layer.close(index);
});