我想要革命想要解脫——bootstrap常見問題及解決方式

　　最近一個月，恍若隔世，每天加班，昨晚終於發版了，今天才喘一口氣。有時候，即使你工做效率再怎麼高，擼碼再怎麼快也無可避免的會加班。不信的話，能夠先給你定一個交付時間，而後不斷的給你加需求，就讓你一我的作，偶爾再給你來幾下變動，看你怎麼死？原本作項目，需求、資源、時間就是一個鐵三角，一旦你強行要打破這個平衡，那麼註定就是杯具了.........而在天朝，不少時候，是需求還沒定，先給你定時間，而後資源基本上也是定的，又不肯在需求上作減法，甚至還作加法，結果就呵呵了......領導層只看結果，無論你過程，那麼程序員面對這樣的情形，也有本身的反抗方式：我偷工減料還不行麼？但是出來混，老是要還的，而後就是一個惡性循環...........

　　劉德華的《練習》能夠形容我本月的狀態：「我已開始加班，開始每天加班，人快猝死在電腦旁，試着刪除數據庫再跑路，那些曾經準點下班的美好和回憶.....」。

　　用《圓月彎刀》的話說：「有些人，縱然每天擼碼，也永遠沒法成爲碼中之神........」。

　　感受全棧程序員的杯具就是項目全是你一我的作！美工、前端、接口、數據庫、移動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 );

這個找了好久