jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)

前端技术 2023/09/04 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/11553

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案