本文体验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 string Attr1 { get; set; }
        public Int16 Status { get; set; }
    }

模拟一个从数据库拿数据,并考虑分页的服务层方法

□ 与分页有关的类

    public class PageParam 
    { 
        public int PageSize { get; set; } 
        public int PageIndex { get; set; } 
    }

在实际项目中,可以把以上作为一个基类,把各个领域的各种搜索条件封装成继承PageParam的子类。

□ 分页服务层方法

展开using System.Linq;
using DataGridInMvc.Models;
using System.Collections.Generic;
using Microsoft.Ajax.Utilities; namespace DataGridInMvc.Helper
{
public class BookService
{
public IEnumerable<Book> LoadPageBookData(PageParam param, out int total)
{
//创建Book的集合
var books = new List<Book>();
for (int i = 0; i < 30; i++)
{
books.Add(new Book()
{
ItemId = "EST-" + i,
ProductId = "AV-SB-" + i,
ListPrice = (i + 5) * 10m,
UnitCost = (i + 2) * 10m,
Attr1 = "Attr" + i,
Status = (short)0
});
} total = books.Count();
var result = books.OrderBy(b => b.ItemId)
.Skip(param.PageSize*(param.PageIndex - 1))
.Take(param.PageSize);
return result;
}
}
}

Controller有显示页面和响应前台datagrid请求的Action方法

展开using System.Collections.Generic;
using System.Linq;
using System.Security.Cryptography;
using System.Web;
using System.Web.Mvc;
using DataGridInMvc.Helper;
using DataGridInMvc.Models; namespace DataGridInMvc.Controllers
{
public class HomeController : Controller
{ public ActionResult Index()
{
return View();
} public ActionResult GetData()
{
//接收datagrid传来的参数
int pageIndex = int.Parse(Request["page"]);
int pageSize = int.Parse(Request["rows"]); //构建得到分页数据方法所需的参数
var temp = new PageParam()
{
PageIndex = pageIndex,
PageSize = pageSize
}; //分页数据方法的输出参数
int totalNum = 0; var service = new BookService();
var books = service.LoadPageBookData(temp, out totalNum); var result = from book in books
select new {book.ItemId, book.ProductId, book.ListPrice, book.UnitCost, book.Status, book.Attr1}; //total,rows是前台datagrid所需要的
var jsonResult = new {total = totalNum, rows = result}; //把json对象序列化成字符串
string str = JsonSerializeHelper.SerializeToJson(jsonResult);
return Content(str);
}
}
}

□ 这里需要把json对象序列化成string,使用Newtonsoft组件是不错的选择。把序列化和反序列化封装成类。

展开using System;
using Newtonsoft.Json; namespace DataGridInMvc.Helper
{
public static class JsonSerializeHelper
{
/// <summary>
/// 把object对象序列化成json字符串
/// </summary>
/// <param name="obj">序列话的实例</param>
/// <returns>序列化json字符串</returns>
public static string SerializeToJson(object obj)
{
return JsonConvert.SerializeObject(obj);
} /// <summary>
/// 把json字符串反序列化成Object对象
/// </summary>
/// <param name="json">json字符串</param>
/// <returns>对象实例</returns>
public static Object DeserializeFromJson(string json)
{
return JsonConvert.DeserializeObject(json);
} /// <summary>
/// 把json字符串反序列化成泛型T
/// </summary>
/// <typeparam name="T">泛型</typeparam>
/// <param name="json">json字符串</param>
/// <returns>泛型T</returns>
public static T DeserializeFromJson<T>(string json)
{
return JsonConvert.DeserializeObject<T>(json);
}
}
}

视图

展开   <link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Content/themes/icon.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.easyui.min.js"></script>
<script src="~/Scripts/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
initData();
}); function initData() {
$('#tt').datagrid({
url: 'Home/GetData',
width: 500,
height: 350,
title: 'Book列表',
iconCls: 'icon-save',
fitColumns: true,
rownumbers: true, //是否加行号
pagination: true, //是否显式分页
pageSize: 15, //页容量,必须和pageList对应起来,否则会报错
pageNumber: 2, //默认显示第几页
pageList: [15, 30, 45],//分页中下拉选项的数值
columns: [[
//book.ItemId, book.ProductId, book.ListPrice, book.UnitCost, book.Status, book.Attr1
{ field: 'ItemId', title: '主键', sortable: true },
{ field: 'ProductId', title: '产品编号' },
{ field: 'Attr1', title: '属性' },
{ field: 'UnitCost', title: '成本价' },
{ field: 'ListPrice', title: '零售价' },
{ field: 'Status', title: '状态' },
]]
});
} function changeP() {
var dg = $('#tt');
dg.datagrid('loadData', []); //重新加载数据
dg.datagrid({ pagePosition: $('#p-pos').val() }); //分页位置
dg.datagrid('getPager').pagination({ //分页样式、内容
layout: ['list', 'sep', 'first', 'prev', 'sep', $('#p-style').val(), 'sep', 'next', 'last', 'sep', 'refresh']
});
}
</script> <p>
选择分页显示位置:
<select id="p-pos" onchange="changeP()">
<option>bottom</option>
<option>top</option>
<option>both</option>
</select>
选择分页显示样式
<select id="p-style" onchange="changeP()">
<option>manual</option>
<option>links</option>
</select>
</p> <table id="tt">
</table>

datagrid在MVC中的运用01-基本属性并实现分页的更多相关文章

  1. datagrid在MVC中的运用05-加入时间搜索条件,枚举填充下拉框

    本文主要来体验在搜索区域增加更多的搜索条件,主要包括: ※ 使用jQuery ui的datepicker显示时间,设置显示格式.样式. ※ 设置jQuery ui的onClose事件,使开始和结束时间 ...

  2. MVC中,查询以异步呈现,分页不用异步的解决方案

    MVC中,查询以异步呈现,分页不用异步的解决方案 这种需求,用一个ASPX页面和一个ASCX分部视图就可以解决了,ASPX提供对ASCX的引用,ASCX显示列表信息,ASPX主页面提供查询功能 < ...

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

    ※ datagrid的基本属性和方法  ※ datagrid分页在前后台的实现 最终效果:    与视图显示对应的view model   public class Book public strin ...

  4. datagrid在MVC中的运用07-实现Master-Detail(使用PartialView)

    本文主要体验用jQuery Easyui的datagrid来实现Master-Detail主次表.谢谢Kevin的博文,助我打开了思路. 主表显示所有的Category,当点击主表的展开按钮,显示该C ...

  5. datagrid在MVC中的运用10-勾选

    本文体验与勾选有关的特性. 需要加载的books.json 展开{ "total": 4, "rows": [ { "productid": ...

  6. datagrid在MVC中的运用09-实现排序

    本文体验datagrid的排序. □ 思路 当点击datagrid的标题,视图传递给Controller的Form Data类似这样:page=1&rows=10&sort=Custo ...

  7. datagrid在MVC中的运用06-固定连续列

    本文主要体验datagrid的frozenColumns属性. □ frozenColumns效果: 在frozenColumns的列将保持不动,而其他列横向滚动. □ frozenColumns效果 ...

  8. datagrid在MVC中的运用02-结合搜索

    本文接着上一篇,来体验给datagrid加上搜索功能.主要涉及到: ※ 把一个div与datagrid相关起来 ※ datagrid接收查询参数 ※ 查询参数的封装 效果图: 查询参数封装 分页相关的 ...

  9. datagrid在MVC中的运用08-实现Master-Detail(使用子datagrid)

    本文主要通过一个子datagrid来实现主次表.谢谢Kevin的博文. 代码部分与http://www.cnblogs.com/darrenji/p/3576258.html相似,这里只列出不一样的地 ...

随机推荐

  1. Linux下select&poll&epoll的实现原理(一)【转】

    转自:http://www.cnblogs.com/lanyuliuyun/p/5011526.html 最近简单看了一把 linux-3.10.25 kernel中select/poll/epoll ...

  2. 图解USB协议之一 枚举过程【转】

    转自:http://blog.csdn.net/myarrow/article/details/8270060 0. 枚举流程 • 连接了设备的 HUB 在 HOST 查询其状态改变端点 时返回对应的 ...

  3. React-Native 之 生命周期

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  4. 最完整的PS快捷键大全(绝对经典)

    快速恢复默认值 有些不擅长Photoshop的朋友为了调整出满意的效果真是几经周折,结果发现还是原来的默认效果最好,这下傻了眼,后悔不该当初呀!怎么恢复到默认值呀?试着轻轻点按选项栏上的工具图标,然后 ...

  5. 文件时间戳修改touch和查看stat和ls --time

    查看文件时间戳命令:stat awk.txtFile: `awk.txt'Size: 20  Blocks: 8  IO Block: 4096  regular fileDevice: 801h/2 ...

  6. Oracle学习笔记:外连接(+)的用法

    Oracle中常用 left join 和 right join 来进行外连接,同时,oracle也支持 (+) 的特殊用法,也是表示外连接,并且总是放在非主表的一方. 例如: 左外连接: selec ...

  7. FileInputStram入门

    1.read() 读取一个字节 @Test public void test1() throws Exception{  //1.指定文件读取路径  String filePath = "E ...

  8. Java编程的逻辑 (17) - 继承实现的基本原理

    ​本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...

  9. 在k8s集群中,利用prometheus的jmx_exporter进行tomcat的JVM性能监控,并用grafana作前端展示

    查找了很多文档,没有完全达到我要求的, 于是,作了一定的调整,成现在这样. 操作步骤如下: 一,准备好两个文件. jmx_prometheus_javaagent-0.3.1.jar jmx_expo ...

  10. APIO2018酱油记

    苟比主席树太难了学不会 还是把APIO几天的过程记下来吧...免得忘了 DAY -5 去CTSC的人都走了,机房好冷清...只有我.PSB.yasar.Chlience四个人 CSTC辣么难又辣么贵, ...