复制内容

  1. <input type="button" value="复制运单号" title="该操作将所有选择的行复制运单号" class="layui-btn layui-btn-danger multi_copy_class">
  2. <input type="hidden" id="copyContentInput" value="">
  1. <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
  2. var clipboard = new ClipboardJS('.multi_copy_class', {
  3.   text: function() {
  4.     get_multi_copy('express_no')
  5.     var res = layui.jquery('#copyContentInput').val();
  6.     return res;
  7.   }
  8. });
  9.     clipboard.on('success', function(e) {
  10.   layer.msg("已复制到剪切板,内容为<br>" + e.text)
  11.   e.clearSelection();
  12. });
  13.     clipboard.on('error', function(e) {
  14.   layer.msg("复制失败！")
  15. });
  17. function get_multi_copy(field){
  18.         var checkStatus = layui.table.checkStatus('table');
  19.         var data = checkStatus.data;
  20.         if (data.length <= 0) {
  21.             layer.msg('请选择要操作的行');
  22.             return false;
  23.         }
  24.         let ids = [];
  25.         for(let i in data){
  26.             ids.push(data[i]['id']);
  27.         }
  28.         var index;
  29.         layui.jquery.ajax({
  30.             url: '{:url("/backend/package/getFieldContent")}',
  31.             data: {ids : ids.join(), field: field},
  32.             dataType: "json",
  33.             async:false,
  34.             beforeSend:function(){
  35.                 index = layer.load();
  36.             },
  37.             complete:function(){
  38.                 layer.close(index);
  39.             },
  40.             success: function(res) {
  41.                 layui.jquery('#copyContentInput').val(res.data)
  42.             },
  43.             error:function(res){
  44.                 layer.msg(res.responseJSON.reason);
  45.                 layer.close(index);
  46.                 layui.jquery('#copyContentInput').val('')
  47.             },
  48.         });
  49.     }

数据表格多选框自定义是否显示

全选时,全选输入框无法自动勾选,单不影响功能

  1. {field: 'checkbox', title: '<input type="checkbox" name="layTableCheckbox" lay-skin="primary" lay-filter="layTableAllChoose">', width: 60,templet: function(d){
  2.   if (d.status === '显示'){
  3.     return '<input type="checkbox" name="layTableCheckbox" lay-skin="primary">'
  4.   } else{
  5.     return ''
  6.   }
  7. }},

ajax弹窗

  1. <div id="update_view" style="display: none;"></div>
  2. <script id="update_template" type="text/html">
  3.     <form class="layui-form">
  4.         <input type="number" name="id" value="{{ d.data.id }}" hidden>
  5.         <div class="layui-form-item">
  6.             <label class="layui-form-label w100">姓名</label>
  7.             <div class="layui-input-inline">
  8.                 <input type="text" name="provide_username" value="{{ d.data.provide_username }}" required lay-verify="required" autocomplete="off" class="layui-input">
  9.             </div>
  10.         </div>
  11.         <div class="layui-form-item">
  12.             <label class="layui-form-label w100">手机号</label>
  13.             <div class="layui-input-inline">
  14.                 <input type="number" name="provide_user_phone" value="{{ d.data.provide_user_phone }}" required lay-verify="required|phone" autocomplete="off" class="layui-input">
  15.             </div>
  16.         </div>
  17.         <div class="tac">
  18.             <button type="reset" onclick="update_cancel()" class="layui-btn layui-btn-primary">取消</button>
  19.             <button class="layui-btn layui-btn-normal" lay-submit lay-filter="update">保存</button>
  20.         </div>
  21.     </form>
  22. </script>
  24. var getTpl = update_template.innerHTML,update_view = document.getElementById('update_view');
  25.                     layui.laytpl(getTpl).render({data:res.data}, function(html){
  26.                         update_view.innerHTML = html;
  27.                         index_update_view = layer.open({
  28.                             type: 1,
  29.                             title: '编辑发放人',
  30.                             area: '500px',
  31.                             content: layui.jquery('#update_view')
  32.                         });
  33.                     });

富文本

编辑时,富文本内容需要使用ajax请求json数据方式填充,直接使用后端语言渲染有可能导致显示错乱

  1. <div id="editor" class="mt20"></div>
  3. <script src="__STATIC__/js/wangEditor.min.js"></script>
  4. <script>
  5.     var E = window.wangEditor;
  6.     var editor = new E('#editor');
  7.     editor.customConfig.uploadImgShowBase64 = true;
  8.     editor.customConfig.menus = [
  9.         'head',  // 标题
  10.         'bold',  // 粗体
  11.         'fontSize',  // 字号
  12.         'fontName',  // 字体
  13.         'italic',  // 斜体
  14.         'underline',  // 下划线
  15.         'strikeThrough',  // 删除线
  16.         'foreColor',  // 文字颜色
  17.         'backColor',  // 背景颜色
  18.         'link',  // 插入链接
  19.         'list',  // 列表
  20.         'justify',  // 对齐方式
  21.         'quote',  // 引用
  22.         'emoticon',  // 表情
  23.         'image',  // 插入图片
  24.         'table',  // 表格
  25.         // 'video',  // 插入视频
  26.         'code',  // 插入代码
  27.         'undo',  // 撤销
  28.         'redo'  // 重复
  29.     ];
  31.     // 配置服务器端地址
  32.     editor.customConfig.uploadImgServer = '{:url("/backend/resource")}';
  33.     editor.customConfig.uploadFileName = 'file';
  34.     editor.customConfig.uploadImgParams = {
  35.         type : 'editor_img'
  36.     };
  38.     var editor_index;
  39.     editor.customConfig.uploadImgHooks = {
  40.         before: function (xhr, editor, files) {
  41.             editor_index = layer.load();
  42.         },
  43.         success: function (xhr, editor, result) {
  44.             layer.close(editor_index);
  45.         },
  46.         fail: function (xhr, editor, result) {
  47.             layer.close(editor_index);
  48.             layer.msg(result.msg);
  49.         },
  50.         error: function (xhr, editor) {
  51.             layer.close(editor_index);
  52.             layer.msg('图片上传出错');
  53.         },
  54.         timeout: function (xhr, editor) {
  55.             layer.close(editor_index);
  56.             layer.msg('文件上传超时');
  57.         },
  58.         customInsert: function (insertImg, result, editor) {
  59.             layer.close(editor_index);
  60.             if (result.code === 0){
  61.                 var url = result.data;
  62.                 insertImg(url)
  63.             } else{
  64.                 layer.msg(result.msg);
  65.             }
  66.         }
  67.     };
  69.     editor.customConfig.customAlert = function (info) {
  70.         layui.msg(info);
  71.     };
  73.     editor.create();
  75.         var note = editor.txt.html();//获取文本内容
  76. </script>

上传多个图片

  1. <div id="img-input"></div>
  2.     <div class="layui-form-item mt20">
  3.         <div>上传课程轮播图(图片尺寸：750*320 px)（<span id="img_total">0</span>/5）(已上传的图片，点击可进行删除操作)</div>
  4.         <div class="mt10">
  5.             <div id="img-div"></div>
  6.             <div class="mt20" id="upload_div">
  7.                 <button type="button" class="layui-btn layui-btn-normal ml20" id="upload2"><i class="layui-icon layui-icon-upload"></i>上传</button>
  8.             </div>
  9.         </div>
  10.     </div>
  12. let img_id = 1;
  13. let img_total = 0;
  15. upload.render({
  16.             elem: '#upload2',
  17.             data: {
  18.                 type : 'carousel_img',
  19.             },
  20.             url: '{:url("/backend/resource")}',
  21.             accept : 'images',
  22.             exts: 'png|jpg',
  23.             acceptMime: 'image/jpg, image/png',
  24.             size : 8*1024,
  25.             before:function(){
  26.                 layer.load()
  27.             },
  28.             done: function(res){
  29.                 layer.closeAll('loading');
  30.                 if (res.code === 0){
  31.                     let img_div_template = '<img id="img'+img_id+'" onclick="del('+img_id+')" class="carousel-img" src="'+res.data+'">';
  32.                     $('#img-div').append(img_div_template);
  33.                     let img_input_template = '<input type="hidden" id="img_input'+img_id+'" name="carousel_imgs[]" value="'+res.key+'">';
  34.                     $('#img-input').append(img_input_template);
  35.                     img_id += 1;
  36.                     img_total += 1;
  37.                     $('#img_total').text(img_total);
  38.                     if (img_total >= 5){
  39.                         $('#upload_div').hide();
  40.                     }
  41.                     layer.msg('上传成功');
  42.                 } else{
  43.                     layer.msg(res.msg);
  44.                 }
  45.             },
  46.             error: function(res){
  47.                 layer.closeAll('loading');
  48.                 layer.msg(res.msg,{icon: 2});
  49.             }
  50.         });

上传单个图片

  1. <div class="layui-form-item mt20">
  2.         <input type="hidden" name="img" value="{$item.img}" id="img">
  3.         <div>礼券图片</div>
  4.         <div class="mt10">
  5.             <img id="carousel-img" class="layui-icon layui-icon-picture carousel-img" src="{$item.img_url}">
  6.             <button type="button" class="layui-btn ml20" id="upload">
  7.                 <i class="layui-icon layui-icon-upload"></i>上传图片
  8.             </button>
  9.         </div>
  10.     </div>
  12. upload.render({
  13.             elem: '#upload',
  14.             data: {
  15.                 type : 'ad_img',
  16.             },
  17.             url: '{:url("/backend/resource")}',
  18.             accept : 'images',
  19.             exts: 'png|jpg',
  20.             acceptMime: 'image/jpg, image/png',
  21.             size : 8*1024*1024,
  22.             before:function(){
  23.                 layer.load()
  24.             },
  25.             done: function(res){
  26.                 layer.closeAll('loading');
  27.                 if (res.code === 0){
  28.                     $('#carousel-img').attr('src', res.data);
  29.                     $('#img').val(res.key);
  30.                     layer.msg('上传成功');
  31.                 } else{
  32.                     layer.msg(res.msg);
  33.                 }
  34.             },
  35.             error: function(res){
  36.                 layer.closeAll('loading');
  37.                 layer.msg(res.msg,{icon: 2});
  38.             }
  39.         });

七牛云大文件上传

  1. //上传进度条
  2. <div id="progress" style="display: none;margin: 10px 0">
  3.     <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="progress-value">
  4.         <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
  5.     </div>
  6. </div>
  9. layui.use(['upload','element'], function(){
  10.         let upload = layui.upload;
  11.         let element = layui.element;
  13.         upload.render({
  14.             elem: '#upload2',
  15.             size : 4*1024*1024*1024,
  16.             url: '{:url("/backend/resource")}',
  17.             accept : 'video'
  18.             ,auto: false
  19.             ,bindAction: '#testListAction'
  20.             ,choose: function(obj){
  21.                 obj.preview(function(index, file, result){
  22.                     var index;
  23.                     layui.jquery.ajax({
  24.                         type: "POST",
  25.                         url: '{:url("/backend/resource/token")}',
  26.                         dataType: "json",
  27.                         beforeSend:function(){
  28.                             index = layer.load();
  29.                         },
  30.                         complete:function(){
  31.                             layer.close(index);
  32.                         },
  33.                         success: function(res) {
  34.                             layer.close(index);
  35.                             if (res.code === 0){
  36.                                 let progress_index;
  37.                                 const domain = res.data.domain;
  38.                                 const key = res.data.key+'.'+file.name.split('.')[1];
  39.                                 const token = res.data.token;
  40.                                 const putExtra = {
  41.                                     fname: '',
  42.                                     params: {},
  43.                                     mimeType: ["video/mp4"],
  44.                                 };
  45.                                 const config = {
  46.                                     useCdnDomain: true, //使用cdn加速
  47.                                 };
  48.                                 const observable = qiniu.upload(file, key, token, putExtra, config);
  50.                                 progress_index = layer.open({
  51.                                     type: 1,
  52.                                     title: '文件上传[总大小: '+(file.size/(1024*1024)).toFixed(2)+' MB]',
  53.                                     content: layui.jquery('#progress'),
  54.                                     area: '80%',
  55.                                     cancel: function(index){
  56.                                         layer.confirm('确定要取消上传吗？', function (index2) {
  57.                                             layer.close(index);
  58.                                             layer.close(index2);
  59.                                             subscription.unsubscribe() // 上传取消
  60.                                         });
  61.                                         return false;
  62.                                     }
  63.                                 });
  65.                                 var subscription = observable.subscribe({
  66.                                     next: (result) => {
  67.                                         console.log(result);
  68.                                         let percent = result.total.percent;
  69.                                         percent = Math.round(percent*100)/100;
  70.                                         console.log(percent);
  71.                                         layui.element.progress('progress-value', percent+'%')
  72.                                     },
  73.                                     error: () => {
  74.                                         layer.msg('上传图片失败');
  75.                                         layer.close('progress_index');
  76.                                     },
  77.                                     complete: (res) => {
  78.                                         console.log(res);
  79.                                         layer.close(progress_index);
  80.                                         if (res.key){
  81.                                             layui.jquery('#carousel-img2').attr('src', domain+res.key);
  82.                                             layui.jquery('#carousel-img2').attr('type', file.type);
  83.                                             layui.jquery('#img2').val(res.key);
  84.                                             layui.jquery('#mimetype').val(file.type);
  85.                                             layer.msg('上传成功');
  86.                                         } else{
  87.                                             layer.msg(res.msg);
  88.                                         }
  89.                                     },
  90.                                 });
  91.                             } else{
  92.                                 layer.msg(res.msg);
  93.                             }
  94.                         },
  95.                         error:function(){
  96.                             layer.close(index);
  97.                             layer.msg('请求失败');
  98.                         },
  99.                     });
  100.                 });
  101.             }
  102.         });
  103.   });

监听输入框Enter事件

  1. layui.jquery('#search_key').on('keydown', function (event) {
  2.     if (event.key === 'Enter') {
  3.         search();
  4.         return false
  5.     }
  6. });

layui的ajax写法

  1. var index;
  2. layui.jquery.ajax({
  3.   type: "POST",
  4.   url: '{:url("/backend/institution/imgs")}',
  5.   data: {id: id},
  6.   dataType: "json",
  7.   beforeSend: function () {
  8.     index = layer.load();
  9.   },
  10.   complete: function () {
  11.     layer.close(index);
  12.   },
  13.   success: function (res) {
  14.     if (res.code === 404){
  15.       layer.msg(res.msg);
  16.       return false;
  17.     }
  18.     layer.photos({
  19.       photos: res
  20.       , anim: 5
  21.     });
  22.   },
  23.   error: function () {
  24.     layer.close(index);
  25.     layer.msg('请求失败');
  26.   },
  27. });