Jquery购物车jsorder改进版,支持后台处理程序直接转换成DataTable处理

最新推荐文章于 2016-11-18 15:54:00 发布

smartsmile2012

最新推荐文章于 2016-11-18 15:54:00 发布

阅读量3.3k

点赞数

分类专栏： JS & Jquery Web Asp.net & C#

本文链接：https://blog.csdn.net/smartsmile2012/article/details/17187291

版权

Asp.net & C# 同时被 3 个专栏收录

219 篇文章 6 订阅

订阅专栏

JS & Jquery

87 篇文章 0 订阅

订阅专栏

Web

87 篇文章 0 订阅

订阅专栏

<!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;' οnclick='subnum(" + Id + ")'> - </a><span id='count" + Id + "' >" + Count;
                    innerhtml += "</span><a href='javascript:void(0)' style='text-decoration:none;' οnclick='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="确定,下一步" οnclick="dosubmit();" />
</div>
</body>
</html>

smartsmile2012

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Jquery购物车jsorder改进版,支持后台处理程序直接转换成DataTable处理

JSORDER 案例案例一：我的菜单（点击菜名即可加入菜单）红烧豆腐 12元毛血旺 32元套餐:京酱肉丝+2米饭 18元 //jsorder配置 $.fn.jsorder.defaults = { staticname: 'jsorder', jsorde
复制链接

扫一扫