Extjs4.2+webAPI+EF实现分页以及webapi的数据传值

由于不明白分页的总数是怎么计算,不知道他的分页方式所以花费了好多功夫,现在弄出来了与大家分享下

1.首先是EF的简历,想必大家都清楚:添加-〉新建项-〉数据-〉Ado。net实体数据模型

2.就是后台数据也就是apiController,前台需要两个数据,一个是数据的总条数,第二个是要查询的分页数据

所以我们要建立一个实体,用于返回数据传送,由于多个页面都使用,多以用到了泛型。代码如下:

public class PageData<T>
    {
        //数据总数
        public int TotolRecord { get; set; }

        //需要返回的数据
        public T Data { get; set; }

    }

3.组织需要向前台返回的数据

 /// <summary>
        /// 获取所有的监控信息
        /// </summary>
        /// <returns></returns>
        public PageData<Monitor[]> Get([FromUri]string _dc, [FromUri] int page, [FromUri] int start, [FromUri] int limit)
        {
            OlandHIPDBInterfaceTrackEntities db = new OlandHIPDBInterfaceTrackEntities();

            //返回数据包含数据总数
            PageData<Monitor[]> returnData = new PageData<Monitor[]>();

            IQueryable<Monitor> data = from item in db.Monitor
                        orderby item.ID
                        select item;

            returnData.TotolRecord = data.ToArray().Length;

            data=data.Skip<Monitor>(start);

            data=data.Take<Monitor>(limit);

            returnData.Data =data .ToArray<Monitor>();

            return returnData;
        }

好了,后台数据准备完毕,那么就开始Extjs部分的了

4.Extjs部分我就直接上代码了

Ext.require([
'*',
'Ext.toolbar.Paging',
'Scripts.*'
])

Ext.onReady(function () {

    Ext.define('InterfaceTrackModel', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'ID',
            type: 'int',
            useNull: true
        },
         'Invoker',
         'MachineName',
          'MachineIP',
           'InvokeDate',
            'Interface',
            'InterfaceDes',
            'IsSuccessed',
            'ConsumeTime',
            'ErrorMessage',
            'Remark'
            ]
    });

    var InterfaceTrackStore = Ext.create('Ext.data.Store', {
        autoLoad: true,
        autoSync: true,
        model: 'InterfaceTrackModel',

        //设置分页大小
        pageSize: 20,
        proxy: {
            type: 'rest',
            url: 'api/InterfaceTrack',
            reader: {
                type: 'json',
                root: 'Data',
                //获取数据总数
                totalProperty: 'TotolRecord'
            },
            writer: {
                type: 'json'
            }
        }
    });

    var selModel = Ext.create('Ext.selection.CheckboxModel', {
        width: 55
    });

    //将时间转化为 2011-08-20 00:00:00 格式
    //解决Ext4的formPanel通过grid的store查询问题 2012.2.22 jzr
    function dateFormat(value) {
        if (null != value) {
            //return Ext.Date.format(new Date(value), 'Y-m-d H:i:s');
            return Ext.Date.format(new Date(value), 'Y-m-d H:i:s');
        }
        else {
            return null;
        }
    }

    Ext.define('Scripts.InterfaceTrackGrid', {
        extend: 'Ext.grid.GridPanel',
        title: '接口监控',
        id: 'InterfaceTrackGrid',
        initComponent: function () {
            Ext.apply(this, {
                closable: true, //是否可关闭
                width: 400,
                height: 300,
                frame: true,

                store: InterfaceTrackStore,
                iconCls: 'icon-user',
                // selModel: selModel,

                viewConfig: {
                    getRowClass: function (record) {
                        return record.get('IsSuccessed') ? '' : 'error-row';
                    }
                },

                columns: [Ext.create('Ext.grid.RowNumberer', { width: 35, text: '序号' }),
         {
             text: '编号',
             width: 50,
             sortable: true,
             dataIndex: 'ID'
         }, {
             text: '调用者',
             width: 80,

             dataIndex: 'Invoker'

         }, {
             header: '机器名',
             width: 80,
             sortable: true,
             dataIndex: 'MachineName'

         }, {
             text: '机器IP',
             width: 100,
             // xtype: 'checkcolumn',
             dataIndex: 'MachineIP'

         }, {
             text: '调用时间',
             width: 140,
             sortable: true,
             dataIndex: 'InvokeDate',
             renderer: dateFormat

         }, {
             text: '调用接口',
             width: 120,
             sortable: true,
             dataIndex: 'Interface'

         }, {
             text: '接口描述',
             width: 140,
             sortable: true,
             dataIndex: 'InterfaceDes'

         }, {
             text: '是否成功',
             width: 80,
             sortable: true,
             dataIndex: 'IsSuccessed'

         }, {
             text: '耗时',
             width: 80,
             sortable: true,
             dataIndex: 'ConsumeTime'

         }, {
             text: '错误信息',
             width: 160,
             sortable: true,
             dataIndex: 'ErrorMessage'

         }, {
             text: '备注',
             width: 80,
             sortable: true,
             dataIndex: 'Remark'

         }],
                bbar: Ext.create('Ext.PagingToolbar', {
                    store: InterfaceTrackStore,
                    displayInfo: true,
                    displayMsg: '显示{0}-{1}条,共计{2}条',
                    emptyMsg: "没有数据"
                })
            }),
        this.callParent(arguments);
        }
    });
    //加载数据
    //    InterfaceTrackStore.load({
    //        params: {
    //            start: 0,
    //            limit: 20
    //        }
    //    });
})

