首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJune 08, 2016

本文实例讲述了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)
          {
            #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>读取本地购物车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购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)

- Author -

smartsmile2012

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
手机开发必备技巧：javascript及CSS功能代码分享
May 25 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 #Javascript
Javascript之String对象详解
Jun 08 #Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 #Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 #Javascript
关于session和cookie的简单理解
Jun 08 #Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 #Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 #Javascript
CAD(1) protocol(1) 404(1) sock(2) macos(1) Stater(1) csgo(1) xps(1) mysqldump(1) XPathParser(1)
You might like
PHP4(windows版本)中的COM函数
2006/10/09 PHP
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
dwr spring的集成实现代码
2009/03/22 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
基于 flexible 的 Vue 组件：Toast -- 显示框效果
2017/12/26 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
详解Vue中组件的缓存
2019/04/20 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
python3 re返回形式总结
2020/11/20 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
奥斯汀独木舟和皮划艇：Austin Canoe & Kayak
2018/05/22 全球购物
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
企业精神口号
2014/06/11 职场文书
国庆65周年演讲稿：回首往昔，展望未来
2014/09/21 职场文书
培训督导岗位职责
2015/04/10 职场文书