jQuery購物車插件jsorder用法(支持后臺處理程序直接轉換成DataTable處理)

2019-11-20 09:45:35

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

上一篇：AngularJs學習第五篇從Controller控制器談談$scope作用域

下一篇：玩轉JavaScript OOP - 類的實現詳解