如何给BootstrapTable静态赋值

梦里梦外; 2021-09-23 14:00 972阅读 0赞

### 如何给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>';// 如果无数据则显示这个
    	    }
        });