鞠宏軍 杜麗娟

摘要：該文結(jié)合實(shí)際應(yīng)用，以重修成績單錄入為例，詳細(xì)闡述了基于Web頁面的批量數(shù)據(jù)錄入控制及實(shí)現(xiàn)。該方法有效避免了以往Web頁面錄入，鍵盤輸入和鼠標(biāo)操作頻繁交替，輸入焦點(diǎn)控制能力差，數(shù)據(jù)上傳有延時(shí)，數(shù)據(jù)量大錄入明顯變慢的問題，有效地提高了教務(wù)管理的工作效率，具有良好的實(shí)用性、先進(jìn)性和推廣價(jià)值。該錄入控制程序，既可以直接應(yīng)用于其他基于asp.net技術(shù)的管理系統(tǒng)中，也可為jsp、php等頁面錄入控制實(shí)現(xiàn)提供良好的設(shè)計(jì)思路。

關(guān)鍵詞：asp.net；web頁面；數(shù)據(jù)錄入；管理系統(tǒng)

中圖分類號：TP315文獻(xiàn)標(biāo)識碼：A文章編號：1009-3044(2012)07-1473-05

Batch Data Inputing Control and Implementation of Web Table

JU Hong-jun1, DU Li-juan2

(1.Department of Computer Science, North China Institute of Science and Technology, Beijing 101601,China; 2.Department of Telecom, North China Institute of Science and Technology, Beijing 101601, China)

Abstract: Combined with practical application and exampled with inputing of revampment credit, Web table -based.input control and implementation of batch data are introduced in detail. The method proposed effectively avoids some defects such as frequently alternation of keyboard and mouse, difficult control of input focus, larger delay in data uploading and low speed with large volume of data entry. The method improves the efficiency of educatonal administration significantly and has good usability, advancement and promotional value. It not only can be directly applied to asp.net-based management system, but also offers idea for designment of Jsp, php related input control system.

Key words: asp.net; web table; data input; management system

隨著基于B/S結(jié)構(gòu)信息管理系統(tǒng)應(yīng)用的迅速普及，Web頁面的錄入需求也越來越多，如果少量、分散、固定樣式的數(shù)據(jù)，Html的Form表單提供了輸入框、單選、復(fù)選、菜單等多種錄入選擇，比較容易實(shí)現(xiàn)，但若需要錄入的數(shù)據(jù)量比較大，則處理比較困難，即使實(shí)現(xiàn)了錄入頁面也不像單機(jī)、C/S模式界面錄入，或者Excel錄入那么方便。經(jīng)常會出現(xiàn)，鍵盤輸入和鼠標(biāo)操作頻繁交替，輸入焦點(diǎn)獲取和控制能力較差，受網(wǎng)絡(luò)速度影響，數(shù)據(jù)上傳有延時(shí)，并且隨數(shù)據(jù)量越大上傳延時(shí)也越大。本文結(jié)合重修管理系統(tǒng)、期末考試考務(wù)管理系統(tǒng)的實(shí)際應(yīng)用，通過后臺Asp.net對Form表單進(jìn)行循環(huán)處理，JavaScript輸入框焦點(diǎn)控制，提交數(shù)據(jù)的每條更新，實(shí)現(xiàn)了和Excel類似的批量、靈活、動態(tài)、實(shí)時(shí)的數(shù)據(jù)輸入。

1重修成績單錄入需求分析

重修是學(xué)生沒有通過課程考核，重新修讀該課程，并再次參加課程考核。重修班級的成績單填報(bào)比正常教學(xué)班級更復(fù)雜、繁瑣，因?yàn)槟嘲?00人，可能是由30-40個(gè)自然班中不及格的學(xué)生所組合而成的。如果用手工填報(bào)成績，每個(gè)自然班需要填寫4份，一個(gè)重修班就要寫120多份成績單。即使每班填寫1份再去復(fù)印，也要填寫30-40份，并且好多象課程名稱、系部班級等填寫項(xiàng)都是重復(fù)的，成績匯總前的試卷按班級分揀也很麻煩，不但工作量大、重復(fù)、繁瑣，而且容易出錯(cuò)。因此，重修班級的成績更加需要、適合在網(wǎng)上填報(bào)，自動分班打印輸出。為方便教務(wù)管理人員、任課教師及學(xué)生的使用，重修系統(tǒng)采用B/S結(jié)構(gòu)。

