gridpanel 表格添加修改

最新推荐文章于 2020-07-08 10:55:31 发布

原创最新推荐文章于 2020-07-08 10:55:31 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext #server #button #function #header #string

Coolite Toolkit EXt 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用ExtJS实现网格数据的绑定、编辑及保存功能，包括数据加载、排序、分页、编辑行的处理及保存更改等内容。

/// <summary> /// 绑定列表 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void StoreSM_RefreshData(object sender, StoreRefreshDataEventArgs e) { startIndex = e.Start + 1; endIndex = e.Start + PagingToolBar1.PageSize; if (e.Dir == Coolite.Ext.Web.SortDirection.ASC) { orderType = 0; } e.TotalCount = SM.GetListCount(); StoreSMS.DataSource = b_T_ITIMS_SMS.GetList(e.Sort, startIndex, endIndex, orderType); StoreSMS.DataBind(); } /// <summary> /// 执行保存操作 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void SaveHandler(object sender, BeforeStoreChangedEventArgs e) { //Dictionary<string, string>[] companies = JSON.Deserialize<Dictionary<string, string>[]>(json); string json = e.DataHandler.JsonData; StoreDataHandler dataHandler = new StoreDataHandler(json); ChangeRecords<Entity.SM> data = dataHandler.ObjectData<Entity.SM>(); foreach (Entity.SM model in data.Created) { } //删除操作 data.Deleted foreach (Entity.SM model in data.Deleted) { !b_SM.Delete(model.ID) } } /// <summary> /// 页面编辑未提交弹窗 /// </summary> public static void ShowNotification() { Ext.Notification.Show(new Notification.Config { // CloseVisible = false, Closable = false, AutoHide = false, Height = 40, Width = 130, ID = "notificationChange", Icon = Icon.Information, AlignCfg = new Notification.AlignConfig { ElementAnchor = AnchorPoint.Center, TargetAnchor = AnchorPoint.Top, OffsetY = 30 }, BodyStyle = "padding:5px;background:#fff;color:#f20;text-align:center;", ShowFx = new Frame { Color = "C3DAF9", Count = 1, Options = new Fx.Config { Duration = 2 } }, HideFx = new SwitchOff(), Html = Resources.Resource1.NotificationMsg }); } <mce:script type="text/javascript"></mce:script> <ext:Store ID="StoreDepartment" runat="server"> <Reader> <ext:JsonReader ReaderID="ID"> <Fields> <ext:RecordField Name="ID" /> <ext:RecordField Name="Name" /> </Fields> </ext:JsonReader> </Reader> <%--<Listeners> <Load Handler="#{ComboBoxDepartment}.setValue(#{ComboBoxDepartment}.store.getAt(0).get('ID'));" /> </Listeners> --%> </ext:Store> <ext:Store ID="StoreSM" runat="server" WarningOnDirty="false" AutoLoad="true" RemoteSort="true" OnBeforeStoreChanged="SaveHandler" OnRefreshData="StoreSMS_RefreshData" > <Proxy> <ext:DataSourceProxy> </ext:DataSourceProxy> </Proxy> <Reader> <ext:JsonReader ReaderID="SMID"> <Fields> <ext:RecordField Name="SMID" Type="Int" /> <ext:RecordField Name="Num" Type="Int" /> <ext:RecordField Name="DepartmentID" Type="String" /> </Fields> </ext:JsonReader> </Reader> <AutoLoadParams> <ext:Parameter Name="start" Value="0" Mode="Raw"> </ext:Parameter> </AutoLoadParams> <SortInfo Field="AddTime" Direction="DESC"> </SortInfo> <Listeners> <LoadException Handler="Ext.MessageBox.alert('Load failed', response.statusText);" /> <Update Fn="notiShow"/> </Listeners> </ext:Store> <ext:GridPanel ID="GridPanelSM" runat="server" Header="false" Border="false" StoreID="StoreSM" AutoExpandColumn="SendNum" TrackMouseOver="true" ClicksToEdit="1" AutoHeight="true" > <ColumnModel ID="ColumnModel1" runat="server"> <Columns> <ext:Column ColumnID="SMID" DataIndex="SMID" Header="SMID" Hidden="true"> </ext:Column> <ext:Column ColumnID="DepartmentID" DataIndex="DepartmentID" Width="200" Header="部门"> <Renderer Fn="departmentRenderer" /> <Editor> <ext:ComboBox ID="ComboBoxDepartment" runat="server" Shadow="Drop" Mode="Local" TriggerAction="All" StoreID="StoreDepartment" DisplayField="Name" ValueField="ID" EmptyText="请选择部门" AllowBlank="false"> <Listeners> <Blur Fn="showResult" /> </Listeners> </ext:ComboBox> </Editor> </ext:Column> <ext:Column ColumnID="SendNum" DataIndex="SendNum" Width="200" Header="可发送数量" > <Editor> <ext:NumberField ID="NumberField1" runat="server" MinValue="0" MaxValue="999999" AllowBlank="false" > <Listeners> <Blur Fn="showResult" /> </Listeners> </ext:NumberField> </Editor> </ext:Column> </Columns> </ColumnModel> <SelectionModel> <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server"> <CustomConfig> <ext:ConfigItem Name="checkOnly" Value="true" Mode="Raw" /> </CustomConfig> </ext:CheckboxSelectionModel> </SelectionModel> <TopBar> <ext:Toolbar ID="Toolbar1" runat="server"> <Items> <ext:ToolbarFill /> <ext:Button ID="ButtonAdd" runat="server" Text="添加" Icon="Add"> <Listeners> <Click Handler="#{GridPanelSMS}.insertRecord(0, {SendNum:0,DepartmentID:#{ComboBoxDepartment}.store.getAt(0).get('ID')});#{GridPanelSM}.getView().focusRow(0);#{GridPanelSM}.startEditing(0,2); " /> </Listeners> </ext:Button> <ext:ToolbarSeparator /> <ext:Button ID="btnDelete" runat="server" Text="删除" Icon="Delete"> <Listeners> <Click Handler=" Ext.MessageBox.confirm('提示','确定删除吗？', function(button,text){ if(button=='yes'){ #{GridPanelSM}.deleteSelected(); NotificationClose(); #{StoreSMS}.save(); } }); " /> </Listeners> <ToolTips> <ext:ToolTip ID="ToolTip1" runat="server" Title="删除选中行"></ext:ToolTip> </ToolTips> </ext:Button> <ext:ToolbarSeparator /> <ext:Button ID="ButtonSave" runat="server" Text="保存" Icon="Disk"> <Listeners> <Click Handler="NotificationClose();#{StoreSM}.save();" /> </Listeners> <%-- <AjaxEvents> <Click OnEvent="ButtonSave_Click"> <EventMask ShowMask="true" MinDelay="500"/> <Confirmation /> </Click> </AjaxEvents>--%> </ext:Button> </Items> </ext:Toolbar> </TopBar> <BottomBar> <ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="10" StoreID="StoreSMS" /> </BottomBar> <Listeners> <CellClick Fn="cellClick" /> <%--<BeforeEdit Handler="return !(e.field=='BankID' && !e.record.newRecord);" />--%> </Listeners> <LoadMask ShowMask="true" /> <SaveMask ShowMask="true" /> </ext:GridPanel>

单元格数据修改时触发 <Update Fn="notiShow"/> 如果新增一条记录每个单元格都会触发notiShow()

<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1"   runat="server">
            <CustomConfig>
                 <ext:ConfigItem Name="userID" Value="true" Mode="Raw" />
            </CustomConfig>
        </ext:CheckboxSelectionModel>

不点击多选框时也选中当前行

关键代码： <ext:ConfigItem Name="userID" Value="true" Mode="Raw" />

ctl02_GridPanel2.store.deleted 取到删除行值

ctl02_GridPanel2..selModel.getSelections() 获取选择行