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

秒速五厘米 2022-10-28 03:54 176阅读 0赞

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 自带的验证:![20210205144549263.png][]  必须是在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();
>     });

效果:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQ2NTQ2_size_16_color_FFFFFF_t_70][]

[20210205144549263.png]: /images/20221024/26fd48a54c004337974401094cd26355.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQ2NTQ2_size_16_color_FFFFFF_t_70]: /images/20221024/9ec5cc02d748426fb64c79f123d7db25.png