天天看点

如何给BootstrapTable静态赋值

如何给BootstrapTable静态赋值

      • 通过后台处理后的数据
      • 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>';// 如果无数据则显示这个
	    }
    });