[Tutorial] layui custom export function

demand:

  1. The data table is displayed in pages, each page can only display 10 pieces of data, the export button can only export these 10 pieces, all data needs to be exported

  2. If there is an ID number in the exported data, it will become scientific notation

  3. The gender in the database is 1 and 2. When exporting, male and female are displayed

Solution 1: Reference: https://www.cnblogs.com/yuanshen/p/11165223.html

1.

<table id="table1" lay-filter="table1"></table>
<div style="display: none;"><table id="table2" lay-filter="table2"></table></div>

The data table table1 displays the paging data normally, table2 is used to export all the data, and set to hide

table1 At initialization, specify a custom Export button Note: If you customize the buttons are not properly displayed, indicating layui version is too low, please go to the official website to download the latest version, layui version I am using 2.5.6, as follows:

,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
	,defaultToolbar: [{ //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
      title: '导出所有信息(按专业筛选)'
      ,layEvent: 'exports1'
      ,icon: 'layui-icon-export'
    }, { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
      title: '导出所有信息(已缴费)'
      ,layEvent: 'exports2'
      ,icon: 'layui-icon-template-1'
    }]

Table2 is as follows:

//导出表格配置
  table.render({
	  elem: '#table2',
	  id: 'exportTable',
	  title: '导出的文件名',
	  url: 'ajaxstudents.php' ,
	  cols: [[ //表头
		  {field: 'sid', title: '编号', align:'center', width:80}
		  ,{field: 'realname', title: '姓名', align:'center', width:130}
		  ,{field: 'identity', title: '身份证号', align:'center', minWidth: 330, width:180}
		  // ,{title: '性别', width:130, align:'center', toolbar: '#toolbar2'}	
		  ,{field: 'sex', title: '性别' }
		  ,{field: 'mname',  title: '报考专业'}
	  ]]
  });

To monitor the export button of table1, the code is as follows:

table.on('toolbar(table1)', function(obj){
		// console.log("print");
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
		  case 'exports1':
			$.ajax({
			  url: "ajaxstudentsall.php",
			  type: 'post',
			  data: {
				  type: 1
			  },
			  async: false,
			  dataType: 'json',
			  success: function (res) {
				  //使用table.exportFile()导出数据
				  table.exportFile('exportTable', res.data, 'xls');
			  }
			});
			// table.exportFile('exportTable', res.data, 'xls');
		  break;
	}
});

2. In the back-end code, add a tab after reading the ID number

&#9;

Such as:

$strjson.='"identity":"'.$rstInfo["identity"].'&#9;",';

The effect is as follows:

image.png

Some solutions on the Internet are to add spaces at the end

&nbsp;

There will be an extra space after the exported data. Although the function is realized, it is not perfect

3. Modify the code on the backend

$strjson.='"sex":"'.($rstInfo["sex"]=="1"?"男":"女").'",';



Solution two:

Set directly in the sql statement:

select concat(identity,'&#9;') as identity,if(sex=1,'男','女') as sex from table1


Guess you like

Origin blog.csdn.net/hifhf/article/details/107311532