bootstrap表格常用

1. 复杂表头

	$("#datatable").bootstrapTable({
        url : root() + '/xx',
		undefinedText : '0',
		pagination : false, // 分页
		striped : false, // 是否显示行间隔色
		queryParams : queryParams,
		queryParamsType : 'limit',
		paginationLoop : false, // 启用分页条无限循环的功能
		cache : false, // 是否使用缓存
		pageNumber : 1,
		pageSize : 50,
		pageList : [50,100,200],
		showColumns : false, // 显示隐藏列
		showRefresh : false, // 显示刷新按钮
		clickToSelect: true,
		columns :  getColumns(),
		onDblClickRow:function(row,tr,field){}
	});
//设置参数
function queryParams(){
	var param = {};
	param.year = $("#statYearSelect").val();
	return param;
}

//动态获取列
function getColumns() { 
	var myColumns1=new Array();
	var myColumns2=new Array();
	myColumns2.push({title: "数据库名称",field : 'name',valign:"middle",align:"center",colspan: 1,rowspan: 2,width:"30%"});
	var myColumns3=new Array();
    // 加载动态表格  
    $.ajax({  
        url : root() + "/xx", 
        type : "POST",  
        dataType : "json",  
        async : false,  
        success : function(result) { 
            // 未查询到相应的列,展示默认列  
            if (result.success) {  
                // 异步获取要动态生成的列  
            	var types = result.data.types; 
                var years = result.data.years;  
            	$.each(types, function(j, item1) { 
            		myColumns2.push({title: item1,valign:"middle",align:"center",colspan: years.length,rowspan: 1,width:"23%"}); 
            		$.each(years, function(i, item2) { 
            			 myColumns3.push({  
                             "field" : item1+item2,  
                             "title" : item2,  
                             "hide" : true,  
                             "align" : 'center',  
                             "valign" : 'middle',
                             formatter : function(value, row, index) {
                 				if(value==-1){
                 					return "-";
                 				}
                 				return value;
                 			}
                         }); 
                    });  
            	});
            }  
        }  
    });  
	myColumns1.push(myColumns2);
    myColumns1.push(myColumns3);
    return myColumns1;  
}


2.刷新栏位

$("#datatable").bootstrapTable("refreshOptions",{columns : getColumns()});

猜你喜欢

转载自blog.csdn.net/xinyuebaihe/article/details/80885317