ExtJs 备忘录(7)—— GirdPanl表格(三) [ 统计|查看、修改单行记录 ]-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

ExtJs 备忘录(7)—— GirdPanl表格(三) [ 统计|查看、修改单行记录 ]

简介:

正文

  一、查看/修改单行记录

    目的:单击某行某个字段,查看/编辑该行详细数据。

    1.1  效果截图

 

 

 

 1.2  实现代码

      后台的代码参见上篇文章:ExtJs 备忘录(6)—— GirdPanl表格(二)[ 搜索分页 ]

      前端代码:7.1.aspx

        var currentWindow,detailWindow,OpenDetailFunc,detailForm;
        
        Ext.onReady(
function() {
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget 
= 'side';

            
var store = new Ext.data.Store({
                proxy: 
new Ext.data.HttpProxy({
                    url: 
'7.1.aspx?method=search',
                    method: 
'GET'
                }),
                reader: 
new Ext.data.JsonReader({
                    totalProperty: 
'count',
                    root: 
'result'
                }, [
                        { name: 
'Name' },
                        { name: 
'Id' },
                        { name: 
'Email' },
                        { name: 
'Gender' }
                ])
            });
            
            
//加载数据
            store.load({
                params:{   limit: 
10    }
            });

            
var dataColumns = new Ext.grid.ColumnModel({
                columns: [
                    
new Ext.grid.RowNumberer(), //显示行号
                    { header: "编  号", dataIndex: 'Id', sortable: true },
                    { header: 
"名  称", dataIndex: 'Name' },
                    { header: 
"邮  箱", dataIndex: 'Email' },
                    { header: 
"性  别", dataIndex: 'Gender'
                        renderer: 
function(value, cell, record) {
                            
//alert(record.data.Age);
                            var GenderStr = record.data.Gender == 0 ? "" : "";
                            
return  '<a href="javascript:void(0);" onclick=javascript:OpenDetailFunc('+record.data.Id+',"'+record.data.Name+'","'+record.data.Email+'",'+record.data.Gender+'); style="cursor:hand">' + GenderStr + '</a>';
                         }
                    }
                ],
                defaults: {
                    align: 
'center'
                }
            });
            
            
//easy-ext.js
            var grid = GridPanel(store,dataColumns,10,'<center style="curor:hand" onclick="window.location.reload();">表格查看、修改单行记录|统计</center>');
            grid.width
=800;
            grid.render(Ext.getBody());
            
            
//-------------------------------------------查看、修改单条记录
            
            
var   tbId = new NumberField('tbId','编  号');
            
var   tbName = new TextField('tbName','名  称');
            
var   tbEmail = new TextField('tbEmail','邮  箱');
            
var   cbGender = new ComboBox('cbGender','性  别',[[1,''],[0,'']]);
            
            detailForm 
= new Ext.FormPanel({
                layout: 
'form',
                frame:
true,
                items:[ tbId, tbName, tbEmail, cbGender],
                buttons: [
                    { text: 
'修  改' },
                    {  text: 
'取  消' , handler : function(){ detailWindow.hide(); }}
                ]
            });

            
            
//参数赋值,显示窗体
            OpenDetailFunc = function(Id,Name,Email,Gender){
                
                
var form = detailForm.getForm();
                tbId.value 
= Id;
                tbName.value 
= Name;
                tbEmail.value 
= Email;
                cbGender.value 
= Gender;
                detailWindow.show();
            };
            
            detailWindow 
= new Ext.Window({
                title:
"详情",
                closable:
true,
                iconCls:
'add',
                autoWidth:
true,
                autoHeight: 
true,
                buttonAlign:
'center',
                closeAction:
'hide',
                plain:
true,
                
//width:400,
                //height:380,
                items:[detailForm],
                listeners: {
                    
'show':function(){
                        
this.center();         //屏幕居中
                    }
                }
            });
        });

      代码说明:

        a).  GridPanelNumberField以及ComboBox等参见源代码easyext.js(系列第二篇文章也有专门介绍封装)。

        b).  这里仅给出了修改的例子,没有再多些一个显示的,这里考虑的是修改都出来了,显示就不是什么问题了。

 

  二、统计

    2.1  在3.0里面之前官方没有正式的统计插件,如需要可以参见本文底部相关文章来写,想想当初要实现这个功能也是大费周章,这里探讨另外一种灵活的形式来实现统计,对于熟悉写后台的人来说比较简单 :)

      2.1.1  思路:

        前端:只用对增加一行显示就行,比如本来是显示12行,你让他显示13行,需要做特殊处理,比如红字显示统计数据可以在renderer里面做判断处理;

        后端:自己写代码统计要统计的数据,然后把这个数据包装一下放到返回显示数据的最后一条。

      2.1.2  效果截图

 

 

 

