【Ext.Net学习笔记】06:Ext.Net GridPanel的用法(GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel)

简介:

GridPanel 折叠/展开行

Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候。

下面来看看效果:


使用行折叠/展开功能之后,在Ext.Net GridPanel的行头会出现一个展开图标,点击图标以后能够将这一行展开:

使用XTemplate实现行折叠/展开

这是最简单的一种实现,在上一篇文章:【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法) 中的代码基础上我们在GridPanel的定义中加入下面的代码:

复制代码
<Plugins>
    <ext:RowExpander runat="server">
        <Template runat="server">
            <Html>
                <b>姓名:</b><span>{Name}</span>
                <br></br>
                <b>年龄:</b><span>{Age}</span>
            </Html>
        </Template>
    </ext:RowExpander>
</Plugins>
复制代码

这里面使用到了Template,这里面包含了我们展开后要显示的内容,数据就是当前行的数据。

 

从服务器获取展开时显示的数据

通常情况下我们不会一次将所有数据都获取到客户端,而是通过异步加载的方式按需获取要显示的数据
在Ext.Net GridPanel中,如果要在展开的时候从服务器获取数据,我们需要完成如下代码。

第一步:为了配合演示,先为我们的Model添加一个Time属性,我们通过异步的方式去服务器端获取当前时间:

复制代码
<ext:Model ID="UserInfoModel" runat="server" IDProperty="ID">
    <Fields>
        <ext:ModelField Name="ID" Type="Int"></ext:ModelField>
        <ext:ModelField Name="Name" Type="String"></ext:ModelField>
        <ext:ModelField Name="Gender" Type="String"></ext:ModelField>
        <ext:ModelField Name="Age" Type="Int"></ext:ModelField>
        <ext:ModelField Name="Time" Type="String"></ext:ModelField>
    </Fields>
</ext:Model>
复制代码

第二步:修改我们的RowExpander定义,我们需要将Template定义在Bin下,并为RowExpander添加事件:

复制代码
<Bin>
    <ext:XTemplate runat="server" ID="tplDetail">
        <Html>
            <b>姓名:</b><span>{Name}</span>
            <br></br>
            <b>年龄:</b><span>{Age}</span>
            <br></br>
            <b>时间:</b><span>{Time}</span>
        </Html>
    </ext:XTemplate>
</Bin>
<Plugins>
    <ext:RowExpander runat="server">
        <Listeners>
            <Expand Handler="MyApp.onExpand(record.data, #{tplDetail}, #{ctDetail})"></Expand>
        </Listeners>
        <Component>
            <ext:Container runat="server" ID="ctDetail" />
        </Component>
    </ext:RowExpander>
</Plugins>
复制代码

第三步:定义服务器端的DirectMethod方法:

[DirectMethod]
public static string GetDetail(string name)
{
    return DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
}

第四步:定义客户端的Expand方法:

复制代码
var MyApp = {
    onExpand: function (data, template, container) {
        if (data.Time) return;

        App.direct.GetDetail(data.Name, {
                success: function (time) {
                    data.Time = time;
                    template.overwrite(container.getEl(), data);
                },
                eventMask : { showMask : true }
            }
        );
    }
};
复制代码

通过上面这几个步骤,我们就完成了异步获取并显示的功能。效果如下:

GridPanel Selection

接下来是Ext.Net的GridPanel的另外一个功能:选择。

我们在GridPanel最开始的用法中已经见识过如何使用选择功能,今天我们这片笔记将更加详细的介绍Ext.Net GridPanel的Selection功能。

Ext.Net GridPanel Selection包括三种:

  • RowSelectionModel:行选择模型
  • CheckboxSelectionModel:带有复选框的行选择模型
  • CellSelectionModel:单元格选择模型

默认情况下,GridPanel使用RowSelectionModel,能够进行单选,如果要GridPanel能够进行多选,需要在GridPanel中添加属性:

<ext:GridPanel runat="server" ID="grid" 
    ColumnLines="true" Width="500" Height="200" 
    MultiSelect="true">

下面我们来分别看一下这三种模型的用法

RowSelectionModel

效果如下:

实现代码:

<ext:GridPanel runat="server" ID="grid" 
    ColumnLines="true" Width="500" Height="200" 
    MultiSelect="true">

在RowSelectionModel的配置中,属性Mode表示选择的类型,分别是Single(单选)、Multi(多选)和Simple(简单多选)

单选和多选的区别很明显,我们来说一下Multi和Simple的区别:

  • multi:多选,但需要使用键盘Ctrl、Shift来配合完成。在实际使用的过程中你会发现,单纯的鼠标单击并不能实现多选,需要同时按下Ctrl键才能多选,如果要选择一个区域,则可以同时按下Shift键。
  • Simple:多选,不需要Ctrl或Shift键的配合。只使用鼠标即可实现多选。

 

