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;
        }
};

时间: 2024-10-05 23:47:41

bootstrap table datailView使用中遇到的问题的相关文章

bootstrap table 服务器端分页--ashx+ajax

1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <link rel="

Bootstrap Table Fixed Columns

最近在使用BootStrap 做项目前端,自然也用到了  Bootstrap Table. 推荐大家多去这个http://bootstrap-table.wenzhixin.net.cn/zh-cn/  网站看看,上面有很详细的介绍以及其他扩展功能 下面写下 Fixed Columns(固定列)的使用方法.附件下载地址:http://pan.baidu.com/s/1kUEQTPt 1.引用css文件,js文件(注意引用顺序) <link rel="stylesheet" hre

html5 jquery bootstrap table 直接使用

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-w

JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实,博主挑选了一些自认为比较常用的功能在此分享给各位园友.源码也在这篇统一给出.好了,不多说废话,开始我们的干货之旅吧. bootstrap table系列: JS组件系列——表格组件神器:bootstrap table JS组件系列——表格组件神器:bootstrap table(二

Bootstrap table

Bootstrap table: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"> </head> <

新的表格展示利器 Bootstrap Table Ⅱ

    上一篇文章介绍了Bootstrap Table的基本知识点和应用,本文针对上一篇文章中未解决的文件导出问题进行分析,同时介绍BootStrap Table的扩展功能,当行表格数据修改. 1.Bootstrap Bable 全部数据导出分析 在表格导出数据中,发现设置了分页参数,导出的数据仅为表格加载的分页参数数据,于是,针对这样的情况,通过设置分页参数的值,使表格可以加载更多的数据,可达到导出所有数据的功能需求.然而,在实际的实验中,发现此方案存在以下问题: 表格一次加载一千条数据时,网

BootStrap table使用

bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/> <link rel="stylesheet" href="../bower_compon

Bootstrap Table使用分享

版权声明:本文为博主原创文章,未经博主允许不得转载. 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机.平板.PC 设备 采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案 一.效果展示 二.B

bootstrap table 实现固定悬浮table 表头并可以水平滚动

在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚动 html code(source table): <table id="top_fix_table" border="0" cellpadding="4" cellspacing="0" class="tabl