.Net的DataGrid的使用

先上图吧

这是效果,先声明分页没得哈,后面补上了会更新咯。

你得先下载一个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]

时间: 2024-08-30 10:20:23

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

jquery easyui里datagrid用法记录

1.删除行方法(deleteRow) $('#ruleManagementTable').datagrid('deleteRow', 1); //1代表选中的行索引 2.删除多行数据 var rows = $('#ruleManagementTable').datagrid("getSelections"); //获取你选择的所有行 //循环所选的行 for(var i =0,l=rows.length;i<l;i++){ var index = $('#ruleManageme

datagrid不能显示数据,原因在于JSON字符串存在特殊字符

最近在使用easyui的datagrid展示报表时老是出现报表不能正常显示的情况,看所拼接而成的JSON格式数据表面上却没任何的问题,根据经验排查了一下所生产字符串中是否含有特殊字符,果然查到部分字段里存在回车换行符,手动替换之后报表显示正常.问题找到了,接下来就是怎么解决问题的事: 一.从根源解决问题,在数据提交保存的时候就把该替换的全替换掉,一劳永逸.但写出来的东西很长,是不是有点难看. content=trim(Replace(Replace(Replace(Replace(Request

datagrid 里面的formatter方法

A.{field:'station_staus',title:'工位状态',width:250,align:'center',formatter: function(value,row,index){ if (row.station_staus==0){ return "现实"; } if(row.station_staus==1){ return "虚拟"; } }}, B.function(value, row, index) { return "&l

EasyUI DataGrid 应用示例

我们使用如下标签来创建表格 <table id="dg"></table> JS代码如下: $('#dg').datagrid({        columns:[[            {field:'TIME',title:'标题1,width:140},            {field:'SUM_NUM',title:'标题2,width:140, styler:function(value,row,index){                  

EasyUi -- 如何根据动态加载panel和Datagrid

在做项目的过程中,前台的面板和表格一般都不是固定的,它是根据后台传来的数据进行变化的.举个例子: 实现: 看一下我们的效果图: 这个上面的最左边的Panel要根据系别动态加载,有多少个系别就要加载都少个Panel,Panel里面的是一个table,这个里面也是动态加载出来. 右边是一个datagrid,datagrid里面的工作效率.业务能力等等也都是数据库动态加载出来的,包括后面的ABCD也是动态的. 这样就算数据库中的数据怎么变,这里都会动态地加载出来.那么怎么实现这些功能呢? 一.动态加载

WPF 实现 DataGrid/ListView 分页控件

在WPF中,通常会选用DataGrid/ListView进行数据展示,如果数据量不多,可以直接一个页面显示出来.如果数据量很大,2000条数据,一次性显示在一个页面中,不仅消耗资源,而且用户体验也很糟糕.这篇博客将介绍如何创建一个分页控件. 为了简单起见,这个分页控件目前只有 首页/上一页/下一页/末页/总页数/第几页 等功能.实现思路,首页/上一页/下一页/末页 这四个通过路由事件来实现,在使用时可以使用命令进行绑定,或者直接使用均可.总页数和第几页通过依赖属性来实现,使用时将页数进行绑定显示

EasyUI带选择框的DataGrid实现点击行&quot;不选中或取消选中&quot;的解决方法。

1 var IsCheckFlag = true; //标示是否是勾选复选框选中行的,true - 是 , false - 否 2 $("#dg").datagrid({ 3 rownumbers:true, 4 url: 'LeadsData.ashx?o=list', 5 method:'get', 6 fit: true, 7 striped:true, 8 pagination: true, 9 fitColumns: true, 10 checkOnSelect: false

JQuery EasyUI DataGrid 纵向(转置)表格插件 TransposedView

在页面上显示表格时,有时会遇到有些表格的列非常多,而行却比较少.例如财务报表,往往有几十列,行却只有最多三行,显示在页面上的话页面会被极大地拉宽,体验不好.通常的做法是把这种表格改为纵向显示,像矩阵的转置一样,行变成‘列’,列变成‘行’.该插件即可为DataGrid添加纵向排列表格的功能. 效果图如下: 插件下载:http://files.cnblogs.com/files/mergen/jquery-easyui-datagrid-transposedview.zip 使用步骤: Step 1

Datagrid接收JSON数据格式

开打View下面的Shared创建一个视图模版(母版页)<!DOCTYPE html> <html> <head> <title>Main</title> <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script> <script src=&qu

(原创)EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件

有时候在行编辑的时候,一个编辑框的值要根据其它编辑框的值进行变化,那么可以通过在开启编辑时,找到特定的Editor,为其添加事件 // 绑定事件, index为当前编辑行 var editors = $('#staffLogDetailGrid').datagrid('getEditors', index);     //获得当前行的编辑对象 console.info(editors[5]);  //editor[5]表示第五列这个控件 var sfgzEditor = editors[5];