jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
本文实例讲述了jQuery购物车插件jsorder用法。分享给大家供大家参考,具体如下:
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=GB18030"/> <title></title> <scripttype="text/javascript"src="../js/jquery-1.9.1.min.js"></script> <linkhref="./demo.css"rel="stylesheet"/> <linkhref="../css/order.css"rel="stylesheet"/> <scripttype="text/javascript"src="../js/cookie.js"></script> <scripttype="text/javascript"src="../js/jsorder.1.1.js"></script> </head> <body> <h1>JSORDER案例</h1> <table><tr><tdcolspan="3"align="left">案例一:我的菜单(点击菜名即可加入菜单)</td></tr><tr> <tdclass="jsorderadd"id="80001"productid="80001"price="12"jsordername="红烧豆腐">红烧豆腐12元</td> <tdclass="jsorderadd"id="80002"productid="80002"price="32"jsordername="毛血旺">毛血旺32元</td> <tdclass="jsorderadd"id="80003"productid="80003"price="18"jsordername="套餐:京酱肉丝+2米饭18元">套餐:京酱肉丝+2米饭18元</td></tr></table> <divid="result"></div> </body> </html> <scripttype="text/javascript"> //jsorder配置 $.fn.jsorder.defaults={ staticname:'jsorder', jsorderclass:'jsorder', savecookie:true, cookiename:'jsorder', numpre:'no_', jsorderpre:'jsorder_', jsorderspanpre:'jsorderspan_', pricefiled:'price', namefiled:'jsordername', leftdemo:'我的菜单', subbuttom:'', //addbuttom:'a.jsorderadd', addbuttom:'td.jsorderadd', nomessage:'你今天的食谱是还空的', dosubmit:function(data){ alert(JSON.stringify(data)); //$("#result").html("json内容:"+JSON.stringify(data)).css('background','#e0e0e0'); jsonAjax("ShoppingCar.ashx",JSON.stringify(data),"text",getsuccess); } }; $("body").jsorder(); functionjsonAjax(url,param,datat,callback){ $.ajax({ type:"post", url:url, data:param, dataType:datat, success:callback, error:function(){ jQuery.fn.mBox({ message:'恢复失败' }); } }); }; functiongetsuccess(o){ //alert(o); //成功后操作 } </script>
<%@WebHandlerLanguage="C#"Class="ShoppingCar"%> usingSystem; usingSystem.Web; usingSystem.Data; usingSystem.Web.Script.Serialization; usingSystem.Collections.Generic; usingSystem.Collections; usingSystem.IO; publicclassShoppingCar:IHttpHandler { publicvoidProcessRequest(HttpContextcontext) { context.Response.ContentType="text/plain"; StreamReaderreader=newStreamReader(context.Request.InputStream); stringjsonString=HttpUtility.UrlDecode(reader.ReadToEnd()); if(MSCL.Until.IsNullOrDBNull(jsonString)) { context.Response.Write("error"); } else { jsonString="{\"goods\":["+jsonString+"]}"; DataSetds=JsonToDataSet(jsonString);//获取的购物车商品列表 context.Response.Write("ok"); } context.Response.End(); } #region解析Json成DataTable ///<summary> ///解析Json成DataTable ///</summary> ///<paramname="Json">Json字符串</param> ///<returns></returns> publicstaticDataSetJsonToDataSet(stringJson) { try { DataSetds=newDataSet(); DataTabledt=newDataTable("shoppingcar"); JavaScriptSerializerJSS=newJavaScriptSerializer(); objectobj=JSS.DeserializeObject(Json); Dictionary<string,object>datajson=(Dictionary<string,object>)obj; foreach(varitemindatajson) { object[]rows=(object[])item.Value; foreach(varrowinrows) { Dictionary<string,object>valneed=(Dictionary<string,object>)row; foreach(varneedrowinvalneed.Values) { #region Dictionary<string,object>val=(Dictionary<string,object>)needrow; DataRowdr=dt.NewRow(); foreach(KeyValuePair<string,object>sssinval) { if(!dt.Columns.Contains(sss.Key)) { dt.Columns.Add(sss.Key.ToString()); dr[sss.Key]=sss.Value; } else dr[sss.Key]=sss.Value; } dt.Rows.Add(dr); #endregion } } } ds.Tables.Add(dt); returnds; } catch { returnnull; } } #endregion publicboolIsReusable { get { returnfalse; } } }
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>读取本地购物车Cookie</title> <scripttype="text/javascript"src="../js/jquery-1.9.1.min.js"></script> <linkhref="./demo.css"rel="stylesheet"/> <linkhref="../css/order.css"rel="stylesheet"/> <scripttype="text/javascript"src="../js/cookie.js"></script> <scripttype="text/javascript"src="../js/jsorder.1.1.js"></script> <scripttype="text/javascript"> //初始化配置 varstaticname='jsorder'; varjsorderpre='jsorder_'; varhtml=""; $(function(){ if($.cookie(staticname)!=null&&$.cookie(staticname)!='{}'){ $("#list").html(""); initdata=eval('('+$.cookie(staticname)+')');//序列化成数组 $("body").data(staticname,initdata); //alert(JSON.stringify(initdata)); $.each(initdata,function(index,item){ //循环获取数据 varId=initdata[index]["productid"]; varName=initdata[index]["name"]; varPrice=initdata[index]["price"]; varCount=initdata[index]["count"]; varinnerhtml="<liid='"+jsorderpre+Id+"'>"; innerhtml+=Id+"--"+Name+"--"+Price+""; innerhtml+="<ahref='javascript:void(0)'style='text-decoration:none;'onclick='subnum("+Id+")'>-</a><spanid='count"+Id+"'>"+Count; innerhtml+="</span><ahref='javascript:void(0)'style='text-decoration:none;'onclick='addnum("+Id+")'>+</a>"; innerhtml+="</li>" html+=innerhtml; }); $("#list").append(html); } }); functionsubnum(id){ vardatejsorder=$("body").data(staticname); datejsorder[id]['count']-=1; if(datejsorder[id]['count']>0){ $("#count"+id).html(datejsorder[id]['count']); }else{ $("#"+jsorderpre+id).remove(); deletedatejsorder[id];//deljsonkeyValue } savecookie(datejsorder); } functionaddnum(id,count){ vardatejsorder=$("body").data(staticname); datejsorder[id]['count']+=1; $("#count"+id).html(datejsorder[id]['count']); savecookie(datejsorder); } functionsavecookie(data){ vardate=newDate(); date.setTime(date.getTime()+(1*24*60*60*1000)); $.cookie(staticname,JSON.stringify(data),{ path:'/', expires:date }); } functiondosubmit(){ vardatejsorder=$("body").data(staticname); alert(JSON.stringify(datejsorder)); //$("#result").html("json内容:"+JSON.stringify(data)).css('background','#e0e0e0'); jsonAjax("ShoppingCar.ashx",JSON.stringify(datejsorder),"text",getsuccess); } functiongetsuccess(o){ //alert(o); //成功后操作 } functionjsonAjax(url,param,datat,callback){ $.ajax({ type:"post", url:url, data:param, dataType:datat, success:callback, error:function(){ jQuery.fn.mBox({ message:'恢复失败' }); } }); }; </script> </head> <body> <div> <ulid="list"> <li>购物车里暂无商品</li> </ul> <inputtype="button"value="确定,下一步"onclick="dosubmit();"/> </div> </body> </html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。