基于web頁面的批量數(shù)據(jù)錄入，也有許多解決方案。如：用友華表cell插件、FlexCell控件、神農(nóng)氏SmartGrid for Asp.net表格控間等，均可以實(shí)現(xiàn)頁面表格的輸入處理，但以上各控件需要收費(fèi)，功能側(cè)重web打印報(bào)表處理，并且安裝使用下載較復(fù)雜；再有如Jquery、Ext的表格插件，使用起來也比較復(fù)雜。因此，本例采用簡單的asp.net循環(huán)，和JavaScript，實(shí)現(xiàn)了Web頁面的批量錄入，和實(shí)時(shí)上傳。

2重修成績單錄入頁面控制及實(shí)現(xiàn)

在進(jìn)行重修成績填報(bào)時(shí)，系統(tǒng)先按教師把所有學(xué)生數(shù)據(jù)讀取到頁面上，再按姓名填寫成績并更新到數(shù)據(jù)庫中；同時(shí)，各重修課程、各教師重修的人數(shù)差別很大，有的幾個(gè)人，有的上百人，為方便處理，錄入成績頁面按每頁15人分頁處理，每次刷新錄入頁面時(shí)，需要先判斷當(dāng)前所在頁數(shù)；為防止數(shù)據(jù)上傳的更新延遲，系統(tǒng)采用每輸入一個(gè)人成績，提交上傳一次數(shù)據(jù)，因此在提交處理程序和錄入成績頁面中也要判斷，當(dāng)前正在處理的記錄是那一條；為避免以往鼠標(biāo)、鍵盤交替輸入的麻煩，錄入頁面沒有設(shè)置提交按鈕，每次輸入數(shù)據(jù)回車，激活提交action程序，并且提交一條記錄后，光標(biāo)通過JavaScript控制自動轉(zhuǎn)到下一學(xué)生成績輸入框。具體成績輸入頁面關(guān)鍵代碼如下：

＜!--#include file="../database/conn.asp"--＞

＜%

pys=request("ys")rem返回當(dāng)前處理頁面

pnum=request("num")rem返回當(dāng)前處理記錄指針，用于設(shè)置焦點(diǎn)

if pnum＜＞"" then

pnum=pnum+1

else

pnum=1

end ifrem若第一次調(diào)用，默認(rèn)為第1條記錄，否則記錄指針加1

%＞

＜body background="../image/bj.jpg"＞

＜table width="720" border="1" align="center" cellpadding="0" cellspacing="0" class="ztt"＞

＜tr＞

＜td width="50"＞序號＜/td＞

＜td width="200"＞課程名＜/td＞

……

＜/tr＞

＜%

sql="select cxcjbsy.id,cxcjbsy.kcm,xbb.xbmc,cxcjbsy.bjm,cxcjbsy.xh,cxcjbsy.xm,cxcjbsy.cxcj,cxskbjb.rkjs,cxskbjb.cxbj "

sql=sql&" from (cxcjbsy inner join cxskbjb on cxcjbsy.cxbj=cxskbjb.id) inner join xbb on cxcjbsy.xbbh=xbb.xbbh where”

sql=sql" cxskbjb.rkjs=&pxm&" ORDER BY cxskbjb.cxbj,xbb.xbmc,cxcjbsy.bjm,cxcjbsy.xh;"

set rs=con.execute(sql)rem根據(jù)教師姓名，讀取特定學(xué)生信息記錄集

if not rs.eof then

i=1

k=1

rs.movefirst

do while not rs.eof

if k＞(pys-1)*15 then

exit do

end if

k=k+1

i=i+1

rs.movenext

looprem控制分頁

num=1

do while (not rs.eof and num＜=15)

%＞

＜form name="fm" method="post" action= "cj cl.asp?num=＜%=num%＞&ys=＜%=pys%＞&id=＜%=rs("id")%＞"＞

