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

 

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <metahttp-equiv="Content-Type"content="text/html; charset=GB18030"/> 
  5.     <title></title>  
  6.     <scripttype="text/javascript"src="../js/jquery-1.9.1.min.js"></script>  
  7.     <linkhref="./demo.css"rel="stylesheet"/> 
  8.     <linkhref="../css/order.css"rel="stylesheet"/> 
  9.     <scripttype="text/javascript"src="../js/cookie.js"></script>  
  10.     <scripttype="text/javascript"src="../js/jsorder.1.1.js"></script>  
  11.      </head>   
  12. <body> 
  13.     <h1>JSORDER 案例</h1> 
  14.     <table><tr><tdcolspan="3"align="left">案例一：我的菜单（点击菜名即可加入菜单）</td></tr><tr> 
  15.            <tdclass="jsorderadd"id="80001"productid="80001"price="12"jsordername="红烧豆腐">红烧豆腐 12元</td> 
  16.            <tdclass="jsorderadd"id="80002"productid="80002"price="32"jsordername="毛血旺">毛血旺 32元</td> 
  17.            <tdclass="jsorderadd"id="80003"productid="80003"price="18"jsordername="套餐:京酱肉丝+2米饭 18元">套餐:京酱肉丝+2米饭 18元</td></tr></table>   
  18.     <divid="result"></div> 
  19. </body> 
  20. </html>  
  21. <scripttype="text/javascript"> 
  22. //jsorder配置 
  23.     $.fn.jsorder.defaults = { 
  24.         staticname: 'jsorder', 
  25.         jsorderclass: 'jsorder', 
  26.         savecookie: true, 
  27.         cookiename: 'jsorder', 
  28.         numpre: 'no_', 
  29.         jsorderpre: 'jsorder_', 
  30.         jsorderspanpre: 'jsorderspan_', 
  31.         pricefiled: 'price', 
  32.         namefiled: 'jsordername', 
  33.         leftdemo: '我的菜单', 
  34.         subbuttom: '', 
  35.         //addbuttom : 'a.jsorderadd',  
  36.         addbuttom: 'td.jsorderadd', 
  37.         nomessage: '你今天的食谱是还空的', 
  38.         dosubmit: function (data) { 
  39.             alert(JSON.stringify(data)); 
  40.             //$("#result").html("json内容：" + JSON.stringify(data)).css('background', '#e0e0e0'); 
  41.             jsonAjax("ShoppingCar.ashx", JSON.stringify(data), "text", getsuccess); 
  42.         } 
  43.     }; 
  44. $("body").jsorder(); 
  45.  
  46. function jsonAjax(url, param, datat, callback) { 
  47.     $.ajax({ 
  48.         type: "post", 
  49.         url: url, 
  50.         data: param, 
  51.         dataType: datat, 
  52.         success: callback, 
  53.         error: function () { 
  54.             jQuery.fn.mBox({ 
  55.                 message: '恢复失败' 
  56.             }); 
  57.         } 
  58.     }); 
  59. }; 
  60.  
  61. function getsuccess(o) { 
  62.     //alert(o); 
  63.     //成功后操作 
  64. } 
  65.    
  66. </script>  
<!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>
[csharp] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <%@ WebHandler Language="C#" Class="ShoppingCar" %> 
  2.  
  3. using System; 
  4. using System.Web; 
  5. using System.Data; 
  6. using System.Web.Script.Serialization; 
  7. using System.Collections.Generic; 
  8. using System.Collections; 
  9. using System.IO; 
  10.  
  11. publicclass ShoppingCar : IHttpHandler 
  12. { 
  13.  
  14.     publicvoid ProcessRequest(HttpContext context) 
  15.     { 
  16.         context.Response.ContentType = "text/plain"; 
  17.         StreamReader reader = new StreamReader(context.Request.InputStream); 
  18.         string jsonString = HttpUtility.UrlDecode(reader.ReadToEnd()); 
  19.         if (MSCL.Until.IsNullOrDBNull(jsonString)) 
  20.         {             
  21.             context.Response.Write("error"); 
  22.         } 
  23.         else 
  24.         { 
  25.             jsonString = "{\"goods\": [" + jsonString + "]}"; 
  26.             DataSet ds = JsonToDataSet(jsonString); //获取的购物车商品列表 
  27.             context.Response.Write("ok"); 
  28.         } 
  29.         context.Response.End(); 
  30.     } 
  32.     #region 解析Json成DataTable 
  33.     /// <summary> 
  34.     /// 解析Json成DataTable 
  35.     /// </summary> 
  36.     /// <param name="Json">Json字符串</param> 
  37.     /// <returns></returns> 
  38.     publicstatic DataSet JsonToDataSet(string Json) 
  39.     { 
  40.         try 
  41.         { 
  42.             DataSet ds = new DataSet(); 
  43.             DataTable dt = new DataTable("shoppingcar"); 
  44.             JavaScriptSerializer JSS = new JavaScriptSerializer(); 
  45.             object obj = JSS.DeserializeObject(Json); 
  46.             Dictionary<string, object> datajson = (Dictionary<string, object>)obj; 
  47.             foreach (var item in datajson) 
  48.             { 
  49.                 object[] rows = (object[])item.Value; 
  50.                 foreach (var row in rows) 
  51.                 { 
  52.                     Dictionary<string, object> valneed = (Dictionary<string, object>)row; 
  53.                     foreach (var needrow in valneed.Values) 
  54.                     { 
  55.                         #region 
  56.                         Dictionary<string, object> val = (Dictionary<string, object>)needrow; 
  57.                         DataRow dr = dt.NewRow(); 
  58.                         foreach (KeyValuePair<string, object> sss in val) 
  59.                         { 
  60.                             if (!dt.Columns.Contains(sss.Key)) 
  61.                             { 
  62.                                 dt.Columns.Add(sss.Key.ToString()); 
  63.                                 dr[sss.Key] = sss.Value; 
  64.                             } 
  65.                             else 
  66.                                 dr[sss.Key] = sss.Value; 
  67.                         } 
  68.                         dt.Rows.Add(dr); 
  69.                         #endregion 
  70.                     } 
  71.                 } 
  72.             } 
  73.             ds.Tables.Add(dt); 
  74.             return ds; 
  75.         } 
  76.         catch 
  77.         { 
  78.             returnnull; 
  79.         } 
  80.     } 
  81.     #endregion 
  82.  
  83.     publicbool IsReusable 
  84.     { 
  85.         get 
  86.         { 
  87.             returnfalse; 
  88.         } 
  89.     } 
  90. }  
