Skip to main content

bootstrapTable数据导入使用



自己写的导入数据,标题是定死的未修改
  1. 动态分割字符串和创建List< Object >,然后直接传array给bookstraptable
var array=new Array()
    for(i=0;i<data.file_datas.length;i++){
         var co=data.file_datas[i].col1.split(",");  //以,为分割拿出每一个数据
json=new Object();   //创建一个对象并赋值
json.col1=co[0];
json.col2=co[1];
          array[i]=json;   //最后格式为List<Object>
    }

实训教师写法,动态生成标题和数据
  1. 动态生成table标题和data内容,主要是在外面传数据和标题格式等方便用法放进bookstrapTable还有怎样获取key
 
function init_csv_table(init_filename){
let data=[];
for(i=0;i<globle_csv_datas.length;i++){
if(globle_csv_datas[i].file_name==init_filename){
data=globle_csv_datas[i].file_datas;
break;
}
}
console.log(data);
//根据init_filename默认生成表格
//老师的
ths=[];
if(data.length>0){
data0=data[0];
for(key in data0){  //拿出对象的key
th={
field:key,
title:key,
visible:true,
}
ths.push(th);
}
}
 
$("#csv-table").bootstrapTable({
columns:ths,
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
        pagination: true,                   //是否显示分页(*)
        sortable: true,                     //是否启用排序
        sidePagination: "client",           //分页方式:client客户端分页,server服务端分页(*)
        pageNumber: 1,                      //初始化加载第一页,默认第一页,并记录
        pageSize: 10,                       //每页的记录行数(*)
        pageList: [10, 20, 30, 40],         //可供选择的每页的行数(*)
        search: true,                      //是否显示表格搜索
        strictSearch: false,
        showColumns: true,                  //是否显示所有的列(选择显示的列)
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        detailView: false,                  //是否显示父子表
})
    $("#csv-table").bootstrapTable("load",data);
}