FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

本论坛已关闭(禁止注册、发帖和回复)
请移步 三石和他的朋友们

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1,快、快、快! 全新ASP.NET Core,比WebForms还简单! 欢迎加入【三石和他的朋友们】(基础版下载)

搜索
查看: 3255|回复: 2
打印 上一主题 下一主题

Fineui的购物车示例怎么用?江湖救急

[复制链接]
跳转到指定楼层
楼主
发表于 2014-9-25 19:46:14 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
购物车示例怎么用?我使用之后显示不正常。貌似是F.ready()没有在页面加载完成之后执行。要怎么来修改?
我的前台代码
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="cart.aspx.cs" Inherits="EmptyProjectNet20.cart" %>

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5.     <title></title>
  6.     <link href="~/res/css/main.css" rel="stylesheet" type="text/css" />
  7.    

  8.     <style>
  9.         body.x-body {
  10.             padding: 0;
  11.         }

  12.         .totalpanel .x-panel-body {
  13.             border-top-width: 0 !important;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.      <form id="form1" runat="server">
  19.         <x:PageManager ID="PageManager1" AutoSizePanelID="Panel2" runat="server" />
  20.         <x:Panel ID="Panel2" runat="server" ShowBorder="false" Layout="VBox" BoxConfigAlign="Stretch"
  21.             BoxConfigPosition="Start" BodyPadding="5px" BoxConfigChildMargin="0 5 0 0"
  22.             ShowHeader="false">
  23.             <Items>
  24.                 <x:Grid ID="Grid1" ShowBorder="true" BoxFlex="1" ShowHeader="true" Title="购物车"
  25.                     EnableCollapse="true" runat="server" EnableCheckBoxSelect="true" CheckBoxSelectOnly="true"
  26.                     DataKeyNames="Id,Code,Name" EnableTextSelection="true">
  27.                     <Columns>
  28.                        
  29.                         <x:BoundField Width="120px" DataField="Code" DataFormatString="{0}" HeaderText="商品代码" />
  30.                         <x:BoundField DataField="Name" ExpandUnusedSpace="true" DataFormatString="{0}" HeaderText="商品名称" />
  31.                         <x:BoundField Width="120px" DataField="Price" HeaderText="商品单价" DataFormatString="¥{0:F}" />
  32.                         <x:TemplateField HeaderText="数量" Width="120px">
  33.                             <ItemTemplate>
  34.                                 <input id="Hidden1" type="hidden" class="price" runat="server" value='<%# Eval("Price") %>' />
  35.                                 <asp:TextBox runat="server" Width="98%" ID="tbxNumber" CssClass="number"
  36.                                     TabIndex='<%# Container.DataItemIndex + 10 %>' Text='<%#Eval("Number")%>' ></asp:TextBox>
  37.                             </ItemTemplate>
  38.                         </x:TemplateField>
  39.                         <x:TemplateField HeaderText="小计" Width="120px">
  40.                             <ItemTemplate>
  41.                                 <asp:Label ID="Label1" runat="server" CssClass="xiaoji" Text= '<%# "¥" + GetXiaoji(Eval("Price"), Eval("Number")) %>'></asp:Label>
  42.                             </ItemTemplate>
  43.                         </x:TemplateField>
  44.                     </Columns>
  45.                 </x:Grid>
  46.                 <x:ContentPanel runat="server" CssClass="totalpanel" ShowBorder="true" ShowHeader="false">
  47.                     <div style="text-align: right; margin: 10px;">
  48.                         <div style="margin-bottom: 10px;">
  49.                             <input  id="TOTAL_NUMBER" name="TOTAL_NUMBER" />
  50.                             <span id="totalNumber" style="color: red;"></span>
  51.                             件商品
  52.                         </div>
  53.                         <div style="margin-bottom: 10px;">
  54.                             <input type="hidden" id="TOTAL_PRICE" name="TOTAL_PRICE" />
  55.                             总计:<span id="totalPrice" style="color: red; font-size: 1.5em; font-weight: bold;"></span>
  56.                         </div>
  57.                         <div>
  58.                             <x:Button runat="server" Text="去结算" Enabled="true" Size="Large" ID="btnGotoPay" OnClick="btnGotoPay_Click"></x:Button>
  59.                         </div>
  60.                         alert("运行到了这里!脚本没有运行呀");
  61.                     </div>
  62.                 </x:ContentPanel>
  63.             </Items>
  64.         </x:Panel>        
  65.     </form>
  66.     <script src="~/res/js/jquery.min.js" type="text/javascript"></script>
  67.     <script type="text/javascript">
  68.         var gridClientID = '<%= Grid1.ClientID %>';
  69.         var btnGotoPayClientID = '<%= btnGotoPay.ClientID %>';
  70.         var numberSelector = '.f-grid-tpl input.number';
  71.         var priceSelector = '.f-grid-tpl input.price';
  72.         function getRowNumber(row) {
  73.             return parseInt(row.find(numberSelector).val(), 10);
  74.         }
  75.         function getRowPrice(row) {
  76.             return parseFloat(row.find(priceSelector).val());
  77.         }

  78.         function updateTotal() {
  79.             var grid = F(gridClientID);
  80.             var selection = grid.getSelectionModel().getSelection();
  81.             var store = grid.getStore();

  82.             var total = 0;
  83.             $.each(selection, function (index, item) {
  84.                 var rowIndex = store.indexOf(item);
  85.                 var row = $(grid.body.el.dom).find('.x-grid-row').eq(rowIndex);
  86.                 total += getRowNumber(row) * getRowPrice(row);
  87.             });

  88.             $('#totalNumber').text(selection.length);
  89.             $('#totalPrice').text("¥" + total.toFixed(2));

  90.             $('#TOTAL_NUMBER').val(selection.length);
  91.             $('#TOTAL_PRICE').val(total.toFixed(2));

  92.             var gotoPayBtn = F(btnGotoPayClientID);
  93.             if (total === 0) {
  94.                 gotoPayBtn.disable();
  95.             } else {
  96.                 gotoPayBtn.enable();
  97.             }
  98.         }

  99.         function registerNumberChangeEvents() {
  100.             var grid = F(gridClientID);

  101.             // 数量改变事件
  102.             // http://stackoverflow.com/questions/17384218/jquery-input-event
  103.             $(grid.el.dom).find(numberSelector).on('input propertychange', function (evt) {
  104.                 var $this = $(this);

  105.                 var row = $this.parents('.x-grid-row');
  106.                 var number = getRowNumber(row);
  107.                 var price = getRowPrice(row);
  108.                 var resultNode = row.find('.f-grid-tpl span.xiaoji');

  109.                 resultNode.text("¥" + (number * price).toFixed(2));

  110.                 updateTotal();
  111.             });
  112.         }

  113.         function registerSelectionChangeEvents() {
  114.             var grid = F(gridClientID);

  115.             grid.on('selectionchange', function (cmp, selected) {
  116.                 updateTotal();
  117.             });
  118.         }

  119.         // 页面第一次加载完成后调用的函数
  120.         F.ready(function () {   
  121.             registerNumberChangeEvents();
  122.             registerSelectionChangeEvents();
  123.             updateTotal();
  124.         });
  125.     </script>
  126. </body>
  127. </html>
复制代码



沙发
 楼主| 发表于 2014-9-26 09:49:09 | 只看该作者
....有没有人回复啊
板凳
发表于 2014-9-26 09:51:18 | 只看该作者
破暝 发表于 2014-9-26 09:49
....有没有人回复啊

你的问题是啥?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|FineUI 官方论坛 ( 皖ICP备2021006167号-1 )

GMT+8, 2024-11-25 23:20 , Processed in 0.054440 second(s), 17 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表