The bootstrap table plug-in dynamically loads the header "header".

Bootstrap Table property is already familiar with, recently encountered a problem, hesitate to load each list of data requirements are different, so need to dynamically replace the header. There are many examples of loading tabular data on the web, but there is no way to find out how to dynamically load the table and add it to the data. Although a table can load a data, but in the attitude of learning to try this way, the results are found to be enforceable. Share the ideas and implementation process for future use.

idea:

1, write the interface, query out to show the column. Note that the interface must have the Chinese name of the field (the title value of the Columns property), the English name of the field (the Columns field), and pay special attention to the filed field should be consistent with the key in the JSON data returned in the last query list, otherwise the value will not be taken.

2, the AJAX request just the interface, query out columns, and to the table of the columns assigned value.

3, loading table display.

The approximate code is as follows:

form:

var peopleoptions; Population list load function Tableitem () {peopleoptions = {method: ' POST '////////////////////
        Api/information/people/getlist ",//Get the address of the data contentType:" application/x-www-form-urlencoded ", or/or post will be an error Striped:false,///table display stripe pagination:true,//Start paging pagesize:10,//per page display number of records pagenumber:1 ,//Current page pagelist: [10, 20, 50],//record number optional list uniqueId: "id", Showcolumns:false,//Show dropdown box Check to select Displayed column Showtoggle:false,//Show toggle attempt (table/card) button Clicktoselect:false,//click Optional SINGLESELECT:FA
        LSE,//Prohibit multiple selection of maintainselected:true,//when clicking the page-stop button or search button, remember the checkbox's selection sortable:true,//disable sorting of all columns Sidepagination: "Server",//representing server-side request Background Paging toolbar: "#toolbar",//indicates a custom toolbar queryparamstype: "Unde Fined ", queryparams:function queryparams (params) {var param = {Pagenumber:params . pageNumber, pageSize:params.pageSize, Orgid:ztreeid, Nodeid:ztreeid, Citizenname: $ ("#fullname"). Val (). Trim (), Sex: $ ("#sex"). Val (), Age: $ ("#a Ge "). val (). Trim (), Identitycode: $ (" #idCard "). Val (). Trim (), CellPhone: $ (" #isMobile "). VA
            L (). Trim (), Adress: $ ("#adress"). Val (). Trim (),};
        return param;
                Onloadsuccess:function () {///Responsehandler:function (RES) {//formatted data when the load succeeds
                Console.log (RES);
                        if (res.data.total!= undefined) tmp = {total:res.data.total,
                Rows:res.data.rows};
                        if (res.data.total = = undefined) tmp = {total:res.data.length, Rows:res.data};
                return TMP; }, Columns: [{checkbox:true, title: ' All Selected ', valign: ' Midd
                Le '}, {title: ' Ordinal ', field: ' Number ', Width: ' 40px ', Align: ' center ', valign: ' Middle ', formatter:indexformatter}, {title: ' Name ', field: ' Citizenname ', align: ' center ', v Align: ' Middle ',}, {title: ' Ages ', field: ' Age ', align: '
            Center ', width:28, valign: ' Middle ', formatter:ageformatter }, {title: ' Gender ', field: ' Sex ', width:28, align: '
             Center ', valign: ' Middle ',},{title: ' ID Number ',   Field: ' Identitycode ', align: ' center ', valign: ' Middle ',}, { Title: ' National ', Field: ' Nation ', align: ' center ', valign: ' Middle '
,}]} $table = $ ("#table"). Bootstraptable (peopleoptions); };

To get columns dynamically:

function GetColumns () {
	//Loading dynamic table
	$.ajax ({
		Url:path + "api/information/people/getlablecolumn?ztreeid=" + Ztreeid,
		type: ' Get ',
		dataType: "JSON",
		Async:false,
		success:function (returnvalue) {
			// Did not query to the corresponding column, show the default column
			if (returnvalue.retcode = = "0") {
				//When the column is not found the previous column to give it
				mycolumns = $table. Bootstraptable (' GetOptions '). Columns[0];
			else {
				//asynchronously gets the column
				var arr = Returnvalue.data to be dynamically generated;
				$.each (arr, function (I, item) {
					Mycolumns.push ({
						"field": Item.labelcolumncode,
						title): Item.labelcolumnname,
						"Hide": true,
						"align": ' Center ',
						' valign ': ' Middle '
					};
			}
			Console.log (mycolumns);
			Return Mycolumns
		}}
	);

Refresh list:

Click on the left tree to reload the table
	$table. bootstraptable (  
	              "Refreshoptions",  
	              {  
	            	Url:path +)/api/peopledatainfo/ Getpeopleinfolist ",//Get the address of the data
	            	columns:mycolumns,
	            	
	              }  
	      );
	  

Note that Bootstrap's table provides two refreshing methods, one refresh, one refreshoptions, the former just refreshes the current table, which updates the components in the table all over again because we have replaced URLs and columns, So you need to call the latter.

Show Effect:

Dynamic loading of headers is like the feeling of dynamically loading data in a echart, just changing the associated attributes across option.

Advantage: The amount of code can be greatly reduced, and it is possible to do so when we want to load different data and style tables.

Disadvantage: style is difficult to maintain. The front end staff is not good at locating bugs, so it is difficult to modify the corresponding style bugs.

According to the actual situation of the project, the use of the preferred bar.