Ext.Net学习笔记14:Ext.Net GridPanel Grouping用法

Ext.Net学习笔记14:Ext.Net GridPanel Grouping用法

Ext.Net GridPanel可以进行Group操作,例如:

如何启用Grouping功能呢?只需要在GridPanel中添加一行配置节点:

<Features>
    <ext:GridFilters ID="GridFilters1" runat="server" Local="true">
        <Filters>
            <ext:StringFilter DataIndex="Name"></ext:StringFilter>
        </Filters>
    </ext:GridFilters>
    <ext:Grouping runat="server"></ext:Grouping>
</Features>

加上这一行代码之后,我们的GridPanel就具备了分组的功能。此时我们的每一列都可以分组,如果要禁用某一列分组,可以使用下面的代码来完成:

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

在Column中添加Groupable属性,并将值设置为false,就可以禁用列的分组功能。

自定义Group标题

我们可以自定义Group的标题:

<ext:Grouping runat="server" GroupHeaderTplString="{columnName}:{name}"></ext:Grouping>

自定义标题是通过Tpl模板来实现的,因此我们只要符合Tpl的格式就可以了。

下面我们为标题添加上分组的行数:

代码如下:

<ext:Grouping runat="server"
    GroupHeaderTplString="{columnName}:{name}{[MyApp.formatGroupSummary(values)]}"></ext:Grouping>

JS方法:

var MyApp = {
    formatGroupSummary: function (values) {
        var rows = values.rows,
        numRows = rows.length;
        return Ext.String.format("(共 {0} 条)", numRows);
    }
};

注意,Group分组只对当前页有效,并且只在客户端完成。

时间: 2024-10-03 22:49:06

Ext.Net学习笔记14:Ext.Net GridPanel Grouping用法的相关文章

【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.汇

Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法

Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法 这篇笔记将介绍如何使用Ext.Net GridPanel 中使用Sorter. 默认情况下,Ext.Net GridPanel中的列都具有排序功能,效果如下: 如果要禁用列排序,需要在列模型中添加一个属性Sortable="false" 客户端排序 排序是对Store的操作.如果我们要在一个Store中加入排序,可以使用下面的配置: <Sorters> <ext:DataSorter P

Ext.Net学习笔记16:Ext.Net GridPanel 折叠/展开行

Ext.Net学习笔记16:Ext.Net GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之后,在Ext.Net GridPanel的行头会出现一个展开图标,点击图标以后能够将这一行展开: 使用XTemplate实现行折叠/展开 这是最简单的一种实现,我们只需要在GridPanel的定义中加入下面的代码: <Plugins> <ext:R

Ext.Net学习笔记15:Ext.Net GridPanel 汇总(Summary)用法

Ext.Net学习笔记15:Ext.Net GridPanel 汇总(Summary)用法 Summary的用法和Group一样简单,分为两步: 启用Summary功能 在Feature标签内,添加如下代码: <ext:Summary runat="server"></ext:Summary> 使用汇总列 然后我们需要在ColumnModel中使用SummaryColumn: <ext:SummaryColumn runat="server&qu

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

Ext.Net学习笔记18:Ext.Net 可编辑的GridPanel Ext.Net GridPanel 有两种编辑模式:编辑单元格和编辑行. 单元格编辑: 行编辑: 可以看出,单元格编辑的时候,只有单元格会进入编辑模式,而行编辑模式中则对编辑行的所有可编辑字段统一进行编辑,通过Update进行更新,Cancel进行取消编辑. 要对Ext.Net GridPanel进行编辑,需要进行两步配置: 配置列的编辑控件(TextField.NumberField.DateField等) 配置编辑插件(

Ext.Net学习笔记17:Ext.Net GridPanel Selection

Ext.Net学习笔记17:Ext.Net GridPanel Selection 接下来是Ext.Net的GridPanel的另外一个功能:选择. 我们在GridPanel最开始的用法中已经见识过如何使用选择功能,今天我们这片笔记将更加详细的介绍Ext.Net GridPanel的Selection功能. Ext.Net GridPanel Selection包括三种: RowSelectionModel:行选择模型 CheckboxSelectionModel:带有复选框的行选择模型 Cel

【Ext.Net学习笔记】02:Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局

Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的,有基础的可以看下,可以百度到PDF文档的. Ext.Net与ExtJS代码比较 上一篇中我们创建了一个使用Ext.Net创建了一个window窗口,代码非常简单: <ext:Window runat="server" ID="win" Title="示

Ext.Net学习笔记22:Ext.Net Tree 用法详解

Ext.Net学习笔记22:Ext.Net Tree 用法详解 上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat="server"> <Root> <ext:Node Text="根节点" Expanded="true"> <Children> <ext:Node Text="节点1" Expand

【Ext.Net学习笔记】01:在ASP.NET WebForm中使用Ext.Net

Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http://www.ext.net/download/示例地址:http://examples.ext.net/ 1.首先下载Ext.Net,地址:http://www.ext.net/download/ ,有两种框架选择,选择下载WebForms 当前版本是2.5.1,压缩包里面包含了不同版本,分别用在相应.