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程序设计有所帮助。