首页
所有分类
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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
javascript 匿名函数的理解（透彻版)
Jan 28 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
玩转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) http_stub_status_module(1) element-ui(1) pongo2(1) 逻辑函数(1) 模板引擎(1) 复合索引(1) BufferPool(1) 缓存机制(1) 连接查询(1)
You might like
php 分页类 扩展代码
2009/06/11 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
JQuery 风格的HTML文本转义
2009/07/01 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
js实现缓动动画
2020/11/25 Javascript
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
python3实现表白神器
2019/04/09 Python
python3字符串操作总结
2019/07/24 Python
python对文件的操作方法汇总
2020/02/28 Python
Python新手学习函数默认参数设置
2020/06/03 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
匡威西班牙官网：Converse西班牙
2019/10/01 全球购物
英国奢侈品牌时尚购物平台：Farfetch（支持中文）
2020/02/18 全球购物
《雨点》教学反思
2014/02/12 职场文书
高中生操行评语大全
2014/04/25 职场文书
机械机修工岗位职责
2014/08/03 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
2015新年寄语（一句话）
2014/12/08 职场文书
综合实践活动报告
2015/02/05 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
Java设计模式中的命令模式
2022/04/28 Java/Android