首页
所有分类
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 相关文章推荐
javascript 嵌套的函数（作用域链）
Mar 15 Javascript
基于jquery的一个图片hover的插件
Apr 24 Javascript
js 处理URL实用技巧
Nov 23 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器（面向小白）
Jun 21 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 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
高动态范围(1) axios(1) 连接器(1) vuex(1) HDR(1) OutputStream(1) InputStream(1) 曝光融合(1) Vue3(1) persistedstate(1)
You might like
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
玩转python selenium鼠标键盘操作（ActionChains）
2020/04/12 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
Django 框架模型操作入门教程
2019/11/05 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
python中os.remove()用法及注意事项
2021/01/31 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
YSL圣罗兰美妆美国官网：Yves Saint Lauret US
2016/11/21 全球购物
Maisons du Monde德国：法国家具和装饰的市场领导者
2019/07/26 全球购物
马歇尔耳机官网：Marshall Headphones
2020/02/04 全球购物
Weblogc domain问题
2014/01/27 面试题
财务管理专业推荐信
2013/11/19 职场文书
工程班组长岗位职责
2013/12/30 职场文书
高二美术教学反思
2014/01/14 职场文书
村级换届选举方案
2014/05/10 职场文书
自强之星事迹材料
2014/05/12 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
民主生活会对照检查材料（统计局）
2014/09/21 职场文书
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android