先上图吧

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

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

DDL.cshtml

<!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/JqueryEasyUi/jquery.easyui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

$('#List2').datagrid({
                title: '新闻列表',
                url: 'DDL_Gd',
                method: 'get', //默认是post,不允许对静态文件访问
                width: '100%',
                iconCls: 'icon-save',
                dataType: "json",
                fitColumns: true,
                rownumbers: true, //是否加行号
                pagination: true, //是否显式分页
                pageSize: 4, //页容量，必须和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: '添加日期' }
                ]],
                singleSelect: false, //允许选择多行
                selectOnCheck: true, //true勾选会选择行，false勾选不选择行, 1.3以后有此选项
                checkOnSelect: true //true选择行勾选，false选择行不勾选, 1.3以后有此选项
            });
        });
    </script>
</head>
<body>
    <div>
        <div style="margin: 10px 0;">
        </div>
        <table id="List2" class="easyui-datagrid">
        </table>
    </div>
</body>
</html>

控制层代码：

NewsControl.cs

NewsDbContent db = new NewsDbContent();

public ActionResult DDL()
        {
            return View();
        }

public ActionResult DDL_Gd()
        {
            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 json = db.Newss.OrderBy(n => n.Id).Skip<News>((pageIndex - 1) * pageSize).Take<News>(pageSize).ToList<News>();
            return Json(json, JsonRequestBehavior.AllowGet);
        }

Models文件下的代码文件(两个代码文件News.cs、NewsDbContent.cs)

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; }
    }
}

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; }
    }
}

web.config配置文件：

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

.Net的DataGrid的使用的更多相关文章

  1. ASP.NET Aries 入门开发教程7：DataGrid的行操作（主键操作区）

    前言: 抓紧勤奋,再接再励,预计共10篇来结束这个系列. 上一篇介绍:ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑 本篇介绍主键操作区相关内容. 1:什么时候有默认的 ...

  2. JQuery easyUI DataGrid 创建复杂列表头(译)

    » Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...

  3. ASP.NET Aries DataGrid 配置表头说明文档

    DataGrid 配置表头 字段 中文 说明 Field 字段 注意:mg_ 开头的字段为层级表头 Title 列称 OrderNum 序号 显示的顺序(冻结和非冻结列是两个组的序号) Width 列 ...

  4. ASP.NET Aries JSAPI 文档说明：AR.DataGrid、AR.Dictionary

    AR.Global 文档 1:对象或属性: 名称 类型 说明 DG 对象 DataGrid操作对象 //datagrid集合,根据ID取出DataGrid对象,将Json当数组用. Items: ne ...

  5. ASP.NET Aries JSAPI 文档说明：AR.DataGrid

    AR.DataGrid 文档 用法: <body> <table id="dg"></table> </body> </htm ...

  6. ASP.NET MVC5+EF6+EasyUI 后台管理系统（7）-MVC与EasyUI DataGrid

    系列目录 本节知识点 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI读取MVC后台Json数据 开始实现 我们的系统似乎越来越有趣了 首先从前端入手,开打View下面的Sh ...

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

    系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...

  8. 控制EasyUI DataGrid高度

    这次要说的是控制EasyUI的高度,平时我公司的项目,用EasyUI较多,然后datagrid这个组件是用的非常多的.平时我们都是固定高度,常见代码如下:             <table  ...

  9. GridView/DataGrid行单击和双击事件实现代码_.Net教程

    功能: 单击选中行,双击打开详细页面 说明:单击事件(onclick)使用了 setTimeout 延迟,根据实际需要修改延迟时间 ;当双击时,通过全局变量 dbl_click 来取消单击事件的响应  ...

  10. WPF DataGrid 行选中相关

    DataGrid选中行是有自带SelectionChanged的,可是当需要重复选中同一行时,该事件就不会触发了. 后来反复查资料找到了DataGrid上有个DataGridRow. DataGrid ...

随机推荐

  1. Javascript高级程序设计——在HTML中使用Javascript

    <script>元素 向HTML页面中插入Javascript的主要方法,就是使用<script>元素,<script>元素有六个属性: async:可选.表示应该 ...

  2. 获取MAC地址的几种方式

    .NET 后台中 using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...

  3. Apache 虚拟主机

    httpd支持的虚拟主机类型包括以下三种 基于域名:为每个虚拟主机使用不同的域名.但其对应的IP使相同的. 基于IP地址:为每个虚拟主机使用不同的域名,切各自对应的IP地址也不相同. 基于端口:这种方 ...

  4. Redis学习笔记九：独立功能之慢查询日志

    Redis 的慢查询日志用于记录执行时间超过给定时长的命令请求,用户可以通过这个功能产生的日志来监视和优化查询速度. 服务器配置有两个相关选项: slowlog-log-slower-than 选项指 ...

  5. Java多线程基础知识（三）

    一. 管道输入/输出流 它和其它文件输入/输出流或网络输入/输出流的不同之处,它主要是线程之间的数据传输,而传输的媒介是内存. 管道输入/输出流主要包含四中实现: 1. PipedOutputStre ...

  6. MySQL的InnoDB索引原理详解 (转)

    摘要: 本篇介绍下Mysql的InnoDB索引相关知识,从各种树到索引原理到存储的细节. InnoDB是Mysql的默认存储引擎(Mysql5.5.5之前是MyISAM,文档).本着高效学习的目的,本 ...

  7. iOS开发——高级篇——iOS 中的 NSTimer

    以前的老代码在使用 NSTimer 时出现了内存泄露 NSTimer fire 我们先用 NSTimer 来做个简单的计时器,每隔5秒钟在控制台输出 Fire .比较想当然的做法是这样的: 1 2 3 ...

  8. BZOJ2171——K凹凸序列

    好吧,我承认是sb题QAQ BZOJ2171弱化版QAQ 这题考试的时候写的我快吐血了QAQ 0.题目大意:给一个序列,你可以随便修改,修改是将一个数+1或-1,一次修改的代价是1,问把这个数修改成x ...

  9. mac 系统通用快捷键（mac 下的应用多数会往这些标准看齐）（转：http://yang3wei.github.io/blog/2013/02/08/chen-ni-yu-mac-chen-ni-yu-xcode/）

    command + w: 关闭当前窗口 command + q: 退出程序 (Google Chrome 有点奇葩,按下之后还需要hold 那么一小会儿才能退出) command + m: 最小化当前 ...

  10. [BZOJ4326][codevs4632][codevs5440][UOJ#150][NOIP2015]运输计划

    [BZOJ4326][codevs4632][codevs5440][UOJ#150][NOIP2015]运输计划 试题描述 公元 2044 年,人类进入了宇宙纪元. L 国有 n 个星球,还有 n− ...