<%@ 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;
        }
    }
}
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2.  
  3. <htmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5.     <title>读取本地购物车Cookie</title> 
  6.     <scripttype="text/javascript"src="../js/jquery-1.9.1.min.js"></script>  
  7.     <linkhref="./demo.css"rel="stylesheet"/> 
  8.     <linkhref="../css/order.css"rel="stylesheet"/> 
  9.     <scripttype="text/javascript"src="../js/cookie.js"></script>  
  10.     <scripttype="text/javascript"src="../js/jsorder.1.1.js"></script>  
  11.     <scripttype="text/javascript"> 
  12.         //初始化配置 
  13.         var staticname = 'jsorder'; 
  14.         var jsorderpre = 'jsorder_'; 
  15.         var html = ""; 
  16.  
  17.         $(function () { 
  18.             if ($.cookie(staticname) != null && $.cookie(staticname) != '{}') { 
  19.                 $("#list").html(""); 
  20.                 initdata = eval('(' + $.cookie(staticname) + ')'); //序列化成数组  
  21.                 $("body").data(staticname, initdata); 
  22.                 //alert(JSON.stringify(initdata)); 
  23.                 $.each(initdata, function (index, item) { 
  24.                     //循环获取数据   
  25.                     var Id = initdata[index]["productid"]; 
  26.                     var Name = initdata[index]["name"]; 
  27.                     var Price = initdata[index]["price"]; 
  28.                     var Count = initdata[index]["count"]; 
  29.                     var innerhtml = "<li id='" + jsorderpre + Id + "'>"; 
  30.                     innerhtml += Id + "--" + Name + "--" + Price + " "; 
  31.                     innerhtml += "<ahref='javascript:void(0)'style='text-decoration:none;'onclick='subnum(" + Id + ")'> - </a><spanid='count" + Id + "'>" + Count; 
  32.                     innerhtml += "</span><ahref='javascript:void(0)'style='text-decoration:none;'onclick='addnum(" + Id + ")'> + </a>"; 
  33.                     innerhtml += "</li>" 
  34.                     html += innerhtml; 
  35.                 }); 
  36.                 $("#list").append(html); 
  37.             } 
  38.         }); 
  39.  
  40.         function subnum(id) { 
  41.             var datejsorder = $("body").data(staticname); 
  42.             datejsorder[id]['count'] -= 1; 
  43.             if (datejsorder[id]['count'] > 0) { 
  44.                 $("#count" + id).html(datejsorder[id]['count']); 
  45.             } else { 
  46.                 $("#" + jsorderpre + id).remove(); 
  47.                 delete datejsorder[id]; //del json keyValue 
  48.             } 
  49.             savecookie(datejsorder); 
  50.         } 
  51.  
  52.         function addnum(id, count) { 
  53.             var datejsorder = $("body").data(staticname); 
  54.             datejsorder[id]['count'] += 1; 
  55.             $("#count" + id).html(datejsorder[id]['count']); 
  56.             savecookie(datejsorder); 
  57.         } 
  58.  
  59.         function savecookie(data) { 
  60.             var date = new Date(); 
  61.             date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000)); 
  62.             $.cookie(staticname, JSON.stringify(data), { 
  63.                 path: '/', 
  64.                 expires: date 
  65.             }); 
  66.         } 
  67.  
  68.         function dosubmit() { 
  69.             var datejsorder = $("body").data(staticname); 
  70.             alert(JSON.stringify(datejsorder)); 
  71.             //$("#result").html("json内容：" + JSON.stringify(data)).css('background', '#e0e0e0'); 
  72.             jsonAjax("ShoppingCar.ashx", JSON.stringify(datejsorder), "text", getsuccess); 
  73.         } 
  74.  
  75.         function getsuccess(o) { 
  76.             //alert(o); 
  77.             //成功后操作 
  78.         } 
  79.  
  80.         function jsonAjax(url, param, datat, callback) { 
  81.             $.ajax({ 
  82.                 type: "post", 
  83.                 url: url, 
  84.                 data: param, 
  85.                 dataType: datat, 
  86.                 success: callback, 
  87.                 error: function () { 
  88.                     jQuery.fn.mBox({ 
  89.                         message: '恢复失败' 
  90.                     }); 
  91.                 } 
  92.             }); 
  93.         }; 
  94.           
  95.     </script> 
  96. </head> 
  97. <body> 
  98. <div> 
  99.     <ulid="list"> 
  100.     <li>购物车里暂无商品</li> 
  101.     </ul> 
  102.  
  103.     <inputtype="button"value="确定,下一步"onclick="dosubmit();"/> 
  104. </div> 
  105. </body> 
  106. </html> 
posted @ 2014-05-11 19:53  x_window  阅读(164)  评论(0)    收藏  举报