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下如何传值

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WeaponZhi

MVVM 面向接口型框架封装和单元测试

大家好,今天给大家带来一个我自己开发改造的 MVVM 封装框架。代码不难,但我更想说一些我在开发这样一个架构过程中的想法和思路,我们不仅要善于作一个搬运工,更要...

3756
来自专栏狮乐园

高级 Angular 组件模式 (3b)

Kent C. Dodds的第四篇文章中的一个重要元素在上一篇文章中没有涉及,使用withToggle高阶组件(HoC, react中的常用模式)可以将<tog...

771
来自专栏用户2442861的专栏

JavaScript Promise

在callback的模型里边,我们假设需要执行一个异步队列,代码看起来可能像这样:

622
来自专栏滕先生的博客

XML解析方式及GData框架使用一、概念二、XML解析SAM方式(只读)三、DOM方式解析(可读写)四、GData写入功能,生成XML

2656
来自专栏Android小菜鸡

View.post的切身运用

  view.post方法指的是从正在操作其他线程的时候,将制定内容推到UI线程执行。因为布局的渲染只能在UI线程中执行。

763
来自专栏向治洪

Google V8 引擎

V8的前世今生 V8是JavaScript渲染引擎,第一个版本随着Chrome的发布而发布(具体时间为2008年9月2日)。在运行JavaScript之前,相比...

3825
来自专栏郭霖

Android图片加载框架最全解析(四),玩转Glide的回调与监听

大家好,今天我们继续学习Glide。 在上一篇文章当中,我带着大家一起深入探究了Glide的缓存机制,我们不光掌握了Glide缓存的使用方法,还通过源码分析对缓...

3826
来自专栏陈仁松博客

UWP基础教程 - XAML资源

在Windows 10 UWP应用开发中,XAML用于应用界面设计,无论是开发人员还是设计人员经常会设计自定义用户界面或者控件行为,其中会涉及到不同方面的代码设...

33810
来自专栏DannyHoo的专栏

UIImageJPEGRepresentation和UIImagePNGRepresentation

在Iphone上有两种读取图片数据的简单方法: UIImageJPEGRepresentation和UIImagePNGRepresentation.  U...

771
来自专栏达摩兵的技术空间

oo-css面对对象的编程样式

很多开发者觉得css很简单,如果有时间更愿意用在学习和研究js上,随着css3推出以及一些css的预处理语言和面对对象的编程css的方式的出现,css已经出现了...

722

扫码关注云+社区