bootstrap table datailView使用中遇到的問題

最近在研究bootstrap table的使用，過程中查詢了許多資料，在給table做點擊下拉詳情時發現網上的資料大部分是基礎應用的資料，只有很少的一部分關於這部分的資料，而且並不完全。這里記錄一下昨天遇到的問題。

在數據綁定上用了$('#table').bootstrapTable({...})的方式，在參數中添加了

detailView:true，

detailFormatter:function(index, row){

    var html = [];

    $.each(row, function (key, value) {

        html.push('<p><b>' + key + ':</b> ' + value + '</p>');

    })

}

發現table上確實出現了可操作按鈕

但是當點擊展開按鈕會報錯404無法找到action[]，也無法進入detailFormatter定義的方法中，遍尋無果，不得已改用另一種數據綁定的方式

<table id="table" data-mobile-responsive="true"
      data-toggle="table" data-toolbar="#toolbar"
      data-detail-view="true" data-pagination="true"
      data-page-number="1" data-page-size="10" data-page-list="[10,20,30]"
      data-click-to-select="true"    data-show-columns="true"
      data-side-pagination="server"
      data-detail-formatter="detailFormatter"
      data-url="./showOrderList">
      <thead>
             <tr>
                   <th data-field="id">ID</th>
                   <th data-field="contractNo">貨單合同編號</th>
                   <th data-field="sendTime" >發貨日期</th>
            </tr>
       </thead>                         
</table>

成功進入了detailFormatter定義的方法中

詳情成功顯示，但是為什么上一種方式無效呢，又對第一種方式的所有設置進行逐項排除，最終確定在進行數據綁定時columns參數中多個字段的visible設置為false導致詳情無法展開。

columns: [

    {
               field: 'id',
               title: 'ID',
               visible: false
     }]

換回第一種方法，刪除所有visible:false的字段設置，依然成功顯示。

既然成功了，當然想的是怎么優化了，這個加號減號明顯給人感覺的意圖不是很明顯。

如何替換這組符號呢，發現在點擊+-號時，分別對應的class為glyphicon img-down 和  glyphicon img-up,

css重新定義它們的圖標樣式

.glyphicon.img-down{
    background-image:url(../images/up.png);
    display: block;
    margin-left: 3px;
    height: 16px;
    width: 16px;
    background-repeat: no-repeat;
}

.glyphicon.img-up{
    background-image:url(../images/down.png);
    display: block;
    margin-left: 3px;
    height: 16px;
    width: 16px;
    background-repeat: no-repeat;
    background-position: center center;
}

成功修改圖標樣式，然而這組圖標總是處在table的第一列，java web的table操作大多放在table最后一列，比較符合操作習慣，而且比較美觀，繼續查看頁面元素，發現這組由bootstrap自動生成的操作列只有class屬性。那么，在columns的綁定數據列最后自定義一個操作列，列中用formatter格式化兩個class與框架自動生成的class相同的標簽。

{
      field: 'state1',
        title: '操作',
        formatter: xlFMT
}

function xlFMT(value) {
        return "<a href='javascript:' class=\"detail-icon\" ><i class=\"glyphicon img-up\"></i></a> ";  
}

同時刪除detailView:true配置框架自動生成的按鈕，發現按鈕果然跑到表格后面了。

但是當點擊時發現自定義的按鈕時發現，css重定義的圖標樣式只在頁面初始化時生效，點擊后就又變回框架自帶的樣式+-了。

沒轍了，個人頁面端非常差勁，而且英文不好不喜歡看各種文檔，迫不得已找到官方文檔。

icons

data-icons

Object

{   paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',   paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',   refresh: 'glyphicon-refresh icon-refresh'   toggle: 'glyphicon-list-alt icon-list-alt'   columns: 'glyphicon-th icon-th'   detailOpen: 'glyphicon-plus icon-plus'   detailClose: 'glyphicon-minus icon-minus' }

自定義圖標

重新定義icons:{}

icons:{
                        detailOpen: 'img-up',
                          detailClose: 'img-down',
                          refresh: 'glyphicon-refresh icon-refresh',
                        toggle: 'glyphicon-list-alt icon-list-alt',
                        columns: 'glyphicon-th icon-th'
                    },

注：重定義此項，框架將不再讀取自帶的icons屬性，所以有用到框架自定義的其它按鈕都需要重定義，按照文檔復制即可。成功。

還沒來的及高興，又發現一個問題，點擊全都展開了，於是准備在詳情detailFormatter中遍歷當前頁數據$('#table').bootstrapTable("getdata")，行號等於當前行號的繼續循環行寫入詳情，其它的關閉。

實施時發現操作起來比較麻煩，而且需要循環兩個$.each，可行性太差，繼續找文檔。

collapseAllRows

is subtable

Collapse all rows if the detail view option is set to True.

於是在詳情方法中添加

function detailFormatter(index, row) {
            $('#table').bootstrapTable("collapseAllRows");
            var html = [];
            $.each(row, function (key, value) {
                if(key=='orderType'){
                    if(value==1){
                        html.push('<span>' + '委托代發單' + '</span>');
                    }
                    if(value==0){
                        html.push('<span>' + '貨主自派單 '+ '</span>');
                    }
                }
                //html.push('<p><b>' + key + ':</b> ' + value + '</p>');
            });
            return html.join('');
        }

完成，至於詳情中的樣式，就自己動手豐衣足食了，因為我不會，css什么的都是浮雲。
同時說一下，因為展開的操作列是人工寫入的，可能跳過了框架本身的某些限定，所以，在定義columns的字段時，加入visible:false也同樣生效。

這里同時記錄一下，如果要在table中加入a標簽，只要在columns定義顯示列時格式化，並且添加連接即可

columns: [
                    {
                        field: 'orderType',
                        title: '貨源類型',
                        formatter: checkFMT,
                        events: operateEvents,checkFM
                    }

]

//數據a標簽格式化
function checkFMT(value) {
       return "<a href='javascript:void(0)' class=\"check_a check_a_active\" style='margin-right:5px' value=\"1\" >"+value+"</a> ";  
}
       
//格式化a標簽點擊事件
window.operateEvents = {
       'click a': function (e, value, row, index) {
            window.location.href=url;
        }
};