Asp.Net MVC结合ExtJs gridPanel 分页和高度自适应

Ext.onReady(function () {
    gridPanel();
    var panel = Ext.getCmp('gridPanel');
    window.onresize = function () {
        panel.setHeight(document.documentElement.clientHeight);
    };
});

function gridPanel() {
    var pagingBar = Ext.widget('pagingtoolbar', {
        store: store,
        displayInfo: true,
        displayMsg: '显示 {0} - {1} ,共 {2} 记录'
    });
    var panel = new Ext.container.Viewport({
        items: {
            xtype: 'gridpanel',
            id: 'gridPanel',
            store: store,
            height: document.documentElement.clientHeight,
            columns: [
            { header: "Id", flex: 1, dataIndex: 'Id' },
            { header: "标题", width: 200, sortable: false, dataIndex: 'Title' },
            { header: "内容", width: 300, sortable: true, dataIndex: 'Contents' },
            { header: "点击数", width: 80, align: 'center', sortable: true, dataIndex: 'ClickCount' },
            { header: "发表时间", width: 110, sortable: true, dataIndex: 'CreateTime' },
            { header: "更新时间", width: 110, sortable: true, dataIndex: 'UpdateTime' }
            ],
            loadMask: true,
            disableSelection: true,
            viewConfig: {
                stripeRows: true
            },
            tbar: ['->',
                { text: '添加', icon: '../../../Images/extjs/add.png' },
                { text: '编辑', icon: '../../../Images/extjs/pencil.png' },
                { text: '删除', icon: '../../../Images/extjs/delete.png' }
            ],
            bbar: pagingBar
        }
    });
}

var store = Ext.create('Ext.data.Store', {
    pageSize: 20,
    fields: ['Id', 'Title', 'Contents', 'ClickCount', 'CreateTime', 'UpdateTime'],
    remoteSort: true,
    proxy: {
        type: 'ajax',
        url: '/Manage/ArticleData',
        reader: {
            type: 'json',
            root: 'topics',
            totalProperty: 'totalCount'
        }
    }
});

store.load({ params: { start: 0, limit: 20} });

  MVC:Controller action

 public ActionResult ArticleData(string start, string limit)
        {
            ArticleDal articleDal = new ArticleDal(_session);
            var total = 0;
            var data = articleDal.MyGetAll2(int.Parse(start), int.Parse(limit), ref total);
            var json = Json(new { totalCount = total, topics = data }, JsonRequestBehavior.AllowGet);
            return json;
        }

  数据访问层:Nhibernate分页

    public IEnumerable<ArticleView> MyGetAll2(int start, int limit, ref int count)
        {
            try
            {
                var query = _session.CreateCriteria<Article>();
                count = query.List<Article>().Count;
                var data = query.SetFirstResult(start)
                                .SetMaxResults(limit)
                                .AddOrder(new Order("CreateTime", false))
                                .List<Article>();
                return ArticleMapper.GetArticleView(data);
            }
            catch (Exception)
            {
                throw;
            }
        }

  

有问题及时和我联系:zhangwei900808@126.com

时间: 2024-09-20 04:11:43

Asp.Net MVC结合ExtJs gridPanel 分页和高度自适应的相关文章

ASP.NET MVC 数据筛选、分页的问题

问题描述 ASP.NET MVC 数据筛选.分页的问题 使用Webdiyer.WebControls.Mvc.PagedList实现的MVC分页,但发现在有筛选条件存在的情况下分页是会出错的.当先对数据进行筛选后再点击下一页时,会重新获取数据源,这时的除了索引的ID有值其他的都没有值,求大神们帮忙解决,谢谢. 解决方案 你的gettransactionheadersforquery这个方法怎么实现的? 解决方案二: asp.net mvc 分页ASP.NET MVC Pager分页asp.net

艾伟_转载:ASP.NET MVC分页的实现

在ASP.NET中,GridView控件本身就带有分页的功能,只要把当前页面的索引值赋给GridView的PageIndex就可以实现了分页,至于数据怎么分页,全都由GridView封装起来了. 在ASP.NET MVC中分页的实现就只能靠自己来设计了.首先来说一下分页的原理.现在有一个张news表,中间有很多信息,我们假设一页显示5条记录,这样,页面数量=总记录数/5:这里,如果出现小数,得进位取整.如比总记录和数为51,那么分的页面数量是11,最后一页只有一条记录.好,有这样一个思路后,现在

Extjs GridPanel用法详解

Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择.编辑等.在之前的Extjs MVC开发模式详解中,我们已经使用到了GridPanel,今天我们来介绍一下Extjs中GridPanel的详细用法. 本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用! 本文由齐飞(youring2@gmail.com)原创,并发布在http://www.qeefee.com

Asp.net mvc简单实现基于Razor的分页控件

最近在写一些web应用了解了一下asp.net mvc发现的确好用,所以直接就干上了.不过在使用asp.net mvc的Razor模板的情况并不向传统webform那样可以使用控件.但从Razor的功能上已经具备相关代替的功能,只是从Razor角度来说不是 我们平常说的控件而是子模板.由于Razor可以根据自己需求把功能拆分到子模板中,然后通过RenderPage方法输出.从设计的手段上来看完全可以 把分页控件封装成一个子的cshtml,在需要的时候引用上就是了. 作为一个控件的设计其最重要的环

Spring.Net+NHibenate+Asp.Net mvc +ExtJs 系列 5 ----asp.net MVC+Extjs

在前面的系列中,我们已经完成了数据库设计,数据访问和业务逻辑,接下来我们来完成前台MVC和Extjs界面部分. 在这段时间里,spring.net已经发布了1.2版本,asp.net mvc也更新到了RC1 Refresh.nhibernate更新到了2.0.整个Demo程序也做了相应的更新. 整个架构由asp.net mvc把后台的业务和前台界面联系起来,在Controller中调用业务逻辑完成前台的调用,完成相应的视图转发等工作.这样存在两个问题: Controller怎么调用业务逻辑? 最

Spring.Net+NHibenate+Asp.Net mvc +ExtJs 系列 1---准备

本系列文章将演示如果利用Spring.Net+NHibernate+Asp.Net mvc+ExtJs构建多层应用程序.架构具有松耦合性,接口编程,并且有很强的可扩展性.比较适合企业系统开发相关的产品开发. 充分利用Spring.Net的IOC,AOP等特性,并且作为整个框架的容器,NHibernate使整个框架更面向对象,并且支持多数据库.Asp.net Mvc一改以往Webform的方式,使界面和后台代码完全分开.Extjs则创建出更美观,用户体验更好的界面,能够很方便的完成asp.net

ASP.NET MVC实现查询+分页

在asp.net中我们知道有viewstate这样的页面级容器为我们保存表单数据,这样我们每次提交时数据都不会丢失,很容易的完成查询+分页的实现.找过相关MVC分页的例子,都是扩展HtmlHelper方法来实现.我想大家在ASP.NET开发中都用过 wuqi的AspNetPager分页控件以及dacey的NSunPage用来开发Winform项目的分页控件非常方便的满足了大家的分页需求.那么我们来看下在MVC中的查询+分页是怎么实现的.(这里我用到了wuqi的mvcpager) 下面例子是asp

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页

原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页 上一节我们讲了,DataGrid获取数据的一些用法,这一节讲DataGrid的分页 DataGrid将传递"当前页码""每页条数" 控制器获取参数之后交给BLL层处理逻辑和分页,返回总页数和当前页的数据 最后交给DataGrid处理 课外:从此次前端的处理速度我看出,没有以前的JQGrid控件的处理数据快. 首先在让Dat

Asp.Net MVC 分页、检索、排序整体实现

原文:Asp.Net MVC 分页.检索.排序整体实现     很多时候需要这样的功能,对表格进行分页.排序和检索.这个有很多实现的方式,有现成的表格控件.用前端的mvvm,用户控件.但很多时候看着很漂亮的东西你想进一步控制的时候却不那么如意.这里自己实现一次,功能不是高大全,但求一个清楚明白,也欢迎园友拍砖.前端是bootstrap3+jPaginate,后台基于membership.没什么难点.     先上效果图.            分页其实就是处理好 每页项目数.总项目数.总页数.当