本文实例讲述了jQuery购物车插件jsorder用法。分享给大家供大家参考,具体如下:
JSORDER 案例
案例一:我的菜单(点击菜名即可加入菜单) | ||
红烧豆腐 12元 | 毛血旺 32元 | 套餐:京酱肉丝+2米饭 18元 |
//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);
//成功后操作
}
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
///
/// 解析Json成DataTable
///
/// Json字符串
///
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 datajson = (Dictionary)obj;
foreach (var item in datajson)
{
object[] rows = (object[])item.Value;
foreach (var row in rows)
{
Dictionary valneed = (Dictionary)row;
foreach (var needrow in valneed.Values)
{
#region
Dictionary val = (Dictionary)needrow;
DataRow dr = dt.NewRow();
foreach (KeyValuePair sss in val)
{
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);
return ds;
}
catch
{
return null;
}
}
#endregion
public bool IsReusable
{
get
{
return false;
}
}
}
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
读取本地购物车Cookie//初始化配置
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 = "
";innerhtml += Id + "--" + Name + "--" + Price + " ";
innerhtml += " - " + Count;
innerhtml += " + ";
innerhtml += "
"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: '恢复失败'
});
}
});
};
- 购物车里暂无商品
希望本文所述对大家jQuery程序设计有所帮助。