Ext.Net学习笔记18：Ext.Net 可编辑的GridPanel

时间：2022-06-12 14:55:53

Ext.Net学习笔记18：Ext.Net 可编辑的GridPanel

Ext.Net GridPanel 有两种编辑模式：编辑单元格和编辑行。

单元格编辑：

Ext.Net学习笔记18：Ext.Net 可编辑的GridPanel

行编辑：

Ext.Net学习笔记18：Ext.Net 可编辑的GridPanel

可以看出，单元格编辑的时候，只有单元格会进入编辑模式，而行编辑模式中则对编辑行的所有可编辑字段统一进行编辑，通过Update进行更新，Cancel进行取消编辑。

要对Ext.Net GridPanel进行编辑，需要进行两步配置：

  1. 配置列的编辑控件（TextField、NumberField、DateField等）
  2. 配置编辑插件（CellEditing、RowEditing）

配置Grid列的编辑控件

在我们的例子中，只对姓名和年龄进行编辑，姓名使用的是TextField控件，年龄使用NumberField控件，列的配置如下：

<ColumnModel>

    <Columns>

        <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server"></ext:RowNumbererColumn>

        <ext:Column runat="server" ID="columnID" Width="100" Text="ID" DataIndex="ID"></ext:Column>

        <ext:Column runat="server" ID="columnName" Width="200" Text="姓名" DataIndex="Name">

            <Editor>

                <ext:TextField runat="server"></ext:TextField>

            </Editor>

        </ext:Column>

        <ext:Column runat="server" ID="columnGender" Width="50" Text="性别" DataIndex="Gender"></ext:Column>

        <ext:NumberColumn runat="server" ID="columnAge" Width="60" Text="年龄" DataIndex="Age" Format="">

            <Editor>

                <ext:NumberField runat="server" MinValue="18" MaxValue="150"></ext:NumberField>

            </Editor>

        </ext:NumberColumn>

    </Columns>

</ColumnModel>

配置Grid编辑插件

ExtJS中有两种Grid的编辑插件，我们将使用代码贴出来。

单元格编辑：

<Plugins>

    <ext:CellEditing runat="server" ClicksToEdit="1"></ext:CellEditing>

</Plugins>

行编辑：

<Plugins>

    <ext:RowEditing runat="server" ClicksToEdit="1"></ext:RowEditing>

</Plugins>

通过上面两个配置，我们已经可以使用Ext.Net GridPanel的编辑功能了。

相关文章