BootstrapTable重新初始化

童心同萌

已于 2022-08-25 21:28:55 修改

阅读量1.2w

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端

于 2018-11-01 17:48:00 首次发布

本文链接：https://blog.youkuaiyun.com/tongxin_tongmeng/article/details/83624339

本文详细介绍如何正确初始化Bootstrap Table，特别是在需要重复初始化时的处理方法。文章解释了为何在再次初始化前必须先销毁已存在的表格，并提供了一个具体示例，展示了如何设置参数以满足特定需求，包括URL配置、分页、搜索、高度调整等。

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

已经初始化的bootstrap table必须先销毁才可以再次初始化

function initQuoteReportTable(row){
	$('#quoteReport_table').bootstrapTable('destroy');    //先销毁才可再次初始化
	var projectName = row.PROJECT_NAME;
	var compositeName = row.COMPOSITE_NAME;
	var derDesignName = row.DER_DESIGN_NAME;
	var derHarnessPN = row.DER_HARNESSPN;
	var derDesignVersion = row.DER_DESIGN_VERSION;
	var instanceName = $("#instanceName").val();
	var $table = $("#quoteReport_table");
	$table.bootstrapTable({
		url : boot+"/vave/cavityAndCostList",
		toolbar: '#toolbar',
		striped: true,
		cache: false,
//		search: true,
		height: 400,
		pagination: true,
		pageSize: 50,
		pageList: [10, 25, 50, 100, 200],
		clickToSelect: true,
		sidePagination: 'server',
		queryParams:function(params){
			var pageNo = parseInt(params.offset/params.limit) + 1;
			return {
//				searchAll: params.search,
				pageSize: params.limit,
				pageNo: pageNo,
				projectName: projectName,
				compositeName: compositeName,
				derDesignName: derDesignName,
				derHarnessPN: derHarnessPN,
				derDesignVersion: derDesignVersion,
				instanceName: instanceName
			};
		},
		columns: [{
			field: 'RELATED_CAVITY',
			title: 'RelatedCavity',
//			visible: false,
			/*formatter: function (value, row, index) {
				return value.length>15?value.substring(0,15)+"...":value;
			},*/
			editable:{
				type:"text",
				title:"cavity",
			}
		},{
			field: 'THIS_COST',
			title: 'Cost',
//			visible: false,
			/*formatter: function (value, row, index) {
				return value.length>15?value.substring(0,15)+"...":value;
			},*/
			editable:{
				type:"text",
				title:"cavity",
			}
		}/*,{
			field: 'OPERATE',
			title: 'Operate',
			width : 100,
			formatter: function (value, row, index) {
				return [
					'<a class="selectReportItem" href="javascript:void(0)" title="Select">',
					'<i class="glyphicon glyphicon-ok"></i>Select',
					'</a>'
				].join('');
			},
			events: {
				'click .selectReportItem': function (e, value, row, index) {
					$('#quoteReport_model').modal('hide');
					addReportItemByQuote(row);
				}
			}
		}*/]
	});
};