bootstrap table记录使用过程中遇到的问题

随想先感

于 2020-01-13 15:30:15 发布

阅读量801

点赞数

分类专栏： js java html5

本文链接：https://blog.youkuaiyun.com/u013408979/article/details/103956738

版权

本文详细介绍了在使用Bootstrap Table时的步骤和注意事项，包括引入必要的JS和CSS文件，手动绘制复杂表格，填充和修改数据，以及实现数据导出为Excel的功能。针对导出Excel时遇到的null值显示和表格线问题，提供了修改源码的解决方案，并分享了刷新表格数据的方法链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用bootstrap table，需要引进相关js
bootstrap-table.min.js、bootstrap-table.min.css
如果要导出excel需要引进bootstrap-table-export.js、tableExport.js
链接: https://pan.baidu.com/s/1cZZy6SPKrQ0UsJoSCGbIhQ 提取码: mrwe

<script  type="text/javascript" src="${path}/skins/frame/plugin/bootstrap-3.3.5/js/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="${path}/skins/frame/plugin/bootstrap-3.3.5/css/bootstrap-table.min.css" type="text/css" media="all" />
<script src="${path}/skins/frame/plugin/bootstrap-3.3.5/js/bootstrap-table-export.js"></script>
<script src="${path}/skins/frame/plugin/bootstrap-3.3.5/js/tableExport.js"></script>

2、绘制表格

var columns = [
        [
            {
                "title": "xxxxxxxxx记录表",
                "halign":"center",
                "align":"center",
                "colspan":9,
                valign:"middle",
                rowspan: 1,
            }
        ],
        [
            {
                "title": "日时",
                "halign":"center",
                "align":"center",
                "colspan": 1,
                valign:"middle",
                rowspan: 2,
                width:200,
                field: 'H'
            },
            {
                "title":  "2010-01-10",
                "halign":"center",
                "align":"center",
                width:300,
                "colspan":2
            },
            {
                "title": "2010-01-11",
                "halign":"center",
                "align":"center",
                "colspan": 2,
                valign:"middle",
                width:300,
                rowspan: 1,