datagrid在MVC中的运用01-基本属性并实现分页
本文体验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-基本属性并实现分页的更多相关文章
- datagrid在MVC中的运用05-加入时间搜索条件,枚举填充下拉框
本文主要来体验在搜索区域增加更多的搜索条件,主要包括: ※ 使用jQuery ui的datepicker显示时间,设置显示格式.样式. ※ 设置jQuery ui的onClose事件,使开始和结束时间 ...
- MVC中,查询以异步呈现,分页不用异步的解决方案
MVC中,查询以异步呈现,分页不用异步的解决方案 这种需求,用一个ASPX页面和一个ASCX分部视图就可以解决了,ASPX提供对ASCX的引用,ASCX显示列表信息,ASPX主页面提供查询功能 < ...
- jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页
※ datagrid的基本属性和方法 ※ datagrid分页在前后台的实现 最终效果: 与视图显示对应的view model public class Book public strin ...
- datagrid在MVC中的运用07-实现Master-Detail(使用PartialView)
本文主要体验用jQuery Easyui的datagrid来实现Master-Detail主次表.谢谢Kevin的博文,助我打开了思路. 主表显示所有的Category,当点击主表的展开按钮,显示该C ...
- datagrid在MVC中的运用10-勾选
本文体验与勾选有关的特性. 需要加载的books.json 展开{ "total": 4, "rows": [ { "productid": ...
- datagrid在MVC中的运用09-实现排序
本文体验datagrid的排序. □ 思路 当点击datagrid的标题,视图传递给Controller的Form Data类似这样:page=1&rows=10&sort=Custo ...
- datagrid在MVC中的运用06-固定连续列
本文主要体验datagrid的frozenColumns属性. □ frozenColumns效果: 在frozenColumns的列将保持不动,而其他列横向滚动. □ frozenColumns效果 ...
- datagrid在MVC中的运用02-结合搜索
本文接着上一篇,来体验给datagrid加上搜索功能.主要涉及到: ※ 把一个div与datagrid相关起来 ※ datagrid接收查询参数 ※ 查询参数的封装 效果图: 查询参数封装 分页相关的 ...
- datagrid在MVC中的运用08-实现Master-Detail(使用子datagrid)
本文主要通过一个子datagrid来实现主次表.谢谢Kevin的博文. 代码部分与http://www.cnblogs.com/darrenji/p/3576258.html相似,这里只列出不一样的地 ...
随机推荐
- Linux监控重要进程的实现方法
Linux监控重要进程的实现方法 不管后台服务程序写的多么健壮,还是可能会出现core dump等程序异常退出的情况,但是一般情况下需要在无 人为干预情况下,能够自动重新启动,保证服务进程能够服务用户 ...
- springcloud使用Hystrix实现微服务的容错处理
使用Hystrix实现微服务的容错处理 容错机制 如果服务提供者相应非常缓慢,那么消费者对提供者的请求就会被强制等待,知道提供者相应超时.在高负载场景下,如果不作任何处理,此类问题可能会导致服务消费者 ...
- python 列表元组加减乘除法
元组(typle)列表(list)没有减法和除法,但有加法和乘法. 1.加法,即把元素相加.只可以list和tuple相加,不能加其他类型. t= (1, ) + (2, 3, 4) print(t, ...
- 关于.NetCore 2.0 迁移到2.1的一些建议和问题
最近手欠升级了下VS2017到15.7版本 然后更新了下sdk到2.1.300版本 那么麻烦就来了,原有项目就带来了很多问题,更新所有包到最新就不用说了 下面说明下最主要存在的2问题: 第一个问题:调 ...
- Elasticsearch常用最全最常用工具清单
https://blog.csdn.net/ZYC88888/article/details/82872558
- 【LOJ】#2078. 「JSOI2016」无界单词
题解 用所有的方案减去有界的方案 我们规定两个前缀后缀相同时长度最短的,设长度为l,因为长度最短所以他们也是无界单词,可以递推 \(f[i] = \sum_{j = 1}^{\lfloor \frac ...
- 【noip模拟赛1】古韵之同心锁
据说在一座OI桥上,同心锁上显示的文字有着它奇异的呈现方式,需要你把它稍做改变才可解密.每个同心锁上都有3个数据.第一个数据是一个字符串s.第二个数据m表示把s串从m处分为两段,s[1]至s[m-1] ...
- win10+wget 收藏
win10+wget 收藏 https://blog.csdn.net/qq_31163325/article/details/84344774 1.下载地址:https://eternall ...
- CSS3选择器02—CSS3部分选择器
该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color ...
- SmartSVN11 Mac版 注册码序列号
Name=apipostAddress=1337 iNViSiBLE Str.Email=3257132998@qq.comFreeUpdatesUntil=2099-09-26LicenseCoun ...