学生信息录入系统——Excel的双向交互(赵世强)(共20页)

1、新生(xnshng)信息录入系统该系统(xtng)是一个简单的信息双向的交互系统，没有大型的数据库作为后台的信息存储，而是基于Excel表格程序(chngx)，对数据的双向同步。通过应用HTML语言，通过调用ActiveX控件，利用java语言完成的简单操作。（主要应用的工具是Editplus软件。）1. 首先是Excel表格文件的生成：（指定生成到电脑D盘）。1.1 代码编写如下图：主要源代码如下 Excel的双向交互-延边大学 /javascript xlsxfunction createExcel()/创建(chungjin)一个Excel的应用(yngyng)对象 ActiveXvar

2、 xlobj = new ActiveXObject(Excel.Application);var xlBook = xlobj.Workbooks.Add;/新增一个(y )工作薄var excelSheet = xlBook.Worksheets(1);/拿到工作表/保存为excelSheet.SaveAs(d:新生信息.xlsx);/设置可见excelSheet.Application.Visible = true; 点击创建Excel 1.2 运行：可以通过两种方式进行运行，一是通过editplus进行预览，二是找到生成的.html文件，通过电脑浏览器打开。运行效果如图：注意(zh y

3、)：运行时电脑会提醒ActiveX控件和本页的其他部分的交互可能(knng)不安全，是否允许，点击是方可运行。通过单击运行(ynxng)显示的按钮“点击(din j)创建Excel”观察(gunch)计算机D盘的前后变化：此上步骤我们(w men)便完成交互的第一步，Excel文件的创建，接下来我们就要进行前台操作(cozu)也面的设计，以及数据交互的操作：2. 页面设计(shj)与数据交互2.1 首先是对名称的设定，以及文件浏览的实现 信息管理-新生信息录入系统选择文件 学生(xu sheng)信息表接下来是对按钮与标题的设计，其中包括字体、背景颜色、页面(y min)布局等的设定：.btn

4、width:200px;height:36px;display:block;border:1px solid #0033ff; text-decoration:none;line-height:36px;text-align:center;color:#0033ff;margin:30px auto;border-radius:18px;.btn:hoverbackground:#0033ff;whitebodybackground:#003333;font-family:微软雅黑“；font-size:20px;color:#fff;.boxmargin:0 auto;width:680px

5、;.box h1text-align:center;.titlemargin:0 auto;display: block;width:100px;height:40pxbackground:#0099FF;line-height:40px;text-align:center;border:1px solid #0099FF;border-radius:40px;box-shadow:2px 5px 5px rgba(0,0,0,1);text-shadow:1px 5px 5px rgba(0,0,0,1);font-size:16px; function openBrows() docume

6、nt.getElementById(excelfile).click(); var xlsxObj;var xlsxBook;var excelSheet; / function openExcel()xlsxObj = new ActiveXObject(Excel.Application);var filePath = document.getElementById(excelfile).value;xlsxBook = xlsxObj.WorkBooks.open(filePath);excelSheet = xlsxBook.ActiveSheet;excelSheet.Applica

7、tion.Visible = true;fromExcel();/运行(ynxng)实现后的效果如下图：通过(tnggu)点击“选择(xunz)文件”按钮打开文件，由于暂时没有数据，因此暂时建立一个Excel文件student.xlsx来进行测试运行如图：2.2 下面是对数据项二维表的行的添加(tin ji)，以及二维表属性的设计： 设置一个(y )按钮“添加一行” 添加(tin ji)一行 定义二维表属性栏：序号姓名年龄性别学号接下来是对相关属性的设置tablemargin:0 auto;border-spacing:0px;tdwidth:100px;height:40px;backgro

8、und:#ADADAD;border-right:1px solid #222220;text-align:center;color:black;border-top-radius:6px;.input_textwidth:100%height:40px;border:0px;background:#003366;color:#fff;border-radius:6px;text-align:center;对二维表添加行的设计function addRows()var tab = $(dataTable);var rowIndex = tab.rows.length;var newTr = t

9、ab.insertRow(rowIndex);var noTd = newTr.insertCell(0);rowIndex+noTd.innerHTML = ;/序号var nameTd = newTr.insertCell(1);nameTd.innerHTML = ;/姓名(xngmng)var ageTd = newTr.insertCell(2);ageTd.innerHTML = ;/年龄(ninlng)var sexTd = newTr.insertCell(3);sexTd.innerHTML = ;var QQTd = newTr.insertCell(4);/学号QQTd.