rem每人一form，并將當(dāng)前頁、當(dāng)前記錄及id傳至成績更新處理程序

＜tr＞

＜td＞＜%=i%＞＜/td＞

＜td＞＜%=rs("cxbj")%＞＜/td＞

＜td＞＜%=rs("xbmc")%＞＜/td＞

＜td＞＜%=rs("bjm")%＞＜/td＞

＜td＞＜%=rs("xh")%＞＜/td＞

＜td＞＜%=rs("xm")%＞＜/td＞

＜td＞＜%=rs("cxcj")%＞＜/td＞

＜td＞＜input name="cj" type="tex t" value=" ＜%=rs("cxcj")%＞" size="4" maxlength ="4"/＞＜/td＞

＜/tr＞

＜/form＞

＜%

i=i+1

num=num+1

rs.movenext

loop

end if

if (pnum＞num-1) then

pnum=num-1

end if

rem如果指向最后一條，則回車跳至第一條

%＞

＜/table＞

document.form[pnum-1].cj.focus(); //設(shè)置輸入框焦點(diǎn)

＜/script＞

＜%if pys+0＜＞1 then%＞

＜a href="cj.asp?ys=＜%=pys-1%＞"＞上一頁＜/a＞

＜%end if%＞

＜%if not rs.eof then%＞

＜a href="cj.asp?ys=＜%=pys+1%＞"＞下一頁＜/a＞

＜%end if%＞

＜%end if%＞

＜/body＞

＜/html＞

成績更新處理程序如下：

＜!--#include file="../database/conn.asp"--＞

＜%

pnum=request("num")

pid=request("id")

pcj=request("cj")

pys=request("ys")

if IsNumeric(pcj) then

rem如果數(shù)字正常更新，否則更新為null

sql="update cxcjbsy set cxcj="&pcj&" where id="&pid

else

sql="update cxcjbsy set cxcj=null where id="&pid

end if

con.execute(sql)

response.redirect "cxcjcl.asp?num="&pnum&"&ys="&pys%＞

成績錄入頁面運(yùn)行效果如圖1所示。

圖1重修成績錄入頁面

3多行多列批量錄入的擴(kuò)展

以上成績處理只錄入每條記錄的成績字段，如果需要錄入的數(shù)據(jù)是類似excel多行、多列的，只需在form中設(shè)置多個(gè)文本輸入框，在前n-1個(gè)輸入框輸入成績并回車依次跳到下一框，最后輸入框輸入數(shù)據(jù)回車時(shí)激活action處理程序即可。例如，四六級考試成績處理，輸入聽力、閱讀、寫作、綜合4個(gè)分?jǐn)?shù)，自動計(jì)算總成績。錄入頁面及提交處理程序代碼擴(kuò)展如下。

…

function fun(snum,i)

{

if(i＜4)

{

document.fm[snum-1].cj[i].focus();

document.fm[snum-1].zcj.value=parseInt(document.fm[snum-1].cj[0].value)+parseInt(document.fm[snum-1].cj[1].value)+parseInt(document.fm[snum-1].cj[2].value)+parseInt(document.fm[snum-1].cj[3].value);

//當(dāng)?shù)?-3框輸入時(shí)焦點(diǎn)轉(zhuǎn)向下一框，并計(jì)算更新總成績列

}

else

document.fm[snum-1].submit(); //當(dāng)?shù)?框回車，激活action成績處理程序

}

＜/script＞

……

＜form name="fm" method="post" action="yydjc l.asp?num=＜%=num%＞&ys=＜%=pys%＞&id=＜%=rs("id")%＞"＞

＜tr＞

＜td ＞＜%=i%＞＜/td＞

＜td＞＜%=rs("bjm")%＞＜/td＞

＜td＞＜%=rs("xh")%＞＜/td＞

＜td＞＜%=rs("xm")%＞＜/td＞

＜td＞＜input name="cj" type="text" value="＜%=rs("tl")%＞" size="3" maxlength="3" onkeypress="if(event. keyCode==13) {fun(＜%=

