利用jqgrid實(shí)現(xiàn)類似excel錄入功能

1、jqGrid是一個(gè)免費(fèi)且功能強(qiáng)大的web網(wǎng)格控件，官方提供了非常豐富的API,幾乎可以滿足工程中數(shù)據(jù)展示、統(tǒng)計(jì)、匯總及錄入需求，但也有一些缺乏的地方，如：不支持二堆表頭、凍結(jié)列。以下幾個(gè)網(wǎng)站可供網(wǎng)友學(xué)習(xí)參考，希望對(duì)大家有所幫助。（jqGrid范例）（jqGridAPI說明）（jqGrid官方網(wǎng)）如今我們利用jqGrid來實(shí)現(xiàn)錄入功能，類似Excel,使用的是C#實(shí)現(xiàn)，效果如以下列圖所示。的呵品名計(jì)步方式*電野莊才忸S貨小計(jì)1Ed語甫忖軍最沽力11300010001000ion：i；i0000QOS000100002Utt瓶違將斷”1卅22100010001000100口0000005ODO10

2、000配件3320.00200310DO330.000.000.0050.00aso.oora：4Q.OO5)0.0000*1創(chuàng).(JO第一步：準(zhǔn)備好相應(yīng)的CS解口JS文件,CS成件有?（我用的是版本）；JS文件有?（我用的是版本）其中，這個(gè)文件在網(wǎng)絡(luò)我沒有下載到，是根據(jù)官方提供了資料自己編寫完成的，內(nèi)容如下，主要用于實(shí)現(xiàn)jqGrid自定義顯示：$.=recordtext:記錄0-1共2筆”，emptyrecords:無數(shù)據(jù)顯示,loadtext:載入中，pgtext:第0頁/共1頁”，altclass:jqgrid_alternate_bgcolor;在這里要注意一個(gè)地方，假設(shè)版本引用不匹配

3、，款式是無法正確顯示，之前我遇到過這種情況。第二步：新建一個(gè)aspx頁面和一個(gè)JS文件，用于定義jqGrid顯示及錄入編輯功能的實(shí)現(xiàn),在這里，我把a(bǔ)spx文件命名為，JS文件命名為。這個(gè)文件要記得在頁面中引入。其中，文件內(nèi)容如下：jqGridDemo文件內(nèi)容如下：$(function()jQuery(#list1).jqGrid(datatype:local,height:80,rownumbers:true,colNames:品名,包裝,計(jì)費(fèi)方式,數(shù)量,重量,體積,單價(jià),運(yùn)費(fèi),保價(jià)金額,保費(fèi)費(fèi)率,保險(xiǎn)費(fèi),小計(jì),colModel:name:PNAME,index:PNAME,width:110

4、,edittype:text,editable:true,editrules:required:true,/品名name:PACKAGE,index:PACKAGE,width:80,edittype:select,editable:true,editoptions:value:,editrules:required:true,/包裝name:BILLTYPE,index:BILLTYPE,width:80,edittype:select,editable:true,editoptions:value:,editrules:required:true,/計(jì)費(fèi)方式name:QUANTITY,in

5、dex:QUANTITY,width:50,edittype:text,editable:true,sorttype:int,formatter:integer,formatoptions:decimalSeparator:,thousandsSeparator:,defaultValue:0,editrules:custom:true,custom_func:quantity_Check,/數(shù)量name:WEIGHT,index:WEIGHT,width:50,align:right,editable:true,sorttype:float,formatter:currency,format

6、options:thousandsSeparator:,defaultValue:0.00,editrules:custom:true,custom_func:deci_Check,重量name:VOLUME,index:VOLUME,width:50,align:right,sorttype:float,editable:true,formatter:currency,formatoptions:thousandsSeparator:,defaultValue:0.00,editrules:custom:true,custom_func:deci_Check,/體積name:PRICE,in

7、dex:PRICE,width:50,align:right,sorttype:float,editable:true,formatter:currency,formatoptions:thousandsSeparator:,defaultValue:0.00,editrules:custom:true,custom_func:deci_Check,/單價(jià)name:FREIGHT,index:FREIGHT,width:50,sortable:false,editable:false,sorttype:float,formatter:currency,formatoptions:thousan

8、dsSeparator:,defaultValue:0.00,editrules:custom:true,custom_func:deci_Check,/運(yùn)費(fèi)name:INSURED,index:INSURED,width:70,align:right,editable:true,sorttype:float,formatter:currency,formatoptions:thousandsSeparator:,defaultValue:0.00,editrules:custom:true,custom_func:deci_Check,/保價(jià)金額name:PREMIUMS,index:PRE

9、MIUMS,width:70,align:right,sorttype:float,editable:false,formatter:currency,formatoptions:thousandsSeparator:,decimalPlaces:3,defaultValue:0.00,editrules:custom:true,custom_func:deci_Check,/保險(xiǎn)費(fèi)率name:INSURANCEFEE,index:INSURANCEFEE,width:70,align:right,sorttype:float,editable:false,formatter:currency

10、,formatoptions:thousandsSeparator:,defaultValue:0.00,editrules:custom:true,custom_func:deci_Check,/保險(xiǎn)費(fèi)name:AMOUNT,index:AMOUNT,width:70,sortable:true,sorttype:float,formatter:currency,formatoptions:thousandsSeparator:,/小計(jì),cellEdit:true,表示表格可編輯cellsubmit:clientArray,/表示在本地進(jìn)展修改caption:貨物清單,toolbar:tru

11、e,top,footerrow:true,userDataOnFooter:true,altRows:true,onCellSelect:function(rowid)goodsListID=rowid;,afterInsertRow:function(rowid,aData)jQuery(#list1).jqGrid(setCell,rowid,PNAME,color:red);jQuery(#list1).jqGrid(setCell,rowid,PACKAGE,，color:red);jQuery(#list1).jqGrid(setCell,rowid,BILLTYPE,color:r

12、ed);jQuery(#list1).jqGrid(setCell,rowid,QUANTITY,color:red);jQuery(#list1).jqGrid(setCell,rowid,WEIGHT,color:red);jQuery(#list1).jqGrid(setCell,rowid,VOLUME,color:red);jQuery(#list1).jqGrid(setCell,rowid,PRICE,color:red);jQuery(#list1).jqGrid(setCell,rowid,INSURED,color:red);jQuery(#list1).jqGrid(se

13、tCell,rowid,PREMIUMS,color:red);,afterEditCell:function(rowid,cellname,value,iRow,iCol)if(cellname=PNAME)$(#+iRow+_+cellname).dblclick(function()tipsWindown(請(qǐng)選擇品名，iframe:goodsPOP.aspx?controlName=+iRow+”_+cellname,455,350,true,true,leotheme););return;if(cellname=PACKAGE)return;if(cellname=BILLTYPE)r

14、eturn;$(#+iRow+_+cellname)0.select();,afterSaveCell:function(rowid,cellname,value,iRow,iCol)if(PNAME=cellname)return;if(PACKAGE=cellname)return;varbillType=$(#list1).getCell(rowid,BILLTYPE);varoldAmount=getGridFieldSum(list1,AMOUNT);if(BILLTYPE=cellname)if(按數(shù)量計(jì)費(fèi)=billType)$(#list1).setCell(rowid,FREI

15、GHT,+parseFloat($(#list1).getCell(rowid,QUANTITY)*parseFloat($(#list1).getCell(rowid,PRICE);$(#list1).setCell(rowid,AMOUNT,+(parseFloat($(#list1).getCell(rowid,FREIGHT)+parseFloat($(#list1).getCell(rowid,INSURANCEFEE);getGridFieldSum(list1,FREIGHT);$(#list1).footerData(set,AMOUNT:+getGridFieldSum(li

16、st1,AMOUNT);/return;elseif(按重量計(jì)費(fèi)=billType) TOC o 1-5 h z $(#list1).setCell(rowid,FREIGHT,+parseFloat($(#list1).getCell(rowid,WEIGHT)*parseFloat($(#list1).getCell(rowid,PRICE);$(#list1).setCell(rowid,AMOUNT,+(parseFloat($(#list1).getCell(rowid,FREIGHT)+parseFloat($(#list1).getCell(rowid,INSURANCEFEE)

17、;$(#list1).footerData(set,FREIGHT:+getGridFieldSum(list1,FREIGHT);$(#list1).footerData(set,AMOUNT:+getGridFieldSum(list1,AMOUNT);/return;elseif(按體積計(jì)費(fèi)=billType) TOC o 1-5 h z $(#list1).setCell(rowid,FREIGHT,+parseFloat($(#list1).getCell(rowid,VOLUME)*parseFloat($(#list1).getCell(rowid,PRICE);$(#list1

18、).setCell(rowid,AMOUNT,+(parseFloat($(#list1).getCell(rowid,FREIGHT)+parseFloat($(#list1).getCell(rowid,INSURANCEFEE);$(#list1).footerData(set,FREIGHT:+getGridFieldSum(list1,FREIGHT);$(#list1).footerData(set,AMOUNT:+getGridFieldSum(list1,AMOUNT);/return;/return;elseif(QUANTITY=cellname) TOC o 1-5 h

19、z $(#list1).footerData(set,QUANTITY:+getGridFieldSum(list1,cellname);if(按數(shù)量計(jì)費(fèi)=billType)$(#list1).setCell(rowid,FREIGHT,+parseFloat($(#list1).getCell(rowid,QUANTITY)*parseFloat($(#list1).getCell(rowid,PRICE);$(#list1).setCell(rowid,AMOUNT,+(parseFloat($(#list1).getCell(rowid,FREIGHT)+parseFloat($(#li

20、st1).getCell(rowid,INSURANCEFEE);getGridFieldSum(list1,FREIGHT);$(#list1).footerData(set,AMOUNT:+getGridFieldSum(list1,AMOUNT);/return;elseif(WEIGHT=cellname) TOC o 1-5 h z $(#list1).footerData(set,WEIGHT:+getGridFieldSum(list1,cellname);if(按重量計(jì)費(fèi)=billType)$(#list1).setCell(rowid,FREIGHT,+parseFloat(

21、$(#list1).getCell(rowid,WEIGHT)*parseFloat($(#list1).getCell(rowid,PRICE);$(#list1).setCell(rowid,AMOUNT,+(parseFloat($(#list1).getCell(rowid,FREIGHT)+parseFloat($(#list1).getCell(rowid,INSURANCEFEE);$(#list1).footerData(set,FREIGHT:+getGridFieldSum(list1,FREIGHT);$(#list1).footerData(set,AMOUNT:+ge

22、tGridFieldSum(list1,AMOUNT);/return;elseif(VOLUME=cellname) TOC o 1-5 h z $(#list1).footerData(set,VOLUME:+getGridFieldSum(list1,cellname);if(按體積計(jì)費(fèi)=billType)$(#list1).setCell(rowid,FREIGHT,+parseFloat($(#list1).getCell(rowid,VOLUME)*parseFloat($(#list1).getCell(rowid,PRICE);$(#list1).setCell(rowid,A

23、MOUNT,+(parseFloat($(#list1).getCell(rowid,FREIGHT)+parseFloat($(#list1).getCell(rowid,INSURANCEFEE);$(#list1).footerData(set,FREIGHT:+getGridFieldSum(list1,FREIGHT);$(#list1).footerData(set,AMOUNT:+getGridFieldSum(list1,AMOUNT);/return;elseif(PRICE=cellname)if(按數(shù)量計(jì)費(fèi)=billType)$(#list1).setCell(rowid

24、,FREIGHT,+parseFloat($(#list1).getCell(rowid,parseFloat($(#list1).getCell(rowid,QUANTITY)*PRICE); TOC o 1-5 h z $(#list1).setCell(rowid,AMOUNT,+(parseFloat($(#list1).getCell(rowid,FREIGHT)+parseFloat($(#list1).getCell(rowid,INSURANCEFEE);$(#list1).footerData(set,FREIGHT:+getGridFieldSum(list1,FREIGH

25、T);$(#list1).footerData(set,AMOUNT:+getGridFieldSum(list1,AMOUNT);/return;elseif(按重量計(jì)費(fèi)=billType) TOC o 1-5 h z $(#list1).setCell(rowid,FREIGHT,+parseFloat($(#list1).getCell(rowid,WEIGHT)*parseFloat($(#list1).getCell(rowid,PRICE);$(#list1).setCell(rowid,AMOUNT,+(parseFloat($(#list1).getCell(rowid,FRE

26、IGHT)+parseFloat($(#list1).getCell(rowid,INSURANCEFEE);$(#list1).footerData(set,FREIGHT:+getGridFieldSum(list1,FREIGHT);$(#list1).footerData(set,AMOUNT:+getGridFieldSum(list1,AMOUNT);/return;elseif(按體積計(jì)費(fèi)=billType) TOC o 1-5 h z $(#list1).setCell(rowid,FREIGHT,+parseFloat($(#list1).getCell(rowid,VOLU

27、ME)*parseFloat($(#list1).getCell(rowid,PRICE);$(#list1).setCell(rowid,AMOUNT,+(parseFloat($(#list1).getCell(rowid,FREIGHT)+parseFloat($(#list1).getCell(rowid,INSURANCEFEE);$(#list1).footerData(set,FREIGHT:+getGridFieldSum(list1,FREIGHT);$(#list1).footerData(set,AMOUNT:+getGridFieldSum(list1,AMOUNT);

28、/return;/return;elseif(INSURED=cellname)$(#list1).footerData(set,INSURED:+getGridFieldSum(list1,cellname);$(#list1).setCell(rowid,INSURANCEFEE,+(parseFloat($(#list1).getCell(rowid,INSURED)*parseFloat($(#list1).getCell(rowid,PREMIUMS);$(#list1).setCell(rowid,AMOUNT,+(parseFloat($(#list1).getCell(rowi

29、d,FREIGHT)+parseFloat($(#list1).getCell(rowid,INSURANCEFEE);$(#list1).footerData(set,INSURANCEFEE:+getGridFieldSum(list1,INSURANCEFEE);$(#list1).footerData(set,AMOUNT:+getGridFieldSum(list1,AMOUNT);/return;varnewAmount=getGridFieldSum(list1,AMOUNT);vartotalFee=$(#TOTALFEE).val();if(isNullOrEmpty(tot

30、alFee)totalFee=0;elsetotalFee=parseFloat(totalFee);$(#TOTALFEE).val(newAmount-oldAmount+totalFee););$(#t_list1).append();$(#t_list1).append();$(#list1).footerData(set,PNAME:匯總：,QUANTITY:0,WEIGHT:0,VOLUME:0,FREIGHT:。，INSURED:。，INSURANCEFEE。，AMOUNT:0);/匯總行賦值/獲取包裝xmlDom=getXMLDOM(method=select&type=XML

31、.BILL.getGoodsList&DDFLD=PACKING);varcolModelArr=$(#list1).getGridParam(colModel);vareditoptionsObj=colModelArr2editoptions;editoptionsObjvalue=getDataList(xmlDom,NAME);/獲取計(jì)費(fèi)方式xmlDom=getXMLDOM(method=select&type=XML.BILL.getGoodsList&DDFLD=BILLTYPE);colModelArr=$(#list1).getGridParam(colModel);edito

32、ptionsObj=colModelArr3editoptions;editoptionsObjvalue=getDataList(xmlDom,NAME);$(inputid=addRow,#t_list1).click(function()if($(#list1).getGridParam(records)=3)alert(貨物清單最多只能輸入三行);return;vardatarow=BILLTYPE:按重量計(jì)費(fèi)，PREMIUMS:insuranceRate;varsu=jQuery(#list1).jqGrid(addRowData,newDate().valueOf(),dataro

33、w););$(inputid=delRow,#t_list1).click(function()varid=jQuery(#list1).getGridParam(selrow);if(id)varsu=jQuery(#list1).jqGrid(delRowData,id);if(su)QUANTITY:+WEIGHT:+VOLUME:+FREIGHT:+INSURED:+ INSURANCEFEE: +AMOUNT:+$(#list1).footerData(set,getGridFieldSum(list1,QUANTITY);$(#list1).footerData(set,getGr

34、idFieldSum(list1,WEIGHT);$(#list1).footerData(set,getGridFieldSum(list1,VOLUME);$(#list1).footerData(set,getGridFieldSum(list1,FREIGHT);$(#list1).footerData(set,getGridFieldSum(list1,INSURED);$(#list1).footerData(set,getGridFieldSum(list1,INSURANCEFEE);$(#list1).footerData(set,getGridFieldSum(list1,

35、AMOUNT);elsealert(無法刪除);elsealert(請(qǐng)選擇一筆記錄);););/數(shù)量判斷functionquantity_Check()if(!NumCheck2(arguments0)returnfalse,數(shù)量必須為正整數(shù);elsereturntrue;正數(shù)判斷functiondeci_Check()if(NumCheck(arguments0)returntrue;elsereturnfalse,arguments1+數(shù)值必須為正數(shù);關(guān)閉彈出窗口functioncloseWin()$(#windownbg).remove();$(#windown-box).fadeOut

36、(fast,function()$(this).remove(););/obj為XMLDOM對(duì)象functiongetDataList(obj,fieldName)if(!obj)return;varrowNum=parseInt(getFieldValue(obj,rowCount);if(0=rowNum)return;vardataList=;for(vari=0;irowNum;i+)dataList+=getFieldValue(obj,fieldName,i)+;if(!isNullOrEmpty(dataList)dataList=(0,-1);returndataList;驗(yàn)證jqGrid數(shù)據(jù)functioncheckGrid(gridId,fieldName)if(isNullOrEmpty(gridId)(gridId參數(shù)為空);returnfalse;varrecords=$(#+gridId).getGridParam(records);/獲取jqgrid行數(shù)if(records=0)returntrue;for(vari=0;irecords;i+)varcolArr=$(#+gridId