Fineui的购物车示例怎么用？江湖救急 - FineUI 官方论坛

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="cart.aspx.cs" Inherits="EmptyProjectNet20.cart" %>
<!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 runat="server">
<title></title>
<link href="~/res/css/main.css" rel="stylesheet" type="text/css" />
<style>
body.x-body {
padding: 0;
}
.totalpanel .x-panel-body {
border-top-width: 0 !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<x:PageManager ID="PageManager1" AutoSizePanelID="Panel2" runat="server" />
<x:Panel ID="Panel2" runat="server" ShowBorder="false" Layout="VBox" BoxConfigAlign="Stretch"
BoxConfigPosition="Start" BodyPadding="5px" BoxConfigChildMargin="0 5 0 0"
ShowHeader="false">
<Items>
<x:Grid ID="Grid1" ShowBorder="true" BoxFlex="1" ShowHeader="true" Title="购物车"
EnableCollapse="true" runat="server" EnableCheckBoxSelect="true" CheckBoxSelectOnly="true"
DataKeyNames="Id,Code,Name" EnableTextSelection="true">
<Columns>
<x:BoundField Width="120px" DataField="Code" DataFormatString="{0}" HeaderText="商品代码" />
<x:BoundField DataField="Name" ExpandUnusedSpace="true" DataFormatString="{0}" HeaderText="商品名称" />
<x:BoundField Width="120px" DataField="Price" HeaderText="商品单价" DataFormatString="¥{0:F}" />
<x:TemplateField HeaderText="数量" Width="120px">
<ItemTemplate>
<input id="Hidden1" type="hidden" class="price" runat="server" value='<%# Eval("Price") %>' />
<asp:TextBox runat="server" Width="98%" ID="tbxNumber" CssClass="number"
TabIndex='<%# Container.DataItemIndex + 10 %>' Text='<%#Eval("Number")%>' ></asp:TextBox>
</ItemTemplate>
</x:TemplateField>
<x:TemplateField HeaderText="小计" Width="120px">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" CssClass="xiaoji" Text= '<%# "¥" + GetXiaoji(Eval("Price"), Eval("Number")) %>'></asp:Label>
</ItemTemplate>
</x:TemplateField>
</Columns>
</x:Grid>
<x:ContentPanel runat="server" CssClass="totalpanel" ShowBorder="true" ShowHeader="false">
<div style="text-align: right; margin: 10px;">
<div style="margin-bottom: 10px;">
<input id="TOTAL_NUMBER" name="TOTAL_NUMBER" />
<span id="totalNumber" style="color: red;"></span>
件商品
</div>
<div style="margin-bottom: 10px;">
<input type="hidden" id="TOTAL_PRICE" name="TOTAL_PRICE" />
总计：<span id="totalPrice" style="color: red; font-size: 1.5em; font-weight: bold;"></span>
</div>
<div>
<x:Button runat="server" Text="去结算" Enabled="true" Size="Large" ID="btnGotoPay" OnClick="btnGotoPay_Click"></x:Button>
</div>
alert("运行到了这里！脚本没有运行呀");
</div>
</x:ContentPanel>
</Items>
</x:Panel>
</form>
<script src="~/res/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var gridClientID = '<%= Grid1.ClientID %>';
var btnGotoPayClientID = '<%= btnGotoPay.ClientID %>';
var numberSelector = '.f-grid-tpl input.number';
var priceSelector = '.f-grid-tpl input.price';
function getRowNumber(row) {
return parseInt(row.find(numberSelector).val(), 10);
}
function getRowPrice(row) {
return parseFloat(row.find(priceSelector).val());
}
function updateTotal() {
var grid = F(gridClientID);
var selection = grid.getSelectionModel().getSelection();
var store = grid.getStore();
var total = 0;
$.each(selection, function (index, item) {
var rowIndex = store.indexOf(item);
var row = $(grid.body.el.dom).find('.x-grid-row').eq(rowIndex);
total += getRowNumber(row) * getRowPrice(row);
});
$('#totalNumber').text(selection.length);
$('#totalPrice').text("￥" + total.toFixed(2));
$('#TOTAL_NUMBER').val(selection.length);
$('#TOTAL_PRICE').val(total.toFixed(2));
var gotoPayBtn = F(btnGotoPayClientID);
if (total === 0) {
gotoPayBtn.disable();
} else {
gotoPayBtn.enable();
}
}
function registerNumberChangeEvents() {
var grid = F(gridClientID);
// 数量改变事件
// http://stackoverflow.com/questions/17384218/jquery-input-event
$(grid.el.dom).find(numberSelector).on('input propertychange', function (evt) {
var $this = $(this);
var row = $this.parents('.x-grid-row');
var number = getRowNumber(row);
var price = getRowPrice(row);
var resultNode = row.find('.f-grid-tpl span.xiaoji');
resultNode.text("￥" + (number * price).toFixed(2));
updateTotal();
});
}
function registerSelectionChangeEvents() {
var grid = F(gridClientID);
grid.on('selectionchange', function (cmp, selected) {
updateTotal();
});
}
// 页面第一次加载完成后调用的函数
F.ready(function () {
registerNumberChangeEvents();
registerSelectionChangeEvents();
updateTotal();
});
</script>
</body>
</html>

复制代码