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);
            }
        }
    }
    复制代码

    效果图:

  • 相关阅读:
    Java下的tinylog日志打印
    rmi的调用
    linux下hex转ascii
    CSP攻略
    ThinkPHP5代码执行的简单分析
    MySQL UDF(User Defined Function)提权
    与邮件协议相关的端口
    常见哈希算法的密文格式
    ThinkPHP 5.0.x 反序列化漏洞 PoC
    Tomcat AJP协议文件包含漏洞(CVE-2020-1938)
  • 原文地址:https://www.cnblogs.com/tianma3798/p/3531502.html
Copyright © 2011-2022 走看看