首页
所有分类
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 相关文章推荐
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
Java中Timer的用法详解
Oct 21 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
vue ssr 指南详读
Jun 29 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 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
越南购物网站(9) 缅甸购物网站(1) 匈牙利购物网站(11) 捷克购物网站(26) 北美洲购物网站(1) 菲律宾购物网站(13) 秘鲁购物网站(1) 摩纳哥购物网站(1) 卡塔尔购物网站(3) 巴基斯坦购物网站(2)
You might like
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
Django返回json数据用法示例
2016/09/18 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
Python中文件的读取和写入操作
2018/04/27 Python
python将字母转化为数字实例方法
2019/10/04 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
Etam德国：内衣精品店
2019/08/25 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
信访工作者先进事迹
2014/01/17 职场文书
中华魂演讲稿
2014/05/13 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
会计简历自我评价
2015/03/10 职场文书
法律意见书范文
2015/05/20 职场文书
七年级作文之秋游
2019/10/21 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
Python数据分析之绘图和可视化详解
2021/06/02 Python