昨天和两个做开发的朋友聊天，对于我还在使用LayUI感到奇怪，我也没有多解释，毕竟LayUI对于做一些中小型的开发还是不错的，前端的框架中，熟悉了一个其他的也差之不多。但LayUI的资料不细致是个很大的缺憾。
用户提出有一个Excel表的记录要导入，这个是基本要求，肯定要满足。
2006年，我用PowerBuilder写过一个通用的导入程序，程序上也不难。
用前端框架来完成会有一点麻烦，主要在于
1、数据回显
如果是让用户选择一个Excel文件然后就直接入库，那程序就太简单了，问题是要先让用户看到结果，可能的话还可以修改，然后再保存到数据库中。
2、数据保存
因为以前C/S开发使用的是强连接，操作数据后直接提交即可；但现在前端和后端是弱连接，一次交互就需要配置相应参数才可能保存数据，动态的表格保存就有一点小麻烦。
作为一般性的要求，这个程序肯定是要应对数据库中的所有表。
那么只能先将数据表的字段设置传到PHP中，然后PHP提取Excel记录，按照LayUI对表记录的要求封装数据，传回到前端。
具体做法：
1、在数据库中创建表，记录要导入的表信息；
2、在前端列出表，让用户选择要导入的表；
3、根据选择的表，确定字段参数即对应的Excel列；
4、将前端选择传入到PHP中，提取Excel记录，传回前端；
5、用户确定要保存数据，点击保存，数据入库。
一天完成，功能全部正常，后面需要加入一些错误检测，还有文件名应该使用用户名加随机数来存储，这样可以防止多用户冲突，读取完删除。
这个程序主要涉及的就是动态对象、动态属性的创建与赋值。
完成的界面：
程序前端代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
|
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>〖通用Excel数据表导入〗</title>
<metaname="renderer"content="webkit">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1">
<linkrel="stylesheet"href="../lib/layui-v2.6.3/css/layui.css"rel="external nofollow" media="all">
<linkrel="stylesheet"href="../css/public.css"rel="external nofollow" media="all">
<scriptsrc="../lib/layui-v2.6.3/layui.js"charset="utf-8"></script>
<style>
body { background-color: #ffffff; }
</style>
</head>
<body>
<divclass="layui-form layuimini-form">
<formclass="layui-form login-bottom"lay-fiter="ZTBUserEdit">
<divclass="layui-tab">
<ulclass="layui-tab-title">
<liclass="layui-this">导入设置</li>
<li>导入的数据表记录</li>
</ul>
<divclass="layui-tab-content">
<divclass="layui-tab-item layui-show">
<divstyle="width: 1000px;">
<divclass="layuimini-container">
<divclass="layuimini-main">
<divclass="layui-form layuimini-form"style="white-space:nowrap!important;">
<divclass="layui-form-item">
<labelclass="layui-form-label">选择要导入的表</label>
<divclass="layui-input-block">
<selectid="tableList"lay-filter="tableListFilter">
<optionvalue=""></option>
</select>
</div>
</div>
<divclass="layui-form-item">
<labelclass="layui-form-label">Excel文件</label>
<divclass="layui-input-inline"style="width: 400px;">
<inputtype="text"name="Dc05"id="Dc05" value=""style="width: 400px;"class="layui-input"disabled="disabled">
</div>
<divclass="layui-input-inline">
<buttontype="button"class="layui-btn layui-btn-sm layui-btn-normal"style="width: 100px;height: 39px;"id="selectExcel">选择Excel文件</button>
<inputtype='file'id='readFile'style="opacity: 0;border: 0px solid #1e9fff;">
</div>
</div>
<divclass="layui-form-item"style="padding-left: 41px;">
<divclass="layui-input-inline">
<labelclass="layui-form-label">工作簿序号</label>
<inputtype="number"id="excelSetSheet" value="1"class="layui-input"style="width: 50px;">
</div>
<divclass="layui-input-inline">
<labelclass="layui-form-label">起始行号</label>
<inputtype="number"id="excelSetStartRow" value="4"class="layui-input"style="width: 50px;">
</div>
<divclass="layui-input-inline">
<labelclass="layui-form-label">结束行号</label>
<inputtype="number"id="excelSetEndRow" value="33"class="layui-input"style="width: 50px;">
</div>
<buttonclass="layui-btn layui-btn-normal"lay-submitlay-filter="getData"style="width: 100px;height: 39px;">提取数据</button>
</div>
</div>
<tableclass="layui-hide"id="currentTableIdSet"lay-filter="currentTableFilterSet"></table>
</div>
</div>
</div>
</div>
<divclass="layui-tab-item">
<buttonclass="layui-btn layui-btn-normal"lay-submitlay-filter="saveBtn">保存数据</button>
<tableclass="layui-hide"id="currentTableIdTwo"lay-filter="currentTableFilterTwo"></table>
</div>
</div>
</div>
</form>
</div>
<script>
let tableNameList;
let selectTableName;
let tableTotalCount;
let submitData=[];//准备一个空数组
let fieldSet=[];//字段设置
let dbRows={};//Excel记录的行对象
let colSet=[];
let colSetChild=[];
let dbDataRecordCount;
layui.use(['layer','form','table'], function () {
var form = layui.form;
var layer = layui.layer;
var $ = layui.$;
var table = layui.table;
document.getElementById('selectExcel').addEventListener('click',function(){
$("#readFile").trigger("click");
});
document.getElementById('readFile').addEventListener('change',function(){
if(this.files.length===0){
layer.msg('没有选择文件！',{time:3000,icon:5});
return;
}
if(this.files[0].name.split('.')[1]!='xls'){
layer.msg('请选择Excel文件！',{time:3000,icon:5});
return;
}
let reader=new FileReader();
reader.onload=function (){ console.log(reader.result); }
document.getElementById('Dc05').value=this.files[0].name;
})
//得到数据表的名称列表
$.ajax({
url:'ZTBexcelDataIn.php',
data:{"OP":"getTableList"},
type:'POST',
async:false,
success:function (data) {
tableNameList = data['data'];
//在数组中找到对应的编码
for(var i=0;i<tableNameList.length;i++){
$('#tableList').append(new Option(tableNameList[i].c02, tableNameList[i].c02));
}
},error:function(data){
console.log(data);
}
});
form.render();
form.on('submit(getData)', function (data) {
data= data.field;
lettempData=newObject();//准备一个空对象
tempData.excelSheet=document.getElementById("excelSetSheet").value;
tempData.excelSetStartRow=document.getElementById("excelSetStartRow").value;
tempData.excelSetEndRow=document.getElementById("excelSetEndRow").value;
letaddData=newObject();
addData.excelSet=tempData;
submitData.push(addData);
for(leti=0;i<=tableTotalCount-1;i++){
tempData=newObject();
tempData.C02=$("#currentTableIdSet").next().find("tbody tr[data-index='" +i +"'] td[data-field='c02'] div").html();//字段英文名
tempData.C03=$("#currentTableIdSet").next().find("tbody tr[data-index='" +i +"'] td[data-field='c03'] div").html();//字段汉字名称
tempData.C09=$("#currentTableIdSet").next().find("tbody tr[data-index='" +i +"'] td[data-field='c09'] div").html();//字段对应的Excel列
fieldSet.push(tempData);
dbRows[tempData.C02]='';
colSetChild={};
colSetChild['field']=tempData.C02;
colSetChild['title']=tempData.C03;
colSetChild['width']=100;
colSet.push(colSetChild);
}
submitData.push(fieldSet);
//准备提取数据
letexcelFile=document.getElementById('readFile');
//用FormData对象对表单数据进行封装
constfd=newFormData();//FormData构造器接收的是一个form的DOM对象
fd.append("excelFile",excelFile.files[0]);//excel文件数据
fd.append("excelSet",JSON.stringify(submitData));//设置
fd.append("dbRows",JSON.stringify(dbRows));//行对象
fd.append("OP",'getSet');
$.ajax({
url: 'ZTBexcelDataIn.php',
type: "POST",
data: fd,
dataType: "JSON",
async: true,
processData: false,//设置为false,JQuery则不对数据进行序列化
contentType: false,//设置为false，JQuery则不设Content-Type请求头
beforeSend: function(xhr){},
complete: function(xhr,status){},
error: function(xhr,status,error){},
success: function(result){
//刷新数据记录表
table.render({
elem: '#currentTableIdTwo',
data:result['data'],
cols: [colSet],
done: function (res, curr, count) {
dbDataRecordCount=res.data.length;
}
});
}
});
return false;
})
//监听下拉列表的点击事件
form.on('select(tableListFilter)', function(data){
letselectItemName=data.value; //选择的单位名称
//选择的具体表
selectTableName=tableNameList.find(element=>element.c02==selectItemName ).c01;
//提取具体的设置信息
table.render({
elem: '#currentTableIdSet',
url: 'ZTBexcelDataIn.php',
method:'POST',
where:{
"OP":"getSetList",
"selectTable":selectTableName},
cols: [[
{field: 'c01', width: 80, title: '表的名字', hide: true},
{field: 'c02', width: 120, title: '字段英文名称'},
{field: 'c03', width: 150, title: '字段汉字名称'},
{field: 'c09', width: 120, title: '对应的Excel列号',edit: 'number'},
{field: 'c04', width: 100, title: '数据类型'},
{field: 'c05', width: 100, title: '长度'},
{field: 'c06', width: 120, title: '能否为空'}
]],
done: function (res, curr, count) {
tableTotalCount=res.data.length;
}
});
});
form.on('submit(saveBtn)', function (data) {
for(let K=0;K<dbDataRecordCount;K++){
letinsertSql='';
letassignSql='';
for(leti=0;i<tableTotalCount;i++){
lettempFieldName='';
let tempFiedData;
lettempFieldType='';
tempFieldName=$("#currentTableIdSet").next().find("tbody tr[data-index='" +i +"'] td[data-field='c02'] div").html();
tempFieldType=$("#currentTableIdSet").next().find("tbody tr[data-index='" +i +"'] td[data-field='c04'] div").html();
if(insertSql==''){
insertSql=tempFieldName;
}else{
insertSql=insertSql +"," +tempFieldName;
}
tempFiedData=$("#currentTableIdTwo").next().find("tbody tr[data-index='" + K +"'] td[data-field='"+tempFieldName+"'] div").html()
if(tempFiedData=='undefined' || tempFiedData==null){
if(tempFieldType=='INTEGER' || tempFieldType=='DECIMAL'){
tempFiedData=0;
}else{
tempFiedData='';
}
}
if(assignSql==''){
if(tempFieldType=='INTEGER' || tempFieldType=='DECIMAL'){
assignSql=tempFiedData;
}else{
assignSql="'"+tempFiedData+"'";
}
}else{
if(tempFieldType=='INTEGER' || tempFieldType=='DECIMAL'){
assignSql=assignSql+","+tempFiedData;
}else{
assignSql=assignSql+",'"+tempFiedData+"'";
}
}
}
//提交数据
$.ajax({
url:'ZTBexcelDataIn.php',
data:{
"OP":"saveData",
"insertSql":insertSql,
"assignSql":assignSql,
"tableName":selectTableName
},
type:'POST',
async:false,
success:function (data) {
},error:function(data){}
});
}
return false;
});
});
</script>
</body>
</html>
|
后端PHP代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<?php
require_once'reader.php';//加载Reader
require'ZTBlinkConfig.php';
$ZTBConn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$strFalse="";
$continue=true;
$srcAddr="http://XX.XX.XX.XX";
$returnArr=[];//准备返回的数组
if(array_key_exists('HTTP_ORIGIN',$_SERVER)) {
$origin=$_SERVER['HTTP_ORIGIN'];
}elseif(array_key_exists('HTTP_REFERER',$_SERVER)) {
$origin=$_SERVER['HTTP_REFERER'];
}else{
$origin=$_SERVER['REMOTE_ADDR'];
}
if(substr($origin,0,15)!=substr($srcAddr,0,15)){
$continue=false;
$strFalse="拒绝访问".substr($origin,0,15)."!";
}
if(!$_SESSION[XxxYyyy']){
$continue=false;
$strFalse="请登录!";
}
if($continue){
$OP=!empty($_POST['OP']) ?$_POST['OP'] :'';//得到操作类型
switch($OP){
case'getTableList'://数据表列表
$sql="SELECT c01,c02 FROM dawnTable";
$result=$ZTBConn->query($sql);
$rows=$result->fetchAll(PDO::FETCH_ASSOC);
$returnArr['data']=$rows;
break;
case'getSetList'://具体表的字段设置项目
$selectTable=$_POST['selectTable'];
$sql1="SELECT count(*) FROM dawnField where c01='$selectTable'";
$res=$ZTBConn->query($sql1);
$rows=$res->fetch();
$rowCount=$rows[0];
$returnArr['code']=0;
$returnArr['msg']="";
$returnArr['count']=$rowCount;
$sql="SELECT c01,c02,c03,c04,c05,c06,c07,c08,c09 FROM dawnField where c01='$selectTable'";
$result=$ZTBConn->query($sql);
$rows=$result->fetchAll(PDO::FETCH_ASSOC);
$returnArr['data']=$rows;
break;
case'getSet':
$uploadFile=$_FILES["excelFile"];//得到上传的文件
$excelBlob=file_get_contents($uploadFile['tmp_name']);
file_put_contents("./TempFile/123.xls",$excelBlob, FILE_APPEND);//将文件内容写到磁盘上
$excelData=newSpreadsheet_Excel_Reader();//创建 Reader
$excelData->setOutputEncoding('utf-8');//设置文本输出编码
$excelData->read("./TempFile/123.xls");//读取Excel文件
//准备提取数据
$excelSet=json_decode($_POST['excelSet'],true);//gettype($excelSet[0])
$dbRows =json_decode($_POST['dbRows'],true);
$excelSetStartRow=$excelSet[0]['excelSet']['excelSetStartRow'];//起始行
$excelSetEndRow =$excelSet[0]['excelSet']['excelSetEndRow'];//结束行
$excelSheet=$excelSet[0]['excelSet']['excelSheet']-1;//工作簿序号
$returnArr['code']=0;
$returnArr['msg']="";
$returnArr['count']=$excelSetEndRow-$excelSetStartRow+1;
$data=[];
try{
for($i=$excelSetStartRow;$i<=$excelSetEndRow;$i++) {
for($K=0;$K<sizeof($excelSet[1]);$K++){
$fieldName=$excelSet[1][$K]['C02'];//字段名称
$fieldExcelCol=$excelSet[1][$K]['C09'];//字段对应的列
$fieldType=$excelSet[1][$K]['C03'];//字段数据类型
if( isset($excelData->sheets[$excelSheet]['cells'][$i][$fieldExcelCol] )){
$fieldData=$excelData->sheets[$excelSheet]['cells'][$i][$fieldExcelCol];
}else{
$fieldData='';
}
//装入数组
$dbRows[$fieldName]=$fieldData;
}
array_push($data,$dbRows);
}
}catch(PDOException$e){
$returnArr['data']=$e.getMessage();
}
$returnArr['data']=$data;
break;
case'saveData':
$insertSql=$_POST['insertSql'];
$assignSql=$_POST['assignSql'];
$tableName=$_POST['tableName'];
try{
$sql="insert into $tableName($insertSql) values($assignSql)";
$result=$ZTBConn->exec($sql);
if($result>0 ) {
$returnArr['data']='OK';
}else{
$returnArr['data']="数据插入错误！";
}
}catch(Exception$exception){
$returnArr['data']=$exception->getMessage();
}
break;
default:
$returnArr['data']="不支持的操作！";
break;
}
}else{
$returnArr=$strFalse;
}
header('Content-type:text/json');
echojson_encode($returnArr,JSON_UNESCAPED_UNICODE);//返回JSON格式的数据
?>
|
这个程序虽然简单，但是应用的地方还是挺多的，有必要后面再对这个程序进行完善。
以上就是基于PHP制作通用的Excel导入程序的详细内容
扫描二维码，在手机上阅读
版权说明
文章采用： 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。版权声明：未标注转载均为本站原创，转载时请以链接形式注明文章出处。如有侵权、不妥之处，请联系站长删除。敬请谅解！
