首页 > 代码库 > bootstrap table datailView使用中遇到的问题

bootstrap table datailView使用中遇到的问题

2024-08-22 11:46:39   222人阅读

最近在研究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=http://www.mamicode.com/=1){
                        html.push(‘<span>‘ + ‘委托代发单‘ + ‘</span>‘);
                    }
                    if(value=http://www.mamicode.com/=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=http://www.mamicode.com/"1\" >"+value+"</a> ";  
}
       
//格式化a标签点击事件
window.operateEvents = {
       ‘click a‘: function (e, value, row, index) {
            window.location.href=http://www.mamicode.com/url;
        }
};

bootstrap table datailView使用中遇到的问题


联系
我们