205 lines
8.2 KiB
Plaintext
205 lines
8.2 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="grid_editor_cell_updatesummary.aspx.cs"
|
||
Inherits="FineUI.Examples.grid.grid_editor_cell_updatesummary" %>
|
||
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head runat="server">
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
<title></title>
|
||
<link href="../res/css/common.css" rel="stylesheet" type="text/css" />
|
||
<style>
|
||
.f-grid-row-summary .f-grid-cell-inner {
|
||
font-weight: bold;
|
||
color: red;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<form id="form1" runat="server">
|
||
<f:PageManager ID="PageManager1" runat="server" />
|
||
<f:Grid ID="Grid1" ShowBorder="true" ShowHeader="true" Title="表格（单击编辑）" EnableCollapse="true" Width="850px"
|
||
runat="server" DataKeyNames="Id,Name" AllowCellEditing="true"
|
||
ClicksToEdit="1" EnableSummary="true" SummaryPosition="Flow">
|
||
<Toolbars>
|
||
<f:Toolbar ID="Toolbar1" runat="server">
|
||
<Items>
|
||
<f:Button ID="btnNew" Text="新增数据" Icon="Add" EnablePostBack="false" runat="server">
|
||
<Listeners>
|
||
<f:Listener Event="click" Handler="onAddClick" />
|
||
</Listeners>
|
||
</f:Button>
|
||
<f:Button ID="btnDelete" Text="删除选中行" Icon="Delete" EnablePostBack="false" runat="server">
|
||
<Listeners>
|
||
<f:Listener Event="click" Handler="onDeleteClick" />
|
||
</Listeners>
|
||
</f:Button>
|
||
<f:ToolbarFill runat="server">
|
||
</f:ToolbarFill>
|
||
<f:Button ID="btnReset" Text="重置表格数据" EnablePostBack="false" runat="server">
|
||
<Listeners>
|
||
<f:Listener Event="click" Handler="onResetClick" />
|
||
</Listeners>
|
||
</f:Button>
|
||
</Items>
|
||
</f:Toolbar>
|
||
</Toolbars>
|
||
<Columns>
|
||
<f:TemplateField ColumnID="Number" Width="60px">
|
||
<ItemTemplate>
|
||
<asp:Label ID="Label1" runat="server" Text='<%# Container.DataItemIndex + 1 %>'></asp:Label>
|
||
</ItemTemplate>
|
||
</f:TemplateField>
|
||
<f:RenderField Width="100px" ColumnID="Name" DataField="Name" FieldType="String"
|
||
HeaderText="姓名">
|
||
<Editor>
|
||
<f:TextBox ID="tbxEditorName" runat="server">
|
||
</f:TextBox>
|
||
</Editor>
|
||
</f:RenderField>
|
||
<f:RenderField Width="100px" ColumnID="Gender" DataField="Gender" FieldType="Int"
|
||
RendererFunction="renderGender" HeaderText="性别">
|
||
<Editor>
|
||
<f:DropDownList Required="true" runat="server">
|
||
<f:ListItem Text="男" Value="1" />
|
||
<f:ListItem Text="女" Value="0" />
|
||
</f:DropDownList>
|
||
</Editor>
|
||
</f:RenderField>
|
||
<f:RenderField Width="100px" ColumnID="Major" DataField="Major" FieldType="String"
|
||
ExpandUnusedSpace="true" HeaderText="所学专业">
|
||
<Editor>
|
||
<f:TextBox ID="tbxEditorMajor" Required="true" runat="server">
|
||
</f:TextBox>
|
||
</Editor>
|
||
</f:RenderField>
|
||
<f:RenderField Width="100px" ColumnID="ChineseScore" DataField="ChineseScore" FieldType="Int"
|
||
HeaderText="语文成绩">
|
||
<Editor>
|
||
<f:NumberBox ID="TextBox1" NoDecimal="true" NoNegative="true" Required="true" runat="server">
|
||
</f:NumberBox>
|
||
</Editor>
|
||
</f:RenderField>
|
||
<f:RenderField Width="100px" ColumnID="MathScore" DataField="MathScore" FieldType="Int"
|
||
HeaderText="数学成绩">
|
||
<Editor>
|
||
<f:NumberBox ID="NumberBox1" NoDecimal="true" NoNegative="true" Required="true" runat="server">
|
||
</f:NumberBox>
|
||
</Editor>
|
||
</f:RenderField>
|
||
<f:RenderField ColumnID="Delete" Width="80px" RendererFunction="renderDelete"></f:RenderField>
|
||
</Columns>
|
||
<Listeners>
|
||
<f:Listener Event="afteredit" Handler="onGridAfterEdit" />
|
||
</Listeners>
|
||
</f:Grid>
|
||
<br />
|
||
<f:Button ID="Button2" runat="server" Text="保存数据" OnClick="Button2_Click">
|
||
</f:Button>
|
||
<br />
|
||
<br />
|
||
<f:Label ID="labResult" EncodeText="false" runat="server">
|
||
</f:Label>
|
||
<br />
|
||
注：编辑[语文成绩]或者[数学成绩]时会更新合计行数据。
|
||
</form>
|
||
<script>
|
||
|
||
var grid1ClientID = '<%= Grid1.ClientID %>';
|
||
|
||
function renderDelete() {
|
||
return '<a href="javascript:;" class="action-btn delete"><img class="f-grid-imagefield" src="../res/icon/delete.png"></a>';
|
||
}
|
||
|
||
function renderGender(value) {
|
||
return value == 1 ? '男' : '女';
|
||
}
|
||
|
||
|
||
function updateSummary() {
|
||
var me = F(grid1ClientID), chineseTotal = 0, mathTotal = 0, allTotal = 0;
|
||
me.getRowEls().each(function (index, tr) {
|
||
chineseTotal += me.getCellValue(tr, 'ChineseScore');
|
||
mathTotal += me.getCellValue(tr, 'MathScore');
|
||
});
|
||
|
||
// 第三个参数 true，强制更新，不显示左上角的更改标识
|
||
me.updateSummaryCellValue('ChineseScore', chineseTotal, true);
|
||
me.updateSummaryCellValue('MathScore', mathTotal, true);
|
||
}
|
||
|
||
function onGridAfterEdit(event, value, params) {
|
||
updateSummary();
|
||
}
|
||
|
||
// 点击新增按钮
|
||
function onAddClick() {
|
||
F(grid1ClientID).addNewRecord({
|
||
"Name": "新用户",
|
||
"Gender": "1",
|
||
"Major": "化学系",
|
||
"ChineseScore": 0,
|
||
"MathScore": 0
|
||
}, true);
|
||
}
|
||
|
||
// 点击重置按钮
|
||
function onResetClick() {
|
||
F.confirm({
|
||
message: '确定要重置表格数据？',
|
||
ok: function () {
|
||
F(grid1ClientID).rejectChanges();
|
||
|
||
// 重置表格后，要记得更新合计行
|
||
updateSummary();
|
||
}
|
||
});
|
||
}
|
||
|
||
// 点击删除按钮
|
||
function onDeleteClick() {
|
||
var grid1 = F(grid1ClientID);
|
||
if (!grid1.hasSelection()) {
|
||
F.alert('请至少选择一项！');
|
||
return false;
|
||
}
|
||
|
||
F.confirm({
|
||
message: '删除选中行？',
|
||
ok: function () {
|
||
grid1.deleteSelectedRows();
|
||
|
||
// 删除行后，要记得更新合计行
|
||
updateSummary();
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
// 页面渲染完毕
|
||
F.ready(function () {
|
||
|
||
// 注册表格行内删除事件
|
||
var grid1 = F(grid1ClientID);
|
||
grid1.el.on('click', '.action-btn.delete', function () {
|
||
var targetEl = $(this);
|
||
var rowEl = targetEl.parents('.f-grid-row');
|
||
var rowData = grid1.getRowData(rowEl);
|
||
|
||
F.confirm({
|
||
message: '删除选中行？',
|
||
ok: function () {
|
||
grid1.deleteRow(rowData.id);
|
||
|
||
// 删除行后，要记得更新合计行
|
||
updateSummary();
|
||
}
|
||
});
|
||
|
||
});
|
||
|
||
});
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|