如何给BootstrapTable静态赋值

本文介绍如何使用BootstrapTable展示从后台处理并返回的数据,包括数据格式化及表格配置,实现预览功能。

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

如何给BootstrapTable静态赋值

今天要做一个报表导入并预览的功能,使用layui的文件上传,获取表格数据,接着把表格数据返回前台,使用bootstraptable展示,实现一个预览表格数据的效果。

通过后台处理后的数据

// 数据经过处理后,真实数据已做修改
Data = [
	{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>';// 如果无数据则显示这个
	    }
    });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值