＜td＞＜input name="cj" type="text" value="＜%=rs("xz")%＞" size="3" maxlength="3" onkeypress="if(event. keyCode==13) {fun(＜%= num%＞,2);}"/＞ ＜/td＞

＜td＞＜input name="cj" type="text" value="＜%=rs("yd")%＞" size="3" maxlength="3" onkeypress="if(event. keyCode==13) {fun(＜%= num%＞,3);}"/＞ ＜/td＞

＜td＞＜input name="cj" type="text" value="＜%=rs("zh")%＞" size="3" maxlength="3" onkeypress="if(event. keyCode==13) {fun(＜%= num%＞,4);}"/＞ ＜/td＞

＜td＞＜input name="zcj" type="text" value="＜%=rs("zcj")%＞" size="4" maxlength="3" disabled/＞＜/td＞

＜/tr＞

＜/form＞

……

var pnum="＜%=pnum%＞";

document.form[pnum-1].cj[0].focus();

//提交數(shù)據(jù)后，設(shè)置焦點(diǎn)為下一記錄第1個(gè)框

＜/script＞

成績更新處理程序如下：

＜!--#include file="../database/conn.asp"--＞

＜%

pnum=request("num")

pid=request("id")

pcj=request("cj")

pys=request("ys")

mcj=split(pcj,",")

cj1=mcj(0)+0

cj2=mcj(1)+0

cj3=mcj(2)+0

cj4=mcj(3)+0

con.execute("update yyks set tl="&cj1&", xz="&cj2&",yd="&cj3&",zh="&cj4&",zcj="&cj1+cj2+cj3+cj4&" where id="&pid)

response.redirect "yydj.asp?num="&pnum&"&ys ="&pys

%＞

多行多列四級成績錄入頁面運(yùn)行效果如圖2所示。

圖2多行多列輸入效果圖

4結(jié)束語

本文結(jié)合《基于校園網(wǎng)的重修管理系統(tǒng)》重修成績錄入頁面，和《基于校園網(wǎng)的期末考試考務(wù)管理系統(tǒng)》考場教室錄入的實(shí)際需求及應(yīng)用，詳細(xì)分析了B/S模式下結(jié)合Form循環(huán)和JavaScript焦點(diǎn)控制的，數(shù)據(jù)批量錄入方法。該錄入程序?qū)崿F(xiàn)及操作簡單、控制效果較好，是Web頁面批量數(shù)據(jù)錄入處理比較簡潔實(shí)用的方法，具有一定的實(shí)用性、先進(jìn)性及推廣價(jià)值。該方案較好地實(shí)現(xiàn)B/S模式的頁面批量數(shù)據(jù)錄入，既可以直接應(yīng)用于其他基于asp.net技術(shù)的管理系統(tǒng)中，也可為jsp、php等web數(shù)據(jù)錄入控制實(shí)現(xiàn)提供良好的設(shè)計(jì)思路。

參考文獻(xiàn)：

[1]鄭齊心.ASP.NET項(xiàng)目開發(fā)案例全程實(shí)錄[M].2版.北京:清華大學(xué)出版社,2010.

[2]洪石丹.ASP.NET范例開發(fā)大全[M].北京:清華大學(xué)出版社,2010.

[3]龐婭娟,房大偉.ASP.NET從入門到精通[M].2版.北京:清華大學(xué)出版社,2010.

[4]炎士濤.ASP.NET項(xiàng)目開發(fā)案例精粹[M].北京:清華大學(xué)出版社,2010.

[5]張領(lǐng).ASP.NET項(xiàng)目開發(fā)全程實(shí)錄[M].北京:清華大學(xué)出版社,2008.

[6]余金山.ASP.NET 2.0+SQL Server 2005企業(yè)項(xiàng)目開發(fā)與實(shí)戰(zhàn)[M].北京:電子工業(yè)出版社,2008.

[7]李玉林.ASP.NET 2.0網(wǎng)絡(luò)編程從入門到精通[M].北京:清華大學(xué)出版社,2006.

[8]馬蘇拉.高?？荚嚬芾硇畔⑾到y(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)系統(tǒng)應(yīng)用,2009(10):37-42.