Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 27877|回复: 0

我想要革命想要解脱——bootstrap常见问题及解决方式

[复制链接]
  • TA的每日心情
    奋斗
    2024-4-6 11:05
  • 签到天数: 748 天

    [LV.9]以坛为家II

    2034

    主题

    2092

    帖子

    70万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    705612
    发表于 2021-4-11 13:25:07 | 显示全部楼层 |阅读模式

      最近一个月,恍若隔世,天天加班,昨晚终于发版了,今天才喘一口气。有时候,即便你工作效率再怎么高,撸码再怎么快也无可避免的会加班。不信的话,可以先给你定一个交付时间,然后不断的给你加需求,就让你一个人做,偶尔再给你来几下变更,看你怎么死?本来做项目,需求、资源、时间就是一个铁三角,一旦你强行要打破这个平衡,那么注定就是杯具了.........而在天朝,很多时候,是需求还没定,先给你定时间,然后资源基本上也是定的,又不愿在需求上做减法,甚至还做加法,结果就呵呵了......领导层只看结果,不管你过程,那么程序员面对这样的情形,也有自己的反抗方式:我偷工减料还不行么?可是出来混,总是要还的,然后就是一个恶性循环...........

      刘德华的《练习》可以形容我本月的状态:“我已开始加班,开始天天加班,人快猝死在电脑旁,试着删除数据库再跑路,那些曾经准点下班的美好和回忆.....”。

      用《圆月弯刀》的话说:“有些人,纵然天天撸码,也永远无法成为码中之神........”。

      感觉全栈程序员的杯具就是项目全是你一个人做!美工、前端、接口、数据库、移动app、部署、运维、售后........

      我已经不想再做程序猿,因为太苦逼,在还没有想好接下来做啥之前,我会一直苦逼下去.......

      吐槽完毕,继续记录和分享。

    bootstrapValidator动态加载数据的下拉框必填验证失效

    有那种数据是动态获取的下拉列表类似的,如select,

    两处要修改,一处是:excluded: [':disabled']

     $('form').bootstrapValidator({
                    message: 'This value is not valid',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    excluded: [':disabled'],

    另一处是在字段上添加触发条件:trigger: "change",

     ORG_CODE: {
                            trigger: "change",
                            validators: {
                                notEmpty: {
                                    message: '所属项目不能为空'
                                }
                            }
                        },

    对于隐藏字段赋值后,没有触发验证的问题,可以在后面添加change()方法,如下:

     $('#' + _equipmentTree.setting.name).val(sid.trim(',')).change();

    bootstrap-select组件搜索无效

    组件初始化代码:$('#BuildList').selectpicker({});

    当select中的数据是动态加载的时候,当数据加载完之后要记得添加如下代码:

     $("#BuildList").selectpicker('refresh');

     jQuery判断checkbox是否选中的方法

    方法一:
    if
    ($("#checkbox-id").get(0).checked) { // do something } 方法二: if($('#checkbox-id').is(':checked')) { // do something } 方法三: if ($('#checkbox-id').attr('checked')) { // do something }

    ztree全选反选

    var zTree = $.fn.zTree.getZTreeObj("zt_EQUIPMENT_IDs");
            zTree.checkAllNodes(isChecked);

    isChecked为true是全选,false为反选。

    使用jquery控制div的显示与隐藏

    使用jquery控制div的显示与隐藏,一句话就能搞定,例如:

    1.$("#id").show()表示为display:block,

       $("#id").hide()表示为display:none;

    2.$("#id").toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,则切换为可见的。

    3.$("#id").css('display','none');//隐藏

       $("#id").css('display','block');//显示

       或者

       $("#id")[0].style.display='none';

      display=none 控制对象的隐藏
      display=block控制对象的显示

    4.$("#id").css('visibility','hidden');//元素隐藏

       $("#id").css('visibility','visible');//元素显示

    CSS visibility 属性规定元素是否可见。
    visible 元素可见。 
    hidden 元素不可见。 
    collapse 在表格元素中使用时,此值可删除一行或一列,但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 
    inherit 从父元素继承 visibility 属性的值。

    bootstrap表头缩在一起

    当bootstrap用在tab中或者是用在remote加载的一个新界面中的时候,有时候会出现表头自动缩在一起的问题。例如:

    调用代码如下:

     $('#defaultModal').modal({ show: true, backdrop: 'static', remote: obj.detailUrl + "?equipid=" + encodeURIComponent(equipid) + "&&no=" + billNo + "&&state=" + state + "&&MenuId=" + $("#hidfMenuId").val() });

    解决方式,添加如下代码:

        $("#defaultModal").on("shown.bs.modal", function () {
            $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
        });

    虽然解决了表头缩在一起的问题,但是还会存在表头闪一下的问题,这是因为在自动计算表头的宽高。

    其它方案:在datatable初始化完成之后,设置表头的宽度。(前提:指定每一列的宽度)

            setTimeout(function () {
                var _table = $("#table_maintainTemplate_select_wrapper .dataTables_scrollHeadInner table");
                alert(_table.width())
                if (200 < _table.width() < 500) {
                    $("#table_maintainTemplate_select_wrapper .dataTables_scrollHeadInner table").width(566);
                }
            }, 300);

    取不到input的value值

     有时候,我们会发现html中value中明明有值了,但是通过js获取不到的情况。如:通过ajax动态加载的界面。

    解决方式:

    为text添加onchange事件

    <input id="txtCode" type="text" class="form-control input-inline" onchange="changeValue(this)">

    js代码如下:

        var _txtCode;
        function changeValue(obj) {
            $(obj).attr("value", $(obj).val());
            _txtCode = $(obj).val();
        }

    ..................

    bootstrap模态框内容只加载一次

    解决办法:在js加上以下代码

     $('#addOrEditDialog').on("hidden.bs.modal", function() {
               $(this).removeData("bs.modal");
               $(".modal-content").children().remove();
    });

    bootstrap多层modal弹窗同时关闭的解决办法

    bootstrap多层modal弹窗时。当子窗口关闭时,所有父窗口一起关闭。
    原因是bootstrap在窗口关闭事件委托时,委托给所有窗口。
    如源码:
    this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
    改进为

        this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]:first', $.proxy(this.hide, this))
        this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]:last', $.proxy(this.hide, this))

    注意:此方法仅对顶部关闭按钮有效,底部关闭按钮无效。

    bootstrap刷新时停留在当前页

    var table = $('#example').DataTable();
    // Sort by column 1 and then re-draw
    table.draw( false );

    这个找了很久

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-4-29 03:43 , Processed in 0.074300 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表