bootstrap设计的精美网站推荐 bootstrap源码使用

文章插图
今天要做一个报表导入并预览的功能，使用layui的文件上传，获取表格数据，接着把表格数据返回前台，使用bootstraptable展示，实现一个预览表格数据的效果。通过后台处理后的数据bootstraptable加载数据，其实具体实现不难，今天要讲的是在实现数据加载之后，我们出现了一些问题，我会附源码讲解问题的解决方案分享给大家
通过后台处理后的数据// 数据经过处理后,真实数据已做修改Data = https://www.520longzhigu.com/diannao/[{JJSRBY: 6666,JJSRBYLJ: 155666,JJZCBY: 777,JJZCBYLJ: 2266633,LJJY: 151515,NCYE: 121212,SZYEBY: 11111,SZYEBYLJ: -11559,XZ:"企业职工基本养老保险",ZFNL: 22.1},{JJSRBY: 6666,JJSRBYLJ: 155666,JJZCBY: 777,JJZCBYLJ: 2266633,LJJY: 151515,NCYE: 121212,SZYEBY: 11111,SZYEBYLJ: -11559,XZ: "工伤保险",ZFNL: 22.1},...];bootstraptable加载数据// field 需要和 Data中每个对象中的字段名对应。// $('#previewTable').bootstrapTable({data : Data,//toolbar: '#toolBar',striped: true, //是否显示行间隔色cache: false, //是否使用缓存，默认为true，//minimumCountColumns: 2, //最少允许的列数clickToSelect: true, //是否启用点击选中行columns: [[{field : 'XZ', title: '险种', rowspan:2, align:"center"},{field : 'NCYE', title: '年初余额', rowspan:2,halign:"center",align:"right",formatter: function(value, row, index) {let num = row.NCYE;return num.toFixed(2);}},{title: '基金收入', colspan:2,align:"center"},{title: '基金支出', colspan:2,align:"center"},{title: '当年收支结余', colspan:2,align:"center"},{field : 'LJJY',title:'累计结余', rowspan:2,halign:"center",align:"right",formatter: function(value, row, index) {let num = row.LJJY;return num.toFixed(2);}},{field : 'ZFNL',title: '支付能力(月)', rowspan:2,halign:"center",align:"right",formatter: function(value, row, index) {let num = row.ZFNL;return num.toFixed(1);}},],[{field : 'JJSRBY',title:'本月', colspan:1,halign:"center",align:"right",formatter: function(value, row, index) {let num = row.JJSRBY;return num.toFixed(2);}},{field : 'JJSRBYLJ',title:'本月止累计', colspan:1,halign:"center",align:"right",formatter: function(value, row, index) {let num = row.JJSRBYLJ;return num.toFixed(2);}},{field : 'JJZCBY',title:'本月', colspan:1,halign:"center",align:"right",formatter: function(value, row, index) {let num = row.JJZCBY;return num.toFixed(2);}},{field : 'JJZCBYLJ',title:'本月止累计', colspan:1,halign:"center",align:"right",formatter: function(value, row, index) {let num = row.JJZCBYLJ;return num.toFixed(2);}},{field : 'SZYEBY',title:'本月', colspan:1,halign:"center",align:"right",formatter: function(value, row, index) {let num = row.SZYEBY;return num.toFixed(2);}},{field : 'SZYEBYLJ',title:'本月止累计', colspan:1,halign:"center",align:"right",formatter: function(value, row, index) {let num = row.SZYEBYLJ;return num.toFixed(2);}}]],formatNoMatches : function() {return '<div style="color: #b8b8b8; height: 15px;"> 暂无数据 </div>';// 如果无数据则显示这个}});这个实现其实不难，但是，没想到的是，接下来的步骤出问题了，因为我们需要实现BootstrapTable重新加载，这种问题有以下两种解决方案：
原始加载的表格
解决后加载表格
最重要的一点，写在最前面：BootstrapTable一个页面只能加载一次；想要重新加载，就必须先销毁，再重新初始化Bootstraptable 。销毁的方法：
$(‘#id’).bootstrapTable(‘destroy’);
好了，接下来我们来看以以下具体实现方式
遇到此问题的情景在table上方添加了文本输入框，用于查询过滤table中的数据，因此需要根据查询条件，重新向后台向DAO层发送请求，返回新的结果。
解决办法原始加载的表格这是一开始进入页面加载的表格。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：