layui相关问题

 

layui table横向滚动条不显示问题:

博主使用的是layuimini模板,显示出数据后发现滚动条消失了,在谷歌、IE浏览器都看不到,在火狐浏览器上倒是能正常显示出来,若没有水平滚动条,是不利于展示数据种类多的数据。搞了好久,最后发现竟然是layuimini模板css样式把它给禁用了。注释掉即可。

/**自定义滚动条样式 */

::-webkit-scrollbar {

/*display: none*/

}

 

原文链接:https://blog.csdn.net/weixin_68729808/article/details/129675926

 

2、

 

 修改为如下:

 

 

 

 具体代码如下:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    {title: '状态', align: 'left',  minWidth: 130,  templet: '#switchBtn'},
   // {field: 'sort_no', title: '排序号',width: '5%',align: 'left'},
    {title: '操作',align: 'left', minWidth: 110, toolbar: '#currentTableBar', align: "right"}
]],
limits: [10, 15, 20, 25, 50, 100],
limit: 15,
page: true,
skin: 'line',
done: function(res, curr, count, origin){
    $('.layui-form-switch>div').each(function(index,dom){
        $(dom).replaceWith(function() {
            return "<em>" + this.innerHTML + "</em>";
        });
    });
},

  

1
2
3
4
5
6
<!-- 按钮开关 -->
<script type="text/html" id="switchBtn">
    <input type="checkbox" name="status" value="@{{d.uuid}}" lay-skin="switch"
           title="发布|下架"  data-url="/operateAct"
           lay-filter="data-list-is-enabled" @{{ d.is_enabled =='1' ? 'checked' : '' }}>
</script>

  

复制代码
        // 状态 - 开关操作
        form.on('switch(data-list-is-enabled)', function(obj){
            var that = this;
            var v_id = this.value;
            var v_status = obj.elem.checked ? 'enable' : 'disable';
            var status_post_url = urlPrefix+$(this).data('url'); //提交地址
            var status_post_data = {uuid: v_id, type: v_status}; //提交数据
            status_post_data._token = "<?php echo csrf_token() ?>";
            tools.sendAjaxRequest('POST',status_post_url,status_post_data,function (res) {
                if (res.code == 0) {
                    //按钮开关兼容性处理
                    let btnValArr = $(that).attr('title').split('|'); //获取按钮值
                    $(that).parent().find('.layui-form-switch>em').text(obj.elem.checked ? btnValArr[0] : btnValArr[1]);
                    layer.msg('操作成功', function () {
                        //location.reload();
                    });
                } else {
                    layer.msg(res.msg);
                }
            },function (res) {
                layer.msg('遇到一点小问题,请联系管理员');
            });
        });
复制代码

 3、layui判断列表中按钮的显示隐藏处理:

复制代码
                    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter0"></table>
                    <script type="text/html" id="currentTableBar">
                        @{{#  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>
                        @{{#  }else{ }}
                            <a class="layui-btn layui-btn-normal layui-btn-xs  layui-bg-orange data-count-edit"  lay-event="revoke" >撤销</a>
                        @{{# } }}
                       
                    </script>
复制代码

 

posted on   andydaopeng  阅读(186)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· .NET10 - 预览版1新功能体验(一)
历史上的今天:
2021-07-13 client_loop: send disconnect: Broken pipe

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示