10、innerHTML = ;运行后得到的页面(y min)效果：2.3 实现主页面数据与Excel表格数据的双向交互：设置两个个按钮“同步数据到Excel”和“Excel同步数据到页面”同步到ExcelExcel同步到页面接下来对属性进行相应设置：function fromExcel()var i = 2;/var hasRow =true;/var str =;var tab = $(dataTable);/获取表格(biog)对象var rowCount = tab.rows.length;for (j= rowCount-1;j0;j-)tab.deleteRow(j);while (ha

11、sRow)/var newTr = tab.insertRow(tab.rows.length);var noTd = newTr.insertCell(0);/noTd.innerHTML = ;var nameTd = newTr.insertCell(1);nameTd.innerHTML = ;var ageTd = newTr.insertCell(2);ageTd.innerHTML = ;var sexTd = newTr.insertCell(3);sexTd.innerHTML = ;var QQTd = newTr.insertCell(4);QQTd.innerHTML

12、= ;i+;if (excelSheet.Cells(i,1).Value = undefined)hasRow =false;/同步(tngb)到excelfunction toExcel()var tab = $(dataTable)alert($(txt02).value);for(i=2;i=tab.rows.length;i+)excelSheet.Cells(i,1).Value = $(txt0+i).value;excelSheet.Cells(i,2).Value = $(txt1+i).value;excelSheet.Cells(i,3).Value = $(txt2+i

13、).value;excelSheet.Cells(i,4).Value = $(txt3+i).value;excelSheet.Cells(i,5).Value = $(txt4+i).value;运行后得到(d do)整体的页面效果：3. 已经完成全部的代码(di m)编写，接下来就是测试运行。3.1 首先选择(xunz)文件3.2打开(d ki)文件student.xlsx在Excel文件(wnjin)中显示的数据为3.3在Excel中添加一行(yxng)数据：5 赵世强 23 男 21240053.4在页面(y min)中点击“Excel同步(tngb)到页面”成功(chnggng)完

14、成Excel数据与页面的同步3.5接下来在页面添加一行输入数据：6 杨波 22 男 21240063.6点击(din j)“同步到Excel”到Excel文件(wnjin)中查看是否运行成功：测试结果表明程序成功的运行了，实现(shxin)了Excel的双向交互下面(xi mian)是完整的代码： Excel的双向交互(jioh)-zsq .btnwidth:200px;height:36px;display:block;border:1px solid #0033ff; text-decoration:none;line-height:36px;text-align:center;color

15、:#0033ff;margin:30px auto;border-radius:18px;.btn:hoverbackground:#0033ff;whitebodybackground:#003333;font-family:微软雅黑“；font-size:20px;color:#fff;.boxmargin:0 auto;width:680px;.box h1text-align:center;.titlemargin:0 auto;display: block;width:100px;height:40pxbackground:#0099FF;line-height:40px;text-

16、align:center;border:1px solid #0099FF;border-radius:40px;box-shadow:2px 5px 5px rgba(0,0,0,1);text-shadow:1px 5px 5px rgba(0,0,0,1);font-size:16px;tablemargin:0 auto;border-spacing:0px;tdwidth:100px;height:40px;background:#ADADAD;border:1px solid #222220;text-align:center;color:black;border-radius:6

17、px;.input_textwidth:100%height:40px;border:0px;background:#003366;color:#fff;border-radius:6px;text-align:center; /javascript function createExcel()var xlobj = new ActiveXObject(Excel.Application);var xlBook = xlobj.Workbooks.Add;/新增一个(y )工作薄var excelSheet = xlBook.Worksheets();/excelSheet.SaveAs(e:

18、zhao.xlsx);/excelSheet.Application.Visible = true; / function openBrows() document.getElementById(excelfile).click(); var xlsxObj;var xlsxBook;var excelSheet; / function openExcel()xlsxObj = new ActiveXObject(Excel.Application);var filePath = document.getElementById(excelfile).value;xlsxBook = xlsxO

19、bj.WorkBooks.open(filePath);excelSheet = xlsxBook.ActiveSheet;excelSheet.Application.Visible = true;fromExcel();/ function fromExcel()var i = 2;/var hasRow =true;/var str =;var tab = $(dataTable);/获取表格(biog)对象var rowCount = tab.rows.length;for (j= rowCount-1;j0;j-)tab.deleteRow(j);while (hasRow)/var

20、 newTr = tab.insertRow(tab.rows.length);var noTd = newTr.insertCell(0);/noTd.innerHTML = ;var nameTd = newTr.insertCell(1);nameTd.innerHTML = ;var ageTd = newTr.insertCell(2);ageTd.innerHTML = ;var sexTd = newTr.insertCell(3);sexTd.innerHTML = ;var QQTd = newTr.insertCell(4);QQTd.innerHTML = ;i+;if

21、(excelSheet.Cells(i,1).Value = undefined)hasRow =false;/新增一行(yxng)function addRows()var tab = $(dataTable);var rowIndex = tab.rows.length;var newTr = tab.insertRow(rowIndex);var noTd = newTr.insertCell(0);rowIndex+noTd.innerHTML = ;/序号var nameTd = newTr.insertCell(1);nameTd.innerHTML = ;/姓名(xngmng)var ageTd = newTr.insertCell(2);ageTd.innerHTML = ;/年龄(ninlng)var sexTd = newTr.insertCell(3