2.1.3  代码片段

        主要实现代码(参见源代码7.2.1.aspx.cs):

    /// <summary>
    
/// 将数据表转换成JSON类型串
    
/// </summary>
    
/// <param name="dt">要转换的数据表</param>
    
/// <param name="dispose">数据表转换结束后是否dispose掉</param>
    
/// <returns></returns>
    public static StringBuilder DataTableToJson(System.Data.DataTable dt, bool dt_dispose)
    {
        StringBuilder stringBuilder 
= new StringBuilder();
        stringBuilder.Append(
"[");//\r\n

        
//数据表字段名和类型数组
        string[] dt_field = new string[dt.Columns.Count];
        
int i = 0;
        
string formatStr = "{{";
        
string fieldtype = "";
        
foreach (System.Data.DataColumn dc in dt.Columns)
        {
            dt_field[i] 
= dc.Caption.Trim();//ToLower().
            formatStr += "'" + dc.Caption.Trim() + "':";//ToLower().
            fieldtype = dc.DataType.ToString().Trim().ToLower();
            
if (fieldtype.IndexOf("int"> 0 || fieldtype.IndexOf("deci"> 0 ||
                fieldtype.IndexOf(
"floa"> 0 || fieldtype.IndexOf("doub"> 0 ||
                fieldtype.IndexOf(
"bool"> 0)
            {
                formatStr 
+= "{" + i + "}";
            }
            
else
            {
                formatStr 
+= "'{" + i + "}'";
            }
            formatStr 
+= ",";
            i
++;
        }

        
if (formatStr.EndsWith(","))
        {
            formatStr 
= formatStr.Substring(0, formatStr.Length - 1);//去掉尾部","号
        }
        formatStr 
+= "}},";

        i 
= 0;
        
object[] objectArray = new object[dt_field.Length];
        
foreach (System.Data.DataRow dr in dt.Rows)
        {

            
foreach (string fieldname in dt_field)
            {   
//对 \ , ' 符号进行转换 
                objectArray[i] = dr[dt_field[i]].ToString().Trim().Replace("\\""\\\\").Replace("'""\\'");
                
switch (objectArray[i].ToString())
                {
                    
case "True":
                        {
                            objectArray[i] 
= "true"break;
                        }
                    
case "False":
                        {
                            objectArray[i] 
= "false"break;
                        }
                    
defaultbreak;
                }
                i
++;
            }
            i 
= 0;
            stringBuilder.Append(
string.Format(formatStr, objectArray));
        }
        
if (stringBuilder.ToString().EndsWith(","))
        {
            stringBuilder.Remove(stringBuilder.Length 
- 11);//去掉尾部","号
        }

        
if (dt_dispose)
        {
            dt.Dispose();
        }
        
return stringBuilder.Append("]");//\r\n
    }

    
public override string Search()
    {
        
int start = -1;
        
int.TryParse(Request.QueryString["start"], out start);
        
int limit = -1;
        
int.TryParse(Request.QueryString["limit"], out limit);
        
string id = Request.QueryString["id"];
        IList
<User> result = new List<User>();

        
if (string.IsNullOrEmpty(id))
            result 
= GetPage(ConverToList(dataSource.Values), start, limit);
        
else
        {
            
int uid;
            
if (int.TryParse(id, out uid))
            {
                
if (dataSource.ContainsKey(uid))
                    result.Add(dataSource[uid]);
            }
        }

        
//统计
        DataTable dt = new DataTable();
        dt.Columns.Add(
"Id");
        dt.Columns.Add(
"Email");
        dt.Columns.Add(
"Name");
        dt.Columns.Add(
"Gender");
        dt.Columns.Add(
"Age");

        
int avg_Age = 0;
        
foreach (User item in result)
        {
            avg_Age 
+= item.Age;
            dt.Rows.Add(item.Id, item.Email, item.Name, item.Gender, item.Age);
        }
        
if (result.Count > 0)
            dt.Rows.Add(
""""""""string.Format("平均:{0}", avg_Age / result.Count));

        
return new StringBuilder().Append("{count:")
        .Append(
1000)
        .Append(
",result:")
        .Append(DataTableToJson(dt, 
true))
            
//        .Append(JavaScriptConvert.SerializeObject(result))
        .Append('}')
        .ToString();
    }

      代码说明:

        相比之下我可能更加愿意这种方式进行统计,在后台写代码也好控制,而前端几乎可以不改动就能达到统计的效果。

        a).  与1.2例子的后台相比,多增加了一个字段,Age。

        b).  这里用的DataTable,因为强类型不好赋值为空,这里也可以返回特定的强类型,比如Id返回-1就表示是统计列,然后在renderer里面做判断显示。

 

    2.2  3.0中的统计插件用

      查了一圈,发现还是不支持简单统计,必须分组统计,得使用Ext.data.GroupingStore才行,不过没关系,咱们可以变通:)

      2.2.1  截图

 

 

 2.2.2  实现代码

        Ext.onReady(function() {
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget 
= 'side';

            
var store = new Ext.data.GroupingStore ({
                proxy: 
new Ext.data.HttpProxy({
                    url: 
'7.2.2.aspx?method=search',
                    method: 
'GET'
                }),
                reader: 
new Ext.data.JsonReader({
                    totalProperty: 
'count',
                    root: 
'result'
                }, [
                        { name: 
'Name' },
                        { name: 
'Id' },
                        { name: 
'Email' },
                        { name: 
'Gender' },
                        { name: 
'Age' },
                        { name: 
'groupField',convert:function(v){  return '数据';} }
                ]),
                sortInfo:{field: 
'Age', direction: "ASC"},
                groupField:
'groupField'
            });
            
            
//加载数据
            store.load({
                params:{   limit: 
10    }
            });
            
            
//自定义
//
            Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
//
                return v + (record.data.estimate * record.data.rate);
//
            };
            
            
var summary = new Ext.ux.grid.GroupSummary();

            
var dataColumns = new Ext.grid.ColumnModel({
                columns: [
                    
new Ext.grid.RowNumberer(), //显示行号
                    { header: "编  号", dataIndex: 'Id', sortable: true },
                    { header: 
"名  称", dataIndex: 'Name' },
                    { header: 
"邮  箱", dataIndex: 'Email' },
                    { header: 
"性  别", dataIndex: 'Gender' },
                    { header: 
"数据", dataIndex: 'groupField' },
                    
//max,min,count,sum,average
                    { header: "总年龄", dataIndex: 'Age',summaryType:'average'}
                    
//,summaryType:'totalCost',groupable: false
                ],
                defaults: {
                    align: 
'center'
                }
            });

            
var grid = new Ext.grid.GridPanel({
                store: store,
                cm: dataColumns,
                renderTo: Ext.getBody(),
                autoExpandColumn: 
1,
                autoHeight: 
true,
                buttonAlign:
'center',
                border: 
true,
                disableSelection: 
true,
                frame: 
true,
                loadMask:
true,
                width: 
800,
                view: 
new Ext.grid.GroupingView({
                    forceFit: 
true,
                    showGroupName: 
false,
                    enableNoGroups: 
false,
                    enableGroupingMenu: 
false,
                    hideGroupedColumn: 
true
                }),
                plugins : summary,
                
//设置单行选中模式
                selModel: new Ext.grid.RowSelectionModel({ singleSelect: true }),
                
//columnLines: true,//显示列线条
                viewConfig: {   forceFit: true  }//使列自动均分
            });
        });

    代码说明:

      a).  这种办法就是不用服务端来进行统计,支持内置的5种统计,也支持自定义的统计,这个在代码注释里面可以看得到。

      b).  这里是通过一个虚拟字段groupField来模拟分组的,这样一来,就能满足基本的统计了。

      C).  注意sortInfo与groupField必须配置,然后必须使用Ext.data.GroupingStore。

 


本文转自over140 51CTO博客,原文链接:http://blog.51cto.com/over140/586538,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章