关于GridPanel中的修改保存(转自coolite中文社区)

转载于 2010-08-30 14:47:00 发布 · 1.1k 阅读

收录于

关于Coolite

本文介绍如何使用EasyUI GridPanel实现数据的显示、编辑与保存功能。通过JavaScript和C#配合，实现了GridPanel的数据绑定、保存操作，并演示了具体的实现代码。

原文作者：coolite中文社区实习版主summerduck

js代码，只要在页面写入不需要调用即可

<script type="text/javascript">
var exportData = function(selectedOnly) {
var store = GridPanel1.store;
store.ajaxEventConfig.isUpload = true;
GridPanel1.submitData(selectedOnly);
store.ajaxEventConfig.isUpload = false;
}
var selectRecord = function(id) {
var grid = GridPanel1;
var record = grid.store.getById(id);
grid.store.openPage(record, function() {
grid.getSelectionModel().selectRow(grid.store.indexOf(record));
});
}
</script>

复制代码

页面代码

<ext:ScriptManager ID="ScriptManager1" runat="server">
</ext:ScriptManager>
<ext:Store
ID="Store1"
runat="server"
RefreshAfterSaving="None"
OnBeforeStoreChanged="SaveHandler">
<Reader>
<ext:ArrayReader ReaderID="company">
<Fields>
<ext:RecordField Name="table1" />
<ext:RecordField Name="table3" Type="Float" />
<ext:RecordField Name="table2" Type="Float" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:GridPanel ID="GridPanel1"
runat="server"
StoreID="Store1"
StripeRows="true"
Title="测试"
Width="600"
Height="300"
AutoExpandColumn="Company">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="字段一" Width="160" Sortable="true" DataIndex="table1">
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:Column>
<ext:Column Header="字段二" Width="75" Sortable="true" DataIndex="table2">
<Editor>
<ext:TextField ID="TextField2" runat="server" />
</Editor>
</ext:Column>
<ext:Column Header="字段三" Width="75" Sortable="true" DataIndex="table3">
<Editor>
<ext:TextField ID="TextField3" runat="server" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<LoadMask ShowMask="true" />
<BottomBar>
<ext:PagingToolBar ID="PagingToolBar1" runat="server" PageSize="10" />
</BottomBar>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button6" runat="server" Text="Save" Icon="Disk">
//此处便是执行保存的方法
<Listeners>
<Click Handler="#{GridPanel1}.save();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>