这里注意的地方,前台接受数据的时候

 reader: {
                type: 'json',
                root: 'Data',
                //获取数据总数
                totalProperty: 'TotolRecord'
            },

检测后台传过来的数据,分页数据对应的是Data键值对,数据总数据条数为

TotolRecord键值对

最终效果图:

这里面还设计了webaip的传值接受问题,可以参考 webapi下如何传值

 

 

 

时间: 2024-10-12 07:59:25

Extjs4.2+webAPI+EF实现分页以及webapi的数据传值的相关文章

Extjs4.2+webAPI+EF实现分页以及webapi的数据传值(续)

现在领导又要增加功能,需要分页的时候,每页显示N条信息.由于是每个页面都要改,所有需要声明了一个扩展类代码如下: // Copyright : 欧蓝德畅电子技术有限公司. All rights reserved. // 文件名:pager.js // 文件描述:分页扩展类,extJS控件之每页显示N条记录 //----------------------------------------------------------------------------------- // 创建者: //

ef 通过DbCommandInterceptor 修改数据库连接 添加数据异常

问题描述 ef 通过DbCommandInterceptor 修改数据库连接 添加数据异常 我想实现数据库的读写分离 ef6里面加了DbCommandInterceptor的功能可是修改以后 在添加新数据的时候 抛出异常 "基础提供程序在 Commit 上失败 值不能为 null. 参数名: connection"但是数据已经成功添加那位前辈读到过这个问题呢 请指导 public class EntityCommandInterceptor: DbCommandInterceptor

sql-MySql执行分页时查询统计数据量的Sql语句差别及性能

问题描述 MySql执行分页时查询统计数据量的Sql语句差别及性能 现在开发系统,涉及到了分页查询,在做的时候就在想,能不能自动把查询sql语句通过参数自动封装成能够统计查询语句不在分页条件下查询出的数据量有多大,例如一般做法是: 1.先根据拼接的sql语句进行查询:select * from ecs_goods where goods_type = 1 limit 1000, 10 2.再统计数量:select count(*) from ecs_goods where goods_type

aged ata ource 分页-获得PagedDataSource分页的第一行数据

问题描述 获得PagedDataSource分页的第一行数据 用PagedDataSource绑定repteater做的分页,但是前台显示的时候第一条数据的样式和下边的都不一样,怎么办? 这样的分页能获得他每一页的第一行数据吗,可以移除这行数据吗 或者实现首行样式不同的方法还有其他吗?

sql排序分页 如果有新数据插入

问题描述 sql排序分页 如果有新数据插入 sql排序分页 如果有新数据插入并且排序在前面,那取第二页的时候就会有重复数据,而且新插入的数据展示不出来了,怎么解决呢? 各位可能没理解我意思: 比如说现在数据库里面几千万数据,还是实时插入的数据,我想排序后分页取,比如说第一次通过代码给数据库传参取第一页,取100条, 1.这个过程数据库是把所有数据几千万条全部load到内存中排序,然后进行分页,然后取出前100条吗? 2.那第二次,还会再load所有数据一次重新排一次序,再取出101-200之间的

在ASP.NET 2.0中操作数据之二十四:分页和排序报表数据_自学过程

导言 分页和排序是在WEB应用程序中展现数据常见的功能.比如,当我们在一个网上书店搜索ASP.NET书籍的时候,可能有几百本相关书籍,但是我们只希望每页显示10条有效记录.而且,我们还希望结果能根据标题.价格.页数和作者等等来进行排序.过去的23个教程中我们研究了如何建立各种报表,包括在界面上添加编辑和删除数据.但是我们没有研究如何对数据进行排序,对于分页我们也仅在研究DetailsView和FormView控件的时候看到. Step 1:添加分页和排序页面 在我们开始以前,首先让我们花些时间来

EF如何操作内存中的数据以及加载相关联表的数据:延迟加载、贪婪加载、显示加载

原文:EF如何操作内存中的数据以及加载相关联表的数据:延迟加载.贪婪加载.显示加载 之前的EF Code First系列讲了那么多如何配置实体和数据库表的关系,显然配置只是辅助,使用EF操作数据库才是每天开发中都需要用的,这个系列讲讲如何使用EF操作数据库.老版本的EF主要是通过ObjectContext来操作数据库的,一看是Object打头的,自然相当庞大,方法也比较多.到了经典的4.1版本,EF小组推出了一些更简单好用的API,就是DbContext,它包括更常用的方法.看看EF小组是怎么说

分页解决方案 之 QuickPager的使用方法(PostBack分页、自定义获取数据)

          适用范围:网站后台管理.OA.CRM.CMS等,从关系型数据库里提取数据,或者XML等获取数据,不愿意使用Pager_SQL.DataAccessLibrary的情况.       优点:可以使用自己喜欢的方式获取数据,不仅仅限于关系型数据库,其他的也都可以.       缺点,要写的代码比较多.       Demo下载:http://www.cnblogs.com/jyk/archive/2008/07/29/1255891.html       使用方法:   usin

分页解决方案 之 QuickPager的使用方法(URL分页、自动获取数据)

        适用范围:网站前台页面 等,从关系型数据库里提取数据,愿意使用Pager_SQL.DataAccessLibrary的情况.       优点:使用URL的方式,对于SEO比较友好.       缺点:保留查询状态没有太好的办法,GO的功能没有实现,有空看看别人是怎么做的.       Demo下载:http://www.cnblogs.com/jyk/archive/2008/07/29/1255891.html       使用方法:     using JYK.Data;u