jQuery Shopping Cart Plugin jsorder Usage of Supports Background Processor Direct Conversion to DataTable Processing
- 2021-06-28 08:29:57
- OfStack
This article illustrates the usage of jQuery shopping cart plug-in jsorder.Share it for your reference, as follows:
<!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 case </h1>
<table><tr><td colspan="3" align="left"> case 1 : My menu (click on the name to join the menu) </td></tr><tr>
<td class="jsorderadd" id="80001" productid="80001" price="12" jsordername=" Braised bean curd "> Braised bean curd 12 element </td>
<td class="jsorderadd" id="80002" productid="80002" price="32" jsordername=" Duck Blood in Chili Sauce "> Duck Blood in Chili Sauce 32 element </td>
<td class="jsorderadd" id="80003" productid="80003" price="18" jsordername=" Package : Sauteed Shredded Pork in Sweet Bean Sauce +2 Steamed Rice 18 element "> Package : Sauteed Shredded Pork in Sweet Bean Sauce +2 Steamed Rice 18 element </td></tr></table>
<div id="result"></div>
</body>
</html>
<script type="text/javascript">
//jsorder To configure
$.fn.jsorder.defaults = {
staticname: 'jsorder',
jsorderclass: 'jsorder',
savecookie: true,
cookiename: 'jsorder',
numpre: 'no_',
jsorderpre: 'jsorder_',
jsorderspanpre: 'jsorderspan_',
pricefiled: 'price',
namefiled: 'jsordername',
leftdemo: ' My Menu ',
subbuttom: '',
//addbuttom : 'a.jsorderadd',
addbuttom: 'td.jsorderadd',
nomessage: ' Your recipe today is empty ',
dosubmit: function (data) {
alert(JSON.stringify(data));
//$("#result").html("json Content: " + 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: ' restore failed '
});
}
});
};
function getsuccess(o) {
//alert(o);
// Operation after success
}
</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); // Get a list of shopping cart items
context.Response.Write("ok");
}
context.Response.End();
}
#region analysis Json become DataTable
/// <summary>
/// analysis Json become DataTable
/// </summary>
/// <param name="Json">Json Character string </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)
{
#region
Dictionary<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;
}
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;
}
}
}
<!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> Read local shopping carts 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">
// Initialize Configuration
var staticname = 'jsorder';
var jsorderpre = 'jsorder_';
var html = "";
$(function () {
if ($.cookie(staticname) != null && $.cookie(staticname) != '{}') {
$("#list").html("");
initdata = eval('(' + $.cookie(staticname) + ')'); // Serialize into an array
$("body").data(staticname, initdata);
//alert(JSON.stringify(initdata));
$.each(initdata, function (index, item) {
// Loop through data
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 Content: " + JSON.stringify(data)).css('background', '#e0e0e0');
jsonAjax("ShoppingCar.ashx", JSON.stringify(datejsorder), "text", getsuccess);
}
function getsuccess(o) {
//alert(o);
// Operation after success
}
function jsonAjax(url, param, datat, callback) {
$.ajax({
type: "post",
url: url,
data: param,
dataType: datat,
success: callback,
error: function () {
jQuery.fn.mBox({
message: ' restore failed '
});
}
});
};
</script>
</head>
<body>
<div>
<ul id="list">
<li> There are no items in the shopping cart </li>
</ul>
<input type="button" value=" Determine , lower 1 step " onclick="dosubmit();" />
</div>
</body>
</html>
More readers interested in jQuery-related content can view this site's topics: Ajax Usage Summary in jquery, jQuery Table (table) Operation Skills Summary, jQuery Dragging Special Effects and Skills Summary, jQuery Extended Skills Summary, jQuery General Classic Special Effects Summary, jQuery Animation and Usage Summary, etc.jquery Selector Usage Summary and jQuery Common Plug-ins and Usage Summary
I hope that the description in this paper will be helpful to everyone's jQuery program design.