CheckboxSelectionModel

效果如图:

代码如下:

<ext:CheckboxSelectionModel runat="server" 
    Mode="Multi" InjectCheckbox="1">
</ext:CheckboxSelectionModel>

Mode属性与RowSelectionModel中的Mode属性功能相同,不在赘言。

InjectCheckbox属性用来决定Checkbox列显示在什么位置(第几列),默认为0,从第0列开始。

 

CellSelectionModel

效果如图:

代码如下:

 

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

我试了一下,好像是只能选中一个单元格。

查了ExtJS API以后发现确实只能选择一个单元格,它同样也有一个Mode属性,但这个属性只有一个可用值:Single。

 

客户端获取选择的值

由于这系列比较偏重服务器端的处理,所以这个地方简单的说一下客户端获取值的方法,代码如下:

var selectedRows = grid.getSelectionModel().getSelection();

grid是我们的GridPanel,首选获取它的选择模型,得到模型之后,再从选择模型中得到选中的内容。

 

服务器端获取选择的值

对于服务器端来说,我们可以用同样的思路来获取选中的值。

复制代码
var selectionModel = grid.GetSelectionModel() as RowSelectionModel;

if (selectionModel.SelectedRows.Count == 0)
{
    X.MessageBox.Alert("提示", "没有选中行").Show();
    return;
}

string ids = string.Empty;
foreach (var item in selectionModel.SelectedRows)
{
    ids += "," + item.RecordID;
}
ids = ids.Trim(',');

X.MessageBox.Alert("提示", ids).Show();
复制代码

注意:如果Store所关联的Model没有设置IDProperty,将导致无法获取RecordID

 

上面的代码是针对RowSelectionModel和CheckboxSelectionModel来说的,如果是CellSelectionModel,我们还可以获取到单元格的值等内容:

复制代码
var cellModel = grid.GetSelectionModel() as CellSelectionModel;
//获取记录ID
var recordId = cellModel.SelectedCell.RecordID;
//获取单元格值
var cellValue = cellModel.SelectedCell.Value;
//获取列名称
var columnName = cellModel.SelectedCell.Name;
//获取列号
var columnIndex = cellModel.SelectedCell.ColIndex;
//获取行号
var rowIndex = cellModel.SelectedCell.RowIndex;
复制代码

 

 可编辑的GridPanel

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

单元格编辑:

行编辑:

可以看出,单元格编辑的时候,只有单元格会进入编辑模式,而行编辑模式中则对编辑行的所有可编辑字段统一进行编辑。

要对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的编辑功能了。






本文转自秋楓博客园博客,原文链接:http://www.cnblogs.com/yc-755909659/p/3766004.html,如需转载请自行联系原作者
目录
相关文章
|
7月前
|
存储 开发框架 NoSQL
ASP.NET WEB——项目中Cookie与Session的用法
ASP.NET WEB——项目中Cookie与Session的用法
91 0
|
3月前
|
数据采集 JSON API
.NET 3.5 中 HttpWebRequest 的核心用法及应用
【9月更文挑战第7天】在.NET 3.5环境下,HttpWebRequest 类是处理HTTP请求的一个核心组件,它封装了HTTP协议的细节,使得开发者可以方便地发送HTTP请求并接收响应。本文将详细介绍HttpWebRequest的核心用法及其实战应用。
136 6
|
3月前
|
自然语言处理 C# 图形学
使用dnSpyEx对.NET Core程序集进行反编译、编辑和调试
使用dnSpyEx对.NET Core程序集进行反编译、编辑和调试
|
4月前
|
开发框架 前端开发 .NET
闲话 ASP.NET Core 数据校验(二):FluentValidation 基本用法
闲话 ASP.NET Core 数据校验(二):FluentValidation 基本用法
|
6月前
|
自然语言处理 C# 图形学
​一款开源的.NET程序集反编译、编辑和调试神器
本文介绍了.NET反编译和调试工具dnSpyEx的使用方法。dnSpyEx是dnSpy的非官方Fork版本,支持.NET Framework、.NET Core和Unity程序集的调试和编辑,具有多种语言界面。主要功能包括:浅色、蓝色和深色主题,调试支持,代码编辑以及多语言支持。用户可以从GitHub下载并直接运行dnSpyEx,无需安装。通过创建测试项目,编译成dll文件,然后使用dnSpyEx进行调试和编辑程序集中的代码和IL指令。此外,文章还提供了项目源码地址和相关优秀项目的链接。
128 0
|
7月前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
85 0
|
3月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
44 7
|
3月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
68 0
|
4月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
53 0
|
4月前
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?