bootstrap的bootstrapTable方法更改直接获取到的数据然后再生成表格或列表

最新推荐文章于 2022-02-17 09:33:36 发布

leanaoo

最新推荐文章于 2022-02-17 09:33:36 发布

阅读量5.4k

点赞数

分类专栏： Javascript 文章标签： bootstrap bootstrapTable

本文链接：https://blog.youkuaiyun.com/leanaoo/article/details/93519991

版权

Javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Bootstrap Table中利用responseHandler参数处理后端返回的数据，实现动态生成表格的内容。

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

直接上代码，主要就是responseHandler的这个参数。

//将扩展字段放入比对条件中
function formatData(data,flag){
	var list = data.data;
	var jdid = '';
    var tabName = '';
	if(flag == 'left'){
		jdid = linkSourceId;
		tabName = "left_table";
	}else if(flag == 'right'){
		jdid = linkTargetId;
		tabName = "right_table";
	}else{
		return data;
	}
	var kzzd = [];
    if(kzzd_filed_struct_map.get(jdid) != undefined) {
   		kzzd = JSON.parse(kzzd_filed_struct_map.get(jdid));
   	}
   	for(var i = 0; i < kzzd.length; i++) {
   		if(kzzd[i].KZTJ != '' && kzzd[i].KZTJ != undefined) {
   			var tempMap = new Map();
   			tempMap.field_name = kzzd[i].FIELDNAME;
   			tempMap.comment = kzzd[i].FIELDCOMMENT;
   			tempMap.table_name = left_right_table_map[tabName];
   			tempMap.type = "character varying(50)";
   			list.unshift(tempMap);
   		}
   	}
   	var resMap = new Map();
   	resMap.data = list;
   	return resMap;
	
}

//加载左表、右表字段数据
function loadLeftRightTable(){
	$('#leftTable').bootstrapTable('destroy').bootstrapTable({
		height:"250",
		dataField:"data",
		search:"true",
	    url: serverUrl+'SysSjzybzd/selectTableFieldInfo?TABLE_NAME='+left_right_table_map["left_table"],
	   //这里是主要，参数返回一个方法的返回值即可，在该方法中更改得到的数据
	    responseHandler: function (res) {
	       return formatData(res,'left');
	    },
	    columns: [{
		    title: '序号',  
		    field: '',  
		    formatter: function (value, row, index) {  
		        return index+1;  
		    }  
		},{
	        field: 'field_name',
	        title: '字段名'
	    }, {
	        field: 'comment',
	        title: '字段描述'
	    }, {
	        field: 'type',
	        title: '字段类型'
	    },
	    {
	    	title:"显示",
   	  		formatter:formatterDisplayField
	    }],
	    onLoadSuccess:function(){
	    	//加载右表字段信息
	    	$('#rightTable').bootstrapTable('destroy').bootstrapTable({
				height:"250",
				dataField:"data",
				search:"true",
			    url: serverUrl+'SysSjzybzd/selectTableFieldInfo?TABLE_NAME='+left_right_table_map["right_table"],
			    responseHandler: function (res) {
	     		  	return formatData(res,'right');
	   			},
			    columns: [{
				    title: '序号',  
				    field: '',  
				    formatter: function (value, row, index) {  
				        return index+1;  
				    }  
				},{
			        field: 'field_name',
			        title: '字段名'
			    }, {
			        field: 'comment',
			        title: '字段描述'
			    }, {
			        field: 'type',
			        title: '字段类型'
			    },
			    {
			    	title:"显示",
		   	  		formatter:formatterDisplayField
			    }]
			});
	    }
	});
}
function formatterDisplayField(value, row, index){
	//遍历table_field_map，初始化复选框 和 displayFieldMap
	for(var key in table_field_map){
	    if(table_field_map.hasOwnProperty(key)){
	        var tableName=key.split("&")[0].split("#")[1];
	        var fieldName=key.split("&")[1];
	        if(row.table_name == tableName && row.field_name == fieldName){
	        	console.log("table_field_map key:  "+key);
	        	displayFieldMap[row.table_name+"&"+row.field_name]=row.comment;
	        	return "<input type='checkbox' id="+row.field_name+" name='"+row.comment+"' checked onclick='doDisplayField(this"+","+JSON.stringify(row)+")'/>";
	        }
	    }
	}
	return "<input type='checkbox'  onclick='doDisplayField(this"+","+JSON.stringify(row)+")'/>";
}