Ext.NET 基础学习笔记07 (GridPanel用法)

1.GridPanel用于显示数据表格,与ASP.NET的GridView类似

    <ext:ResourceManager runat="server"></ext:ResourceManager>
    <form id="form1" runat="server">
        <ext:GridPanel runat="server" ID="grid" ColumnLines="true" Width="500" Height="200">
            <Store>
                <ext:Store runat="server" ID="storeUserInfo">
                    <Model>
                        <ext:Model runat="server" ID="UserInfoModel" 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>
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <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"></ext:Column>
                    <ext:Column runat="server" ID="columnGender" Width="50" Text="性别" DataIndex ="Gender"></ext:Column>
                    <ext:Column runat="server" ID="columnAge" Width="60" Text="年龄" DataIndex="Age"></ext:Column>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </form>

 后台C#代码:

  storeUserInfo.DataSource = UserInfo.GetData();
  storeUserInfo.DataBind();

ColumnModel是列模型，它表示列的显示方式。下面来看一下它的主要属性：
--DataIndex：要显示的字段名，与Store中ModelField的Name相对应。
--Text：列头（标题），相当于HeaderText
--Width：列宽，如果要想该列自动填充，则需要使用Flex属性

 1.2异步加载数据(数据源数据发生变化时能够及时展现到客户端)

   <ext:GridPanel runat="server" ID="grid" ColumnLines="true" Width="800" Height="300">
            <Store>
                <ext:Store runat="server" ID="storeUserInfo" PageSize="5"  OnReadData="storeUserInfo_ReadData">
                    <Model>
                        <ext:Model runat="server" ID="UserInfoModel" 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>
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Proxy>
                        <ext:PageProxy></ext:PageProxy>
                    </Proxy>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server"></ext:RowNumbererColumn>
                    <ext:Column runat="server" ID="columnName" Width="200" Text="名称" DataIndex="Name"></ext:Column>
                    <ext:Column runat="server" ID="columnGender" Width="50" Text="性别" DataIndex="Gender"></ext:Column>
                    <ext:Column runat="server" ID="columnAge" Width="60" Text="年龄" DataIndex="Age"></ext:Column>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server" Mode="Multi"></ext:CheckboxSelectionModel>
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolbar runat="server" ID="pgBar" StoreID="storeUserInfo"></ext:PagingToolbar>
            </BottomBar>
  </ext:GridPanel>

  后台C#代码:

  protected void storeUserInfo_ReadData(object sender, Ext.Net.StoreReadDataEventArgs e)
  {
            int start = e.Start;　　　　　　　　//点击分页栏e.Start自动变更
            int limit = e.Limit;　　　　　　　　//e.Limit => 页面的PageSize

            var userInfoList = lsUsers;
            e.Total = userInfoList.Count;

            storeUserInfo.DataSource = userInfoList.Skip(start).Take(limit).ToList();
            storeUserInfo.DataBind();
  }

2.GridPanel分页

  <Store>
           <ext:Store runat="server" ID="storeUserInfo" PageSize="5">
                    <Model>
                        <ext:Model runat="server" ID="UserInfoModel" 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>
                            </Fields>
                        </ext:Model>
                    </Model>
           </ext:Store>
  </Store>

  添加ButtomBar:

 <BottomBar>
                <ext:PagingToolbar runat="server" ID="pgBar" StoreID="storeUserInfo"></ext:PagingToolbar>
  </BottomBar>

3.显示行号

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

4.显示复选框

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

5.排序

 默认情况下，Ext.Net GridPanel中的列都具有排序功能

 如果要禁用列排序，需要在列模型中添加一个属性Sortable="false"

 5.1 客户端排序

  当采用一次性加载所有数据时将会所有数据进行排序后显示出来,

  当采用异步的方式(设置了OnReadData属性),其将会排序每一页的记录. 

  <ext:Store runat="server" ID="storeUserInfo" PageSize="5">
             <Model>
                        <ext:Model runat="server" ID="UserInfoModel" 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>
                            </Fields>
                        </ext:Model>
               </Model>
               <Sorters>
                        <ext:DataSorter Direction="DESC" Property="ID"></ext:DataSorter>  //数据默认按照ID降序排序,

　　　　</Sorters>

  </ext:Store>

 5.2服务器端排序

   Step1:采用异步的方式加载数据

   Step2: 设置<ext:DataSorter Direction="DESC" Property="ID"></ext:DataSorter>的排序方式与字段

　Step3:编写后台排序代码

        protected void storeUserInfo_ReadData(object sender, Ext.Net.StoreReadDataEventArgs e)
        {
            int start = e.Start;
            int limit = e.Limit;

            var userInfoList = lsUsers;
            e.Total = userInfoList.Count;

            if (e.Sort.Count() > 0)
            {
                foreach (var item in e.Sort)
                {
                    switch (item.Property)
                    {
                        case "Name":
                            userInfoList.Sort((u1, u2) =>
                            {
                                switch (item.Direction)
                                {
                                    case Ext.Net.SortDirection.Default:
                                    case Ext.Net.SortDirection.ASC:
                                    default:
                                        return string.Compare(u1.Name, u2.Name);
                                    case Ext.Net.SortDirection.DESC:
                                        return 0 - string.Compare(u1.Name, u2.Name);
                                }
                            });
                            break;
                        case "Age":
                            userInfoList.Sort((u1, u2) =>
                            {
                                switch (item.Direction)
                                {
                                    case Ext.Net.SortDirection.Default:
                                    case Ext.Net.SortDirection.ASC:
                                    default:
                                        return u1.Age - u2.Age;
                                    case Ext.Net.SortDirection.DESC:
                                        return u2.Age - u1.Age;
                                }

                            });
                            break;
                        case "ID":
                            userInfoList.Sort((u1, u2) =>
                            {
                                switch (item.Direction)
                                {
                                    case Ext.Net.SortDirection.Default:
                                    case Ext.Net.SortDirection.ASC:
                                    default:
                                        return u1.ID - u2.ID;
                                    case Ext.Net.SortDirection.DESC:
                                        return u2.ID - u1.ID;
                                }
                            });
                            break;
                    }
                }
            }

            storeUserInfo.DataSource = userInfoList.Skip(start).Take(limit).ToList();
            storeUserInfo.DataBind();
        }

 6.分组

 6.1简单分组

<Features>

  <ext:Grouping runat="server"></ext:Grouping>　　　　//添加这个配置后数据列就能进行分组

</Features>

<ext:Column runat="server" ID="columnID" Width="100" Text="ID" DataIndex="ID" 　　　　
    Groupable="false"></ext:Column>　　　　　　　　　　　　　　//Groupable=false表示禁用列分组功能

 6.2自定义Group标题

<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);
    }
};

7.汇总

7.1简单汇总

<ext:Column runat="server" ID="columnAge" Width="60" Text="年龄" DataIndex="Age" SummaryType="Count"> //在需要汇总的列里设置汇总的类型

   <SummaryRenderer Handler="return '共 ' + value + ' 条'"></SummaryRenderer> 　　//使用SummaryRenderer来显示汇总的结果

</ext:Column>

<Features>               

　　<ext:Summary runat="server"> </ext:Summary>　　　　//Feature里添加<ext:Summary>

</Features>

 7.2分组汇总

   <Features>
                <ext:Grouping runat="server" GroupHeaderTplString="{columnName}:{name}{[MyApp.formatGroupSummary(values)]}"></ext:Grouping>
                <%--<ext:Summary runat="server">
                </ext:Summary>--%>　　　　　　//注释汇总采用分组汇总
                <ext:GroupingSummary runat="server"></ext:GroupingSummary>
    </Features>

 8.服务器端获取GridPanel控件选中的值

           Ext.Net GridPanel Selection包括三种：
　　　　RowSelectionModel：行选择模型
　　　　CheckboxSelectionModel：带有复选框的行选择模型
　　　　CellSelectionModel：单元格选择模型

            RowSelectionModel selectionModel = grid.GetSelectionModel() as RowSelectionModel;

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

            ids = ids.Trim(',');

            X.MessageBox.Alert("提示", ids).Show();

 

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

 

　　　 如果SelectionModel的类型是CellSelectionModel可以获取单元格的值或其他一些信息

 　　  var cellModel = grid.GetSelectionModel() as CellSelectionModel;

  　　   var recordId = cellModel.SelectedCell.RecordID;

  　　   var value = cellModel.SelectedCell.Value;

9.可编辑的GridPanel

　　要对Ext.Net GridPanel进行编辑，需要进行两步配置：
　　配置列的编辑控件（TextField、NumberField、DateField等）
　　配置编辑插件（CellEditing、RowEditing）
　　<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的编辑插件，我们将使用代码贴出来。
　　单元格编辑：
　　</ext:GridPanel>
　　<Plugins>
 　　   <ext:CellEditing runat="server" ClicksToEdit="1"></ext:CellEditing>
　　</Plugins>

　　行编辑：
　　<Plugins>
　　    <ext:RowEditing runat="server" ClicksToEdit="1"></ext:RowEditing>
　　</Plugins>
　　</ext:GridPanel>

　

本文参考:  https://www.cnblogs.com/youring2/p/3568347.html