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;

        }

};