后台项目页面开发笔记总结

1.给<img />标签赋值: 

  $("#img").attr('src', dataStr.coverUrl);

2.标签可读,不可读操作: 

 $("#id").attr("readonly",false);         $("#id").attr("readonly",true);

3.模拟下拉框点击:     

$("#city").parent().find("dd[lay-value=" +city + "]").click();    layui.form.render('select');  每次模拟 再次渲染下拉框

4.放大图片方法:

$(document).on('click', '.imgclass', function () { 
var logo = $(this).attr("src"); 
var img_infor = '<img width=\'500px\' height=\'600px\' src="' + logo + '" />'; 
layer.open({
 type: 1, 
 id:"img_xq", 
 closeBtn: 1, 
 shade: 0.8, 
 title: false, //不显示标题 
 shadeClose: true, 
 area: ['auto', 'auto'], //宽高 
 content: img_infor 
}); 
});

5.layerui 扩展组件的使用

6.判断空值:   

a== undefined || a == null || a== '' "            判断数字:NAN

7.layui 自带的验证:  必须是在form submit的情况下才生效

 

8.layer表格:加载完后控制显示的字段:

table.render({
    elem: '#'
    ,url: 
    , format:'YYYY-MM-DD HH:mm:ss' //日期格式
    ,headers: {"Authorization": token}
    ,cols: [[
        {checkbox:'true',fixed:'true' }
        ,{field:'title', title: '课程标题', width:180,align:'left'}
    ]]
    ,id: ''
    ,page: true
    ,height: 'auto'
    ,done:function (res) {
            //隐藏某列
            $("[data-field='title']").css('display','none'); //关键代码
    }
});

9.父页面向子页面传值:

layer.open({
    type: 2,
    title: "标题",
    shadeClose: true,
    shade: 0.8,
    area: ['99%', '99%'],
    content: "xxx.html",
    success: function (layero,index) {
        var iframe = window['layui-layer-iframe' + index];
        iframe.getData(xxx);
    }
});

10:重新加载表格

layui.table.reload('testReload',{});

11:相册功能:

himl代码:

<div class="layui-form-item">
    <label class="layui-form-label">场地相册：<span style="color: red;">*</span></label>
    <div class="layui-input-block">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test2">上传图片</button>
            <blockquote class="layui-elem-quote layui-quote-nm"
                        style="margin-top: 10px;width: 88%">
                预览图：
                <div class="layui-upload-list uploader-list" style="overflow: auto;"
                     id="uploader-list">

                </div>
            </blockquote>
        </div>
    </div>
</div>

js代码:

upload.render({
    elem: '#test2'
    , url: baseUrl + '/basic/uploadFile'
    ,multiple: true
    ,before: function(obj){
        layer.msg('图片上传中...', {
            icon: 16,
            shade: 0.01,
            time: 0
        })
    }
    ,done: function(res){
        layer.close(layer.msg());//关闭上传提示窗口

        //上传完毕
        $('#uploader-list').append(
            '<div id="" class="file-iteme">' +
            '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
            '<img style="width: 100px;height: 100px;" class="album" src='+  res.id +'>' +
            '</div>'
        );
    }
});

$(document).on("mouseenter mouseleave", ".file-iteme", function(event){
    if(event.type === "mouseenter"){
        //鼠标悬浮
        $(this).children(".info").fadeIn("fast");
        $(this).children(".handle").fadeIn("fast");
    }else if(event.type === "mouseleave") {
        //鼠标离开
        $(this).children(".info").hide();
        $(this).children(".handle").hide();
    }
});


// 删除图片
$(document).on("click", ".file-iteme .handle", function(event){
    $(this).parent().remove();
});

 

 

效果: