MVC 使用Jquery EasyUI分页成功

先上图吧

你得先下载一个EasyUi框架，地址：http://www.jeasyui.net/download/

在你的项目中需要引用，前台代码如下：

DataGrid.cshtml

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>DDL</title>
    <link href="../../Scripts/JqueryEasyUi/themes/default/easyui.css" rel="stylesheet"
        type="text/css" />
    <link href="../../Scripts/JqueryEasyUi/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/JqueryEasyUi/jquery.min.js" type="text/javascript"></script>
    <script src="../../Scripts/FormatDate.js" type="text/javascript"></script>
    <script src="../../Scripts/JqueryEasyUi/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../../Scripts/datagrid.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(‘#List2‘).datagrid({
                title: ‘新闻列表‘,
                url: ‘DataGrid_Bind‘,
                method: ‘get‘, //默认是post,不允许对静态文件访问
                width: ‘100%‘,
                iconCls: ‘icon-save‘,
                dataType: "json",
                fitColumns: true,
                rownumbers: true, //是否加行号
                pagination: true, //是否显式分页
                pageSize: 5, //页容量，必须和pageList对应起来，否则会报错
                pageNumber: 1, //默认显示第几页
                pageList: [5, 10, 15, 30, 45], //分页中下拉选项的数值
                columns: [[
                    { field: ‘ck‘, checkbox: true },
                    { field: ‘Title‘, title: ‘标题‘ },
                    { field: ‘AddUser‘, title: ‘添加人‘ },
                    { field: ‘Content‘, title: ‘内容‘ },
                    { field: ‘AddDate‘, title: ‘添加日期‘, formatter: formatDateBoxFull }//这是设置日期的格式
                ]],
                toolbar: [{
                    text: ‘添加‘,
                    iconCls: ‘icon-add‘,
                    handler: function () {
                        //                openDialog("add_dialog", "add");
                        alert("123");
                    }
                }, ‘-‘, {
                    text: ‘修改‘,
                    iconCls: ‘icon-edit‘,
                    handler: function () {
                        openDialog("add_dialog", "edit");
                    }
                }, ‘-‘, {
                    text: ‘删除‘,
                    iconCls: ‘icon-remove‘,
                    handler: function () {
                        delAppInfo();
                    }
                }],
                singleSelect: false, //允许选择多行
                selectOnCheck: true, //true勾选会选择行，false勾选不选择行, 1.3以后有此选项
                checkOnSelect: true, //true选择行勾选，false选择行不勾选, 1.3以后有此选项
                collapsible: true
            });
        });
    </script>
</head>
<body>
    <div>
        <div style="margin: 10px 0;">
        </div>
        <table id="List2" class="easyui-datagrid">
        </table>
    </div>
</body>
</html>

这是设置日期格式的js代码，FormatDate.js：

/*该方法使日期列的显示符合阅读习惯*/
//datagrid中用法：{ field:‘StartDate‘,title:‘开始日期‘, formatter: formatDatebox, width:80}
function formatDatebox(value) {
    if (value == null || value == ‘‘) {
        return ‘‘;
    }
    var dt = parseToDate(value);
    return dt.format("yyyy-MM-dd");
}

/*转换日期字符串为带时间的格式*/
function formatDateBoxFull(value) {
    if (value == null || value == ‘‘) {
        return ‘‘;
    }
    var dt = parseToDate(value);
    return dt.format("yyyy-MM-dd");//设置前台显示的日期格式
}

//辅助方法(转换日期)
function parseToDate(value) {
    if (value == null || value == ‘‘) {
        return undefined;
    }

    var dt;
    if (value instanceof Date) {
        dt = value;
    }
    else {
        if (!isNaN(value)) {
            dt = new Date(value);
        }
        else if (value.indexOf(‘/Date‘) > -1) {
            value = value.replace(/\/Date\((-?\d+)\)\//, ‘$1‘);
            dt = new Date();
            dt.setTime(value);
        } else if (value.indexOf(‘/‘) > -1) {
            dt = new Date(Date.parse(value.replace(/-/g, ‘/‘)));
        } else {
            dt = new Date(value);
        }
    }
    return dt;
}

//为Date类型拓展一个format方法，用于格式化日期
Date.prototype.format = function (format) //author: meizz
{
    var o = {
        "M+": this.getMonth() + 1, //month
        "d+": this.getDate(),    //day
        "h+": this.getHours(),   //hour
        "m+": this.getMinutes(), //minute
        "s+": this.getSeconds(), //second
        "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
        "S": this.getMilliseconds() //millisecond
    };
    if (/(y+)/.test(format))
        format = format.replace(RegExp.$1,
                (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(format))
            format = format.replace(RegExp.$1,
                    RegExp.$1.length == 1 ? o[k] :
                        ("00" + o[k]).substr(("" + o[k]).length));
    return format;
};

控制层代码：

NewsControl.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using NewsMvc.Models;
using System.Text;
namespace NewsMvc.Controllers
{
    public class NewsController : Controller
    {
        BaseOption<News> bs = new BaseOption<News>();
        News ns = new News();
        public ActionResult Index()
        {
            return View(bs.getlist(ns));
        }
        public ActionResult DDL()
        {
            return View();
        }
        NewsDbContent db = new NewsDbContent();
        public ActionResult DataGrid()
        {
            return View();
        }
        public ActionResult DataGrid_Bind()
        {
            int pageSize = 5;
            int pageIndex = 1;
            int.TryParse(this.Request["page"], out pageIndex);
            int.TryParse(this.Request["rows"], out pageSize);
            pageSize = pageSize <= 0 ? 5 : pageSize;
            pageIndex = pageIndex < 1 ? 1 : pageIndex;
            var query = from u in db.Newss
                        select u;
            var currentData = db.Newss.OrderBy(n => n.Id).Skip<News>((pageIndex - 1) * pageSize).Take(pageSize);
            //匿名类
            var data = new { total = query.Count(), rows = currentData };
            return Json(data, JsonRequestBehavior.AllowGet);
        }
        //添加
        public ActionResult Create()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Create(News ns)
        {
            ns.Title = Request.Form["news_title"].ToString().Trim();
            ns.AddUser = Request.Form["news_adduers"].ToString().Trim();
            ns.Content = Request.Form["news_content"].ToString().Trim();
            ns.AddDate = DateTime.Parse(Request.Form["news_adddate"].ToString().Trim());
            bs.Add(ns);
            return RedirectToAction("Index");
        }
        //编辑
        public ActionResult Edit(int id)
        {
            ns = bs.FindById(id);
            return View(ns);
        }
        [HttpPost]
        public ActionResult Edit(News ns)
        {
            bs.Update(ns);
            return RedirectToAction("Index");
        }
        //删除
        public ActionResult Delete(int id)
        {
            bs.Delete(id);
            return RedirectToAction("Index");
        }
    }
}

Models文件下的代码文件(4个代码文件BaseOption.cs、News.cs、NewsDbContent.cs、NewsType.cs)

BaseOption.cs 这是对数据的增删改查提供的公共类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;

namespace NewsMvc.Models
{
    public class BaseOption<T> where T : class
    {
        NewsDbContent ns_db = new NewsDbContent();
        //添加
        public void Add(T entity)
        {
            ns_db.Entry<T>(entity).State = EntityState.Added;
            ns_db.SaveChanges();
        }
        //修改
        public void Update(T entity)
        {
            ns_db.Set<T>().Attach(entity);
            ns_db.Entry<T>(entity).State = EntityState.Modified;
            ns_db.SaveChanges();
        }
        //删除
        public void Delete(params object[] keyValues)
        {
            T t = FindById(keyValues);
            ns_db.Set<T>().Attach(t);
            ns_db.Entry<T>(t).State = EntityState.Deleted;
            ns_db.SaveChanges();
        }
        //查询集合
        public List<T> getlist(T entity)
        {
            return ns_db.Set<T>().ToList();
        }
        //根据Id返回查询的集合
        public T FindById(params object[] keyValues)
        {
            return ns_db.Set<T>().Find(keyValues);
        }
    }
}

News.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace NewsMvc.Models
{
    public class News
    {
        [Display(Name = "编号")]
        public int Id { get; set; }
        [Required(ErrorMessage = "标题必填")]
        [Display(Name = "标题")]
        public string Title { get; set; }
        [Display(Name = "添加人")]
        public string AddUser { get; set; }
        [Display(Name = "内容")]
        public string Content { get; set; }
        [Display(Name = "添加时间")]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}")]
        public DateTime AddDate { get; set; }
        [Display(Name = "备注")]
        public string Remark { get; set; }
        public string tes { get; set; }
    }
}

NewsDbContent.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
//using System.Data.Objects.DataClasses;

namespace NewsMvc.Models
{
    public class NewsDbContent : DbContext
    {
        public DbSet<News> Newss { get; set; }
        public DbSet<NewsType> NewsTypes { get; set; }
    }

}

web.config配置文件：

<?xml version="1.0" encoding="utf-8"?>
<!--
  有关如何配置 ASP.NET 应用程序的详细信息，请访问
  http://go.microsoft.com/fwlink/?LinkId=152368
  -->
<configuration>
  <configSections>

    <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
    <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
  </configSections>
  <appSettings>
    <add key="webpages:Version" value="1.0.0.0" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>
  <connectionStrings>
    <add name="NewsDbContent" connectionString="Data Source=.;Initial Catalog=News;Integrated Security=true;" providerName="System.Data.SqlClient" />
  </connectionStrings>
  <system.web>
    <compilation debug="true" targetFramework="4.0">
      <assemblies>
        <add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Web.Helpers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Web.WebPages, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Data.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
      </assemblies>
    </compilation>
    <authentication mode="Forms">
      <forms loginUrl="~/Account/LogOn" timeout="2880" />
    </authentication>
    <pages>
      <namespaces>
        <add namespace="System.Web.Helpers" />
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="System.Web.WebPages" />
      </namespaces>
    </pages>
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules runAllManagedModulesForAllRequests="true" />
  </system.webServer>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-2.0.0.0" newVersion="3.0.0.0" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
  <entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.SqlConnectionFactory, EntityFramework" />
    <providers>
      <provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" />
    </providers>
  </entityFramework>
</configuration>

Sql数据库代码，数据库叫News

USE [News]
GO
/****** 对象:  Table [dbo].[News]    脚本日期: 08/13/2015 11:09:16 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[News](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [Title] [nvarchar](max) COLLATE Chinese_PRC_CI_AS NULL,
    [AddUser] [nvarchar](max) COLLATE Chinese_PRC_CI_AS NULL,
    [Content] [nvarchar](max) COLLATE Chinese_PRC_CI_AS NULL,
    [AddDate] [datetime] NULL,
 CONSTRAINT [PK__News__7E6CC920] PRIMARY KEY CLUSTERED
(
    [Id] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]

最后附上程序的文件结构图

若有宝贵意见或者不清楚的请留言我们互相交流学习。

时间： 2024-11-09 03:17:13

MVC 使用Jquery EasyUI分页成功的相关文章

jquery easy-ui 分页插件的运用(给td添加事件,获取汇总内容)

<#include '/admin/express-header.html' > <div class="main" style=" background:#fff; padding: 15px 0px 8px 10px; margin: 0px;"><div class="ex-boxOne"> <label for="start_date">订阅日期:</label&g

jquery - easyui - 分页

datagrid [表格分页] var orderDataGrid = $("#orderDataGrid").datagrid({ width : "auto", height : "auto", idField : "memberid",                                                                                   //[主键] url

开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo（转）

热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI.它有完整的demo和强大AIP手册,使我在开发过程中得心 应手.以下是这篇博文Demo程序的演示效果: 解决方案如图1所示 图1 Domain:领域模型 Dao:持久层 Service:服务层 WebSite:表示层 Common:通用类 首页如图2所示,可以选择中文和English. 图2 英文首

[转]开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo

热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI.它有完整的demo和强大AIP手册,使我在开发过程中得心应手.以下是这篇博文Demo程序的演示效果: 解决方案如图1所示 图1 Domain:领域模型 Dao:持久层 Service:服务层 WebSite:表示层 Common:通用类 首页如图2所示,可以选择中文和English. 图2 英文首页

easyui分页的使用方法

使用: $("#tt").datagrid("getPager").pagination(option); 例子: $("#tb").datagrid("getPager").pagination({ total: 100, pageSize: 10, pageList: [10,20,30], onSelectPage: function(pageNumber, pageSize) { console.log(pageNum

jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页

※ datagrid的基本属性和方法  ※ datagrid分页在前后台的实现 最终效果:    与视图显示对应的view model   public class Book public string ItemId { get; set; } public string ProductId { get; set; } public decimal ListPrice { get; set; } public decimal UnitCost { get; set; } public strin

jquery easyui datagrid 分页 详解

前些天用jquery easyui的table easyui-datagrid做分页显示的时候,折腾了很久,后来终于解决了.其实不难,最主要我不是很熟悉前端的东西. table easyui-datagrid分页 有一个附加的分页控件,只需后台获取分页控件自动提交的两个参数rows(每页显示的记录数)和page(当前第几页)然后读取相应页数的记录,和总记录数total一块返回即可. 1.界面 2.前端代码 <table id="dg" title="文章管理"

套用JQuery EasyUI列表显示数据、分页、查询

声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近看到一款轻型的UI感觉不错,但是在网上找了好多教程,但是没有一个是完全是C#asp.net写的 无耐下,自己写了下,感觉效果不错,故拿出来和大学分享一下,希望可以抛砖引玉作用. 由于好多人都只是拷贝代码,故在此全用图片作说明. 图片效果图1 这个界面是上左右下结构 左边是一棵树 右边是一个表格 上部

ASP.NET网站权限设计实现——套用JQuery EasyUI列表显示数据、分页、查询

有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近看到一款轻型的UI感觉不错,但是在网上找了好多教程,但是没有一个是完全是C#asp.net写的 无耐下,自己写了下,感觉效果不错,故拿出来和大学分享一下,希望可以抛砖引玉作用. 由于好多人都只是拷贝代码,故在此全用图片作说明. 图片效果图1 这个界面是上左右下结构 左边是一棵树 右边是一个表格 上部是标题 最下部只是一个空的保留一部分空间 下面开始说下整体结构HTML代码如下 至于HTML代码不想在做多余的解说 下面开始左边的树,