利用jqgrid实现类似excel录入功能

1、jqGrid是一个免费且功能强大的web网格控件，官方提供了非常丰富的API,几乎可以满足工程中数据展示、统计、汇总及录入需求，但也有一些缺乏的地方，如：不支持二堆表头、冻结列。以下几个网站可供网友学习参考，希望对大家有所帮助。（jqGrid范例）（jqGridAPI说明）（jqGrid官方网）如今我们利用jqGrid来实现录入功能，类似Excel,使用的是C#实现，效果如以下列图所示。的呵品名计步方式*电野庄才忸S货小计1Ed语甫忖军最沽力11300010001000ion：i；i0000QOS000100002Utt瓶违将断”1卅22100010001000100口0000005ODO10

2、000配件3320.00200310DO330.000.000.0050.00aso.oora：4Q.OO5)0.0000*1创.(JO第一步：准备好相应的CS解口JS文件,CS成件有?（我用的是版本）；JS文件有?（我用的是版本）其中，这个文件在网络我没有下载到，是根据官方提供了资料自己编写完成的，内容如下，主要用于实现jqGrid自定义显示：$.=recordtext:记录0-1共2笔”，emptyrecords:无数据显示,loadtext:载入中，pgtext:第0页/共1页”，altclass:jqgrid_alternate_bgcolor;在这里要注意一个地方，假设版本引用不匹配

3、，款式是无法正确显示，之前我遇到过这种情况。第二步：新建一个aspx页面和一个JS文件，用于定义jqGrid显示及录入编辑功能的实现,在这里，我把aspx文件命名为，JS文件命名为。这个文件要记得在页面中引入。其中，文件内容如下：jqGridDemo文件内容如下：$(function()jQuery(#list1).jqGrid(datatype:local,height:80,rownumbers:true,colNames:品名,包装,计费方式,数量,重量,体积,单价,运费,保价金额,保费费率,保险费,小计,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,/计费方式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,/数量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,/单价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,/运费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,/保价金额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,/保险费率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,/保险费name:AMOUNT,index:AMOUNT,width:70,sortable:true,sorttype:float,formatter:currency,formatoptions:thousandsSeparator:,/小计,cellEdit:true,表示表格可编辑cellsubmit:clientArray,/表示在本地进展修改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(请选择品名，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(按数量计费=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(按重量计费=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(按体积计费=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(按数量计费=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(按重量计费=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(按体积计费=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(按数量计费=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(按重量计费=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(按体积计费=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);/获取计费方式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:按重量计费，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(请选择一笔记录);););/数量判断functionquantity_Check()if(!NumCheck2(arguments0)returnfalse,数量必须为正整数;elsereturntrue;正数判断functiondeci_Check()if(NumCheck(arguments0)returntrue;elsereturnfalse,arguments1+数值必须为正数;关闭弹出窗口functioncloseWin()$(#windownbg).remove();$(#windown-box).fadeOut

36、(fast,function()$(this).remove(););/obj为XMLDOM对象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;验证jqGrid数据functioncheckGrid(gridId,fieldName)if(isNullOrEmpty(gridId)(gridId参数为空);returnfalse;varrecords=$(#+gridId).getGridParam(records);/获取jqgrid行数if(records=0)returntrue;for(vari=0;irecords;i+)varcolArr=$(#+gridId