※ 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的基本属性和方法 
※ 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>

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

  1. JQuery easyUi datagrid 中 editor 动态设置最大值最小值

    前言 近来项目中使用到 easyui 来进行页面设计,感觉挺方便的,但是网上除了api外,其他有价值的资料比较少,故在此分享一点经验,供大家参考.   问题 JQuery easyUi datagri ...

  2. JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列

    转自   http://blog.csdn.net/tianlincao/article/details/7494467 前言 JQuery easyUi datagrid 中 使用datagrid生 ...

  3. datagrid在MVC中的运用01-基本属性并实现分页

    本文体验jQuery EasyUI的datagrid在MVC中的应用.主要涉及到: ※ datagrid的基本属性和方法 ※ datagrid分页在前后台的实现 最终效果: 与视图显示对应的view ...

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

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

  5. jQuery EasyUI DataGrid Checkbox 数据设定与取值

    纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...

  6. jquery easyui datagrid使用参考

    jquery easyui datagrid使用参考   创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...

  7. Jquery easyui datagrid 导出Excel

    From:http://www.cnblogs.com/weiqt/articles/4022399.html datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <sc ...

  8. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  9. jQuery EasyUI datagrid列名包含特殊字符会导致表格错位

    首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了. 洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为 ...

随机推荐

  1. [Hybrid App]--Android混合开发,Android、Js的交互

    AndroidJs通信 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !imp ...

  2. 十. 图形界面(GUI)设计13.鼠标事件

    鼠标事件的事件源往往与容器相关,当鼠标进入容器.离开容器,或者在容器中单击鼠标.拖动鼠标时都会发生鼠标事件.java语言为处理鼠标事件提供两个接口:MouseListener,MouseMotionL ...

  3. Metesploit使用随笔

    平时在工作中真正用到metesploit机会不多,偶尔也会用来做漏洞验证,但是每次使用的时候都需要花点时间回忆一下具体是怎么用的,因此索性记下来方便自己,以使用Nessus扫描YS的某个硬件设备发现的 ...

  4. Asp.net Core学习文章

    杜现鹏的Asp.net Core文章 EF Core 官方教程 https://docs.microsoft.com/en-us/ef/core/get-started/aspnetcore/new- ...

  5. js各种验证总结

    1.邮箱验证 function isEmail(str){ var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1 ...

  6. [Python爬虫] 之二十一:Selenium +phantomjs 利用 pyquery抓取36氪网站数据

    一.介绍 本例子用Selenium +phantomjs爬取36氪网站(http://36kr.com/search/articles/电视?page=1)的资讯信息,输入给定关键字抓取资讯信息. 给 ...

  7. linux下javadoc生成文件出现中文乱码

    javadoc命令的正确使用姿势 javadoc -d apidoc -windowtitle Testing -doctitle 'The API of javadoc' -header 'My c ...

  8. docker入门——安装及简单操作

    和安装其他软件一样,安装Docker也需要一些基本的前提条件.Docker要求的条件具体如下: 运行64位CPU构架的计算机(目前只能是x86_64和amd64),Docker目前不支持32位CPU. ...

  9. 入侵者已经拿到了主机的管理员权限,请你列举几种留后门的方法:(windows和LINUX系统均可)

    Webshell后门 XSS后门 远控后门&rootit(windows&LINUX) SSH后门 SHIFT终端服务器后门 系统用户账号克隆 SQL数据库扩展存储型后门 SQL数据库 ...

  10. 对帝国cms、dedecms、phpcms等负载测试总结

    来自:http://www.chinaz.com/web/2013/0729/311360.shtml 担心被骂,本不想写这篇文章.犹豫良久,最终还是决定写.希望能够帮助到一些朋友,认识到数据库索引正 ...