jQuery购物车插件jsorder用法（支持后台处理程序直接转换成DataTable处理）

本文实例讲述了jQuery购物车插件jsorder用法。分享给大家供大家参考，具体如下：

<！DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"/><title></title><script type="text/javascript" src="../js/jquery-1.9.1.min.js" ></script><link href="./demo.css" rel="stylesheet"/><link href="../css/order.css" rel="stylesheet"/><script type="text/javascript" src="../js/cookie.js" ></script><script type="text/javascript" src="../js/jsorder.1.1.js" ></script></head><body><h1>JSORDER 案例</h1><table><tr><td colspan="3" align="left">案例一：我的菜单（点击菜名即可加入菜单）</td></tr><tr><td class="jsorderadd" id="80001" productid="80001" price="12" jsordername="红烧豆腐">红烧豆腐 12元</td><td class="jsorderadd" id="80002" productid="80002" price="32" jsordername="毛血旺">毛血旺 32元</td><td class="jsorderadd" id="80003" productid="80003" price="18" jsordername="套餐:京酱肉丝+2米饭 18元">套餐:京酱肉丝+2米饭 18元</td></tr></table><div id="result"></div></body></html><script type="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（）;function jsonAjax（url, param, datat, callback） {$.ajax（{type: "post",url: url,data: param,dataType: datat,success: callback,error: function （） {jQuery.fn.mBox（{message: "恢复失败"}）;}}）;};function getsuccess（o） {//alert（o）;//成功后操作}</script>

<%@ WebHandler Language="C#" Class="ShoppingCar" %>using System;using System.Web;using System.Data;using System.Web.Script.Serialization;using System.Collections.Generic;using System.Collections;using System.IO;public class ShoppingCar : IHttpHandler{public void ProcessRequest（HttpContext context）{context.Response.ContentType = "text/plain";StreamReader reader = new StreamReader（context.Request.InputStream）;string jsonString = HttpUtility.UrlDecode（reader.ReadToEnd（））;if （MSCL.Until.IsNullOrDBNull（jsonString））{context.Response.Write（"error"）;}else{jsonString = "{"goods": [" + jsonString + "]}";DataSet ds = JsonToDataSet（jsonString）; //获取的购物车商品列表context.Response.Write（"ok"）;}context.Response.End（）;}#region 解析Json成DataTable/// <summary>/// 解析Json成DataTable/// </summary>/// <param name="Json">Json字符串</param>/// <returns></returns>public static DataSet JsonToDataSet（string Json）{try{DataSet ds = new DataSet（）;DataTable dt = new DataTable（"shoppingcar"）;JavaScriptSerializer JSS = new JavaScriptSerializer（）;object obj = JSS.DeserializeObject（Json）;Dictionary<string, object> datajson = （Dictionary<string, object>）obj;foreach （var item in datajson）{object[] rows = （object[]）item.Value;foreach （var row in rows）{Dictionary<string, object> valneed = （Dictionary<string, object>）row;foreach （var needrow in valneed.Values）{#regionDictionary<string, object> val = （Dictionary<string, object>）needrow;DataRow dr = dt.NewRow（）;foreach （KeyValuePair<string, object> sss in val）{if （！dt.Columns.Contains（sss.Key））{dt.Columns.Add（sss.Key.ToString（））;dr[sss.Key] = sss.Value;}elsedr[sss.Key] = sss.Value;}dt.Rows.Add（dr）;#endregion}}}ds.Tables.Add（dt）;return ds;}catch{return null;}}#endregionpublic bool IsReusable{get{return false;}}}

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>读取本地购物车Cookie</title><script type="text/javascript" src="../js/jquery-1.9.1.min.js" ></script><link href="./demo.css" rel="stylesheet"/><link href="../css/order.css" rel="stylesheet"/><script type="text/javascript" src="../js/cookie.js" ></script><script type="text/javascript" src="../js/jsorder.1.1.js" ></script><script type="text/javascript">//初始化配置var staticname = "jsorder";var jsorderpre = "jsorder_";var html = "";$（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） {//循环获取数据var Id = initdata[index]["productid"];var Name = initdata[index]["name"];var Price = initdata[index]["price"];var Count = initdata[index]["count"];var innerhtml = "<li id="" + jsorderpre + Id + "">";innerhtml += Id + "--" + Name + "--" + Price + " ";innerhtml += "<a href="javascript:void（0）" style="text-decoration:none;" onclick="subnum（" + Id + "）"> - </a><span id="count" + Id + "" >" + Count;innerhtml += "</span><a href="javascript:void（0）" style="text-decoration:none;" onclick="addnum（" + Id + "）"> + </a>";innerhtml += "</li>"html += innerhtml;}）;$（"#list"）.append（html）;}}）;function subnum（id） {var datejsorder = $（"body"）.data（staticname）;datejsorder[id]["count"] -= 1;if （datejsorder[id]["count"] > 0） {$（"#count" + id）.html（datejsorder[id]["count"]）;} else {$（"#" + jsorderpre + id）.remove（）;delete datejsorder[id]; //del json keyValue}savecookie（datejsorder）;}function addnum（id, count） {var datejsorder = $（"body"）.data（staticname）;datejsorder[id]["count"] += 1;$（"#count" + id）.html（datejsorder[id]["count"]）;savecookie（datejsorder）;}function savecookie（data） {var date = new Date（）;date.setTime（date.getTime（） + （1 * 24 * 60 * 60 * 1000））;$.cookie（staticname, JSON.stringify（data）, {path: "/",expires: date}）;}function dosubmit（） {var datejsorder = $（"body"）.data（staticname）;alert（JSON.stringify（datejsorder））;//$（"#result"）.html（"json内容：" + JSON.stringify（data））.css（"background", "#e0e0e0"）;jsonAjax（"ShoppingCar.ashx", JSON.stringify（datejsorder）, "text", getsuccess）;}function getsuccess（o） {//alert（o）;//成功后操作}function jsonAjax（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><ul id="list"><li>购物车里暂无商品</li></ul><input type="button" value="确定,下一步" onclick="dosubmit（）;" /></div></body></html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格（table）操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。