zoukankan      html  css  js  c++  java
  • Ext.grid.Panel表格分页

    转载:http://www.cnblogs.com/libingql/archive/2012/04/22/2464994.html

    cshtml

    复制代码
    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ext.grid.Panel动态加载分页数据</title>
        <link href="@Url.Content("~/Scripts/ext-4.0.7-gpl/resources/css/ext-all.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/ext-4.0.7-gpl/bootstrap.js")" type="text/javascript"></script>
        <script type="text/javascript">
            Ext.require([
                'Ext.grid.*',
                'Ext.toolbar.Paging',
                'Ext.data.*'
            ]);
            Ext.onReady(function () {
                Ext.define("Province", {
                    extend: "Ext.data.Model",
                    fields: [
                        { name: "ProvinceID" },
                        { name: "ProvinceNo" },
                        { name: "ProvinceName" }
                    ]
                });
    
                var store = Ext.create("Ext.data.JsonStore", {
                    pageSize: 10, // 分页大小
                    model: "Province",
                    proxy: {
                        type: "ajax",
                        url: "/Province/List",
                        reader: {
                            type: "json",
                            root:"root",
                            totalProperty: 'totalProperty'
                        }
                    }
                });
                store.loadPage(1);
    
                Ext.create("Ext.grid.Panel", {
                    title: "Ext.grid.Panel",
                    renderTo: Ext.getBody(),
                    frame: true,
                    height: 310,
                     400,
                    store: store,
                    columns: [
                        { header: "ID",  50, dataIndex: "ProvinceID", sortable: true },
                        { header: "编号",  100, dataIndex: "ProvinceNo", sortable: true },
                        { header: "名称",  135, dataIndex: "ProvinceName", sortable: true }
                    ],
                    bbar: Ext.create('Ext.PagingToolbar', {
                        store: store,
                        displayInfo: true,
                        displayMsg: '显示{0}-{1}条,共{2}条',
                        emptyMsg: "没有数据"
                    })
                });
            });
        </script>
    </head>
    <body>
    </body>
    </html>
    复制代码

    controller

    复制代码
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    
    using Northwind.Domain.Entities;
    using Northwind.Data;
    using Northwind.Service;
    
    namespace Northwind.Web.Controllers
    {
        public class ProvinceController : Controller
        {
            private IProvinceService provinceService;
    
            public ProvinceController(IProvinceService provinceService)
            {
                this.provinceService = provinceService;
            }
    
            public ActionResult Grid()
            {
                return View();
            }
    
            /// <summary>
            /// 省份分页数据
            /// </summary>
            /// <param name="page">当前页</param>
            /// <param name="limit">分页大小</param>
            /// <returns></returns>
            public JsonResult List(int page, int limit)
            {
                int totalRecords;
                return Json(new { root = provinceService.GetPaged(page, limit, out totalRecords), totalProperty = totalRecords }, JsonRequestBehavior.AllowGet);
            }
        }
    }
    复制代码

    效果图:

  • 相关阅读:
    Spring@Profile注解
    day 32 子进程的开启 及其用法
    day 31 udp 协议SOCK_DGRAM
    day 30 客户端获取cmd 命令的步骤
    day 29 socket 理论
    day 29 socket 初级版
    有关 组合 继承
    day 27 多态 接口 类方法 静态方法 hashlib 摘要算法模块
    新式类和经典类的区别
    day 28 hasattr getattr serattr delattr 和带__内置__ 类的内置方法
  • 原文地址:https://www.cnblogs.com/tianma3798/p/3531502.html
Copyright © 2011-2022 走看看