layui 相关

//layui table filter 监听筛选列工具条的点击事件(解决table右上角筛选时列名称不显示问题)
table.on('toolbar(currentTableFilter)', function(obj){
    if(obj.event === 'LAYTABLE_COLS'){// 筛选列按钮被点击
        // 获取下拉面板元素
        var panel = $(obj.config.elem).find('.layui-table-tool-panel');
        console.log('abc', $('.layui-table-tool-panel').html(), $(obj.config.elem), panel.html())

        $('.layui-table-tool-panel>li').each(function(index,dom){
            $(dom).find('div>div').replaceWith(function() {
                return "<span>" + this.innerHTML + "</span>";
            });
        });
    }
});

/**解决layui 列表中swich 按钮结构为div时的样式问题  start **/
.layui-form-switch div {
    position: relative;
    top: 0;
    width: 25px;
    margin-left: 21px;
    padding: 0!important;
    text-align: center!important;
    color: #999!important;
    font-style: normal!important;
    font-size: 12px
}
.layui-form-onswitch div {
    margin-left: 0;
    margin-right: 21px;
    color: #fff!important
}
.layui-checkbox-disabled div {
    color: #d2d2d2!important
}
/**解决layui 列表中swich 按钮结构为div时的样式问题  end **/

通过js解决：
layui  table函数中添加：

done: function(res, curr, count, origin){
    $('.layui-form-switch>div').each(function(index,dom){
        $(dom).replaceWith(function() {
            return "<em>" + this.innerHTML + "</em>";
        });
    });
},

1、layui上传图片封装js

//工具函数
function Tools(){ }
Tools.prototype = {
    moneyFormat : function(val,decimals= 2){
        let formattedNumber = val.toFixed(decimals); // 将数字保留2位小数

        //console.log(formattedNumber); // 输出 "0.00"
        return formattedNumber;
    },
    /**
     * 上传图片
     * @param upload layui中的upload对象,比如： upload=layui.upload,
     * @param idSelector 上传按钮的id值
     * @param filePath  上传后需要图片存储的路径
     */
    uploadImg: function({upload,element}, idSelector, filePath){
        var uploadInst = upload.render({
            elem: '#'+idSelector,
            url: '/admin/upload/img', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            data:{path: (typeof(filePath) == 'undefined' ?  'uploadfile/others' : filePath) },
            field:'file',
            acceptMime: 'image/jpeg, image/png', // 只筛选 jpg,png 格式图片
            accept:'images', //指定允许上传时校验的文件类型
            exts:'jpg|png|jpeg', //允许上传的文件后缀。一般结合 accept 属性来设定。
            before: function(obj){
                var that = this;
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $(that.item).parent().find('.cls-upload-img').attr('src', result); // 图片链接（base64）
                });
                var sourceId = $(this.item).attr('id');
                if(element && (typeof element != undefined)){
                    element.progress('filter-demo'+sourceId, '0%'); // 进度条复位
                }
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res,index,upload){
                if(res.code > 0){// 若上传失败
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作
                $(this.item).parent().find('.cls-upload-text').html(''); // 置空上传失败的状态
                $('input[name="image"]').val(res.data.file_path);
            },
            error: function(index,upload){ // 演示失败状态，并实现重传
                var demoText =  $(this.item).parent().find('.cls-upload-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            },
            progress: function(n, elem, e){ // 进度条
                var sourceId = $(this.item).attr('id');
                if(element && (typeof element != undefined)){
                    element.progress('filter-demo'+sourceId, n + '%'); // 可配合 layui 进度条元素使用
                }
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    }
};
var tools = new Tools();

2、layui 上传图片html代码：

    <div class="layui-form-item">
        <input type="hidden" name="image" lay-verify="required" lay-reqtext="请上传KV图片">
        <label class="layui-form-label required">KV图片：</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="upload-cover-btn">
                <i class="layui-icon layui-icon-addition"><!--上传--></i>
            </button>
            <div style="width: 90%">
                <div class="layui-upload-list">
                    <img class="layui-upload-img cls-upload-img" id="upload-cover-img" style="width:400px;height: 200px;">
                    <div id="upload-cover-text" class="cls-upload-text"></div>
                </div>
{{--                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demoupload-cover-btn">--}}
{{--                    <div class="layui-progress-bar" lay-percent=""></div>--}}
{{--                </div>--}}
            </div>
        </div>
    </div>

3、layui 上传图片html中调用js封装的方法

    layui.use(['form','tableSelect','upload','layer'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            upload=layui.upload,
            tableSelect = layui.tableSelect;
        var element = layui.element;

        tools.uploadImg({upload}, 'upload-cover-btn', 'uploadfile/admin/news');

　　

判断列表后面的操作按钮的显示隐藏：

<script type="text/html" id="barDemo">
 
    <a class="layui-btn layui-btn-mini" lay-event="look">查看</a>
 
    @{{#  if(d.status ==0){ }}
        <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    @{{# }if(d.status ==1) { }}
        <a class="layui-btn layui-btn-mini" lay-event="submit">提交</a>
    @{{# }if(d.status ==2) { }}
         <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
    @{{#  } }}
 
</script>

demo2:
                    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter0"></table>
                    <script type="text/html" id="currentTableBar">
{{--                        <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit"  lay-event="edit">操作</a>--}}
                        @{{#  if(d.status ==0){ }}
                        <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit"  lay-event="pass" >通过</a>
                        <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete"  lay-event="refuse" >不通过</a>
                        @{{#  } }}

{{--                        <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="remove_auth">解绑</a>--}}
                   </script>

　　

在layui layer 弹出层中加载 layui table

 

layui table 回显数据设置默认选中 , 是否可以设置默认选中多个不连续的行:

你可以通过为每一条需要默认选中的数据设置 LAY_CHECKED: true 来实现默认选中多个不连续的行。举个例子：

layui.use('table', function(){
  var table = layui.table;

  table.render({
    elem: '#test'
    ,data: [
      {id: 1, name: '行1', age: 1, LAY_CHECKED: true}, //这条记录的 LAY_CHECKED 设置为 true，表示默认选中
      {id: 2, name: '行2', age: 2},
      {id: 3, name: '行3', age: 3, LAY_CHECKED: true}, //这条记录的 LAY_CHECKED 设置为 true，表示默认选中
      {id: 4, name: '行4', age: 4},
      {id: 5, name: '行5', age: 5, LAY_CHECKED: true}  //这条记录的 LAY_CHECKED 设置为 true，表示默认选中
    ]
    ,cols: [[
      {checkbox: true},
      {field: 'id', title: 'ID'},
      {field: 'name', title: '名称'},
      {field: 'age', title: '年龄'}
    ]]
    ,even: true
  });
});

　　在上述代码中，id 为 1、3 和 5 的行将在页面加载时默认为选中状态。这也是通过在每一个需要选中的行数据中设置 LAY_CHECKED: true 来达到的目的。