jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页
※ datagrid的基本属性和方法
※ datagrid分页在前后台的实现
最终效果:
与视图显示对应的view model
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 int PageSize { get; set; }
public int PageIndex { get; set; }
在实际项目中,可以把以上作为一个基类,把各个领域的各种搜索条件封装成继承PageParam的子类。
□ 分页服务层方法
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.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 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);
}
}
}
视图
※ datagrid的基本属性和方法
※ datagrid分页在前后台的实现
最终效果:
与视图显示对应的view model
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 int PageSize { get; set; }
public int PageIndex { get; set; }
在实际项目中,可以把以上作为一个基类,把各个领域的各种搜索条件封装成继承PageParam的子类。
□ 分页服务层方法
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.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 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);
}
}
}
视图
jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页的更多相关文章
- JQuery easyUi datagrid 中 editor 动态设置最大值最小值
前言 近来项目中使用到 easyui 来进行页面设计,感觉挺方便的,但是网上除了api外,其他有价值的资料比较少,故在此分享一点经验,供大家参考. 问题 JQuery easyUi datagri ...
- JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列
转自 http://blog.csdn.net/tianlincao/article/details/7494467 前言 JQuery easyUi datagrid 中 使用datagrid生 ...
- datagrid在MVC中的运用01-基本属性并实现分页
本文体验jQuery EasyUI的datagrid在MVC中的应用.主要涉及到: ※ datagrid的基本属性和方法 ※ datagrid分页在前后台的实现 最终效果: 与视图显示对应的view ...
- datagrid在MVC中的运用05-加入时间搜索条件,枚举填充下拉框
本文主要来体验在搜索区域增加更多的搜索条件,主要包括: ※ 使用jQuery ui的datepicker显示时间,设置显示格式.样式. ※ 设置jQuery ui的onClose事件,使开始和结束时间 ...
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
- jquery easyui datagrid使用参考
jquery easyui datagrid使用参考 创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...
- Jquery easyui datagrid 导出Excel
From:http://www.cnblogs.com/weiqt/articles/4022399.html datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <sc ...
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
- jQuery EasyUI datagrid列名包含特殊字符会导致表格错位
首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了. 洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为 ...
随机推荐
- [CF321C]Ciel the Commander
题目大意: 给你一棵n个结点的树,给每个结点分级,最高为'A',最低为'Z'. 尝试构造一种分级方案,使得任意两个相同级别的结点路径上至少有一个更高级的结点. 思路: 贪心+树上点分. 递归处理每一棵 ...
- 5.5(java学习笔记)TreeSet和TreeMap
1.TreeMap TreeMap是可排序的Map类,使用这个类时,TreeMap会对存放的数据进行排序. 排序是根据key来排序的,排序规则是key实现comparable接口中的compareTo ...
- Dom4jDemo应用-保存手机信息
---恢复内容开始--- import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStr ...
- 【R笔记】glm函数报错原因及解析
R语言glm函数学习: [转载时请注明来源]:http://www.cnblogs.com/runner-ljt/ Ljt 作为一个初学者,水平有限,欢迎交流指正. glm函数介绍: glm(for ...
- Android ProgressBar手动控制开始和停止
这两天有个需求,点击按钮从SD卡解压压缩包,并读取压缩包内txt文档内容,然后在街面上显示出来.毕竟IO操作很耗时,如果文件较大会花费不少时间.所以,在处理数据的时候能给个进度就好了.我们通常的做法就 ...
- 客户端连接Redis
首先下载Jedis http://mvnrepository.com/artifact/redis.clients/jedis 然后脚本如下: package redistest; import ja ...
- 安装office2016 64位时提示64位与32位的office程序不兼容,在系统是64位的情况下,由于应用的需要,必须装64位的office,怎么办
解决办法如下: 如果是,那就看看32位的能不能安装了,要是能,就重新安装一次,把所有组件全部安装,然后,在进行卸载,一般可以卸载成功 如果卸载不成功,这个时候再使用微软的专用卸载工具,——要认清,一定 ...
- PHPCMS V9管理员password忘记怎样改动
一般的虚拟主机商都提供了PHPmyAdmin,选择你站点数据库.然后选择v9_admin这个表. 编辑 password,变成:fa3250300be9b7ab0848257f3cbb06e7 enc ...
- 使用Python发送电子邮件
使用python发送邮件并不难,这里使用的是SMTP协议. Python标准库中内置了smtplib,使用它发送邮件只需提供邮件内容与发送者的凭证即可. 代码如下: # coding:utf-8 im ...
- 理解shell中的atime,mtime,ctime
所有文件都有3个时间信息,保存在文件系统中 atime (Access time)是文件最后一此读的时间 或者执行文件的时间 mtime (Modified time)是文件最后一次写的时间(是在写入 ...