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

※datagrid的基本属性和方法

※datagrid分页在前后台的实现

最终效果：

与视图显示对应的viewmodel

publicclassBook

publicstringItemId{get;set;}

publicstringProductId{get;set;}

publicdecimalListPrice{get;set;}

publicdecimalUnitCost{get;set;}

publicstringAttr1{get;set;}

publicInt16Status{get;set;}

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

□与分页有关的类

publicclassPageParam

publicintPageSize{get;set;}

publicintPageIndex{get;set;}

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

□分页服务层方法

usingSystem.Linq;

usingDataGridInMvc.Models;

usingSystem.Collections.Generic;

usingMicrosoft.Ajax.Utilities;

namespaceDataGridInMvc.Helper

{

publicclassBookService

{

publicIEnumerable<Book>LoadPageBookData(PageParamparam,outinttotal)

{

//创建Book的集合

varbooks=newList<Book>();

for(inti=0;i<30;i++)

{

books.Add(newBook()

{

ItemId="EST-"+i,

ProductId="AV-SB-"+i,

ListPrice=(i+5)*10m,

UnitCost=(i+2)*10m,

Attr1="Attr"+i,

Status=(short)0

});

}

total=books.Count();

varresult=books.OrderBy(b=>b.ItemId)

.Skip(param.PageSize*(param.PageIndex-1))

.Take(param.PageSize);

returnresult;

}

}

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

usingSystem.Collections.Generic;

usingSystem.Linq;

usingSystem.Security.Cryptography;

usingSystem.Web;

usingSystem.Web.Mvc;

usingDataGridInMvc.Helper;

usingDataGridInMvc.Models;

namespaceDataGridInMvc.Controllers

{

publicclassHomeController:Controller

{

publicActionResultIndex()
{
returnView();

}

publicActionResultGetData()

{

//接收datagrid传来的参数

intpageIndex=int.Parse(Request["page"]);

intpageSize=int.Parse(Request["rows"]);

//构建得到分页数据方法所需的参数

vartemp=newPageParam()

{

PageIndex=pageIndex,

PageSize=pageSize

};

//分页数据方法的输出参数

inttotalNum=0;

varservice=newBookService();

varbooks=service.LoadPageBookData(temp,outtotalNum);

varresult=frombookinbooks

selectnew{book.ItemId,book.ProductId,book.ListPrice,book.UnitCost,book.Status,book.Attr1};

//total,rows是前台datagrid所需要的

varjsonResult=new{total=totalNum,rows=result};

//把json对象序列化成字符串

stringstr=JsonSerializeHelper.SerializeToJson(jsonResult);

returnContent(str);

}

}

}

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

usingSystem;
usingNewtonsoft.Json;

namespaceDataGridInMvc.Helper
{
publicstaticclassJsonSerializeHelper
{
///<summary>
///把object对象序列化成json字符串
///</summary>
///<paramname="obj">序列话的实例</param>
///<returns>序列化json字符串</returns>
publicstaticstringSerializeToJson(objectobj)
{
returnJsonConvert.SerializeObject(obj);
}

///<summary>
///把json字符串反序列化成Object对象
///</summary>
///<paramname="json">json字符串</param>
///<returns>对象实例</returns>
publicstaticObjectDeserializeFromJson(stringjson)
{
returnJsonConvert.DeserializeObject(json);
}

///<summary>
///把json字符串反序列化成泛型T
///</summary>
///<typeparamname="T">泛型</typeparam>
///<paramname="json">json字符串</param>
///<returns>泛型T</returns>
publicstaticTDeserializeFromJson<T>(stringjson)
{
returnJsonConvert.DeserializeObject<T>(json);
}
}
}

视图

<linkhref="~/Content/themes/default/easyui.css"rel="stylesheet"/><linkhref="~/Content/themes/icon.css"rel="stylesheet"/><scriptsrc="~/Scripts/jquery-1.10.2.js"></script><scriptsrc="~/Scripts/jquery.easyui.min.js"></script><scriptsrc="~/Scripts/easyui-lang-zh_CN.js"></script><scripttype="text/javascript">$(function(){initData();});functioninitData(){$('#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:'状态'},]]});}functionchangeP(){vardg=$('#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>选择分页显示位置：<selectid="p-pos"onchange="changeP()"><option>bottom</option><option>top</option><option>both</option></select>选择分页显示样式<selectid="p-style"onchange="changeP()"><option>manual</option><option>links</option></select></p><tableid="tt"></table>
※datagrid的基本属性和方法

※datagrid分页在前后台的实现

最终效果：

与视图显示对应的viewmodel

publicclassBook

publicstringItemId{get;set;}

publicstringProductId{get;set;}

publicdecimalListPrice{get;set;}

publicdecimalUnitCost{get;set;}

publicstringAttr1{get;set;}

publicInt16Status{get;set;}

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

□与分页有关的类

publicclassPageParam

publicintPageSize{get;set;}

publicintPageIndex{get;set;}

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

□分页服务层方法

usingSystem.Linq;

usingDataGridInMvc.Models;

usingSystem.Collections.Generic;

usingMicrosoft.Ajax.Utilities;

namespaceDataGridInMvc.Helper

{

publicclassBookService

{

publicIEnumerable<Book>LoadPageBookData(PageParamparam,outinttotal)

{

//创建Book的集合

varbooks=newList<Book>();

for(inti=0;i<30;i++)

{

books.Add(newBook()

{

ItemId="EST-"+i,

ProductId="AV-SB-"+i,

ListPrice=(i+5)*10m,

UnitCost=(i+2)*10m,

Attr1="Attr"+i,

Status=(short)0

});

}

total=books.Count();

varresult=books.OrderBy(b=>b.ItemId)

.Skip(param.PageSize*(param.PageIndex-1))

.Take(param.PageSize);

returnresult;

}

}

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

usingSystem.Collections.Generic;

usingSystem.Linq;

usingSystem.Security.Cryptography;

usingSystem.Web;

usingSystem.Web.Mvc;

usingDataGridInMvc.Helper;

usingDataGridInMvc.Models;

namespaceDataGridInMvc.Controllers

{

publicclassHomeController:Controller

{

publicActionResultIndex()
{
returnView();

}

publicActionResultGetData()

{

//接收datagrid传来的参数

intpageIndex=int.Parse(Request["page"]);

intpageSize=int.Parse(Request["rows"]);

//构建得到分页数据方法所需的参数

vartemp=newPageParam()

{

PageIndex=pageIndex,

PageSize=pageSize

};

//分页数据方法的输出参数

inttotalNum=0;

varservice=newBookService();

varbooks=service.LoadPageBookData(temp,outtotalNum);

varresult=frombookinbooks

selectnew{book.ItemId,book.ProductId,book.ListPrice,book.UnitCost,book.Status,book.Attr1};

//total,rows是前台datagrid所需要的

varjsonResult=new{total=totalNum,rows=result};

//把json对象序列化成字符串

stringstr=JsonSerializeHelper.SerializeToJson(jsonResult);

returnContent(str);

}

}

}

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

usingSystem;
usingNewtonsoft.Json;

namespaceDataGridInMvc.Helper
{
publicstaticclassJsonSerializeHelper
{
///<summary>
///把object对象序列化成json字符串
///</summary>
///<paramname="obj">序列话的实例</param>
///<returns>序列化json字符串</returns>
publicstaticstringSerializeToJson(objectobj)
{
returnJsonConvert.SerializeObject(obj);
}

///<summary>
///把json字符串反序列化成Object对象
///</summary>
///<paramname="json">json字符串</param>
///<returns>对象实例</returns>
publicstaticObjectDeserializeFromJson(stringjson)
{
returnJsonConvert.DeserializeObject(json);
}

///<summary>
///把json字符串反序列化成泛型T
///</summary>
///<typeparamname="T">泛型</typeparam>
///<paramname="json">json字符串</param>
///<returns>泛型T</returns>
publicstaticTDeserializeFromJson<T>(stringjson)
{
returnJsonConvert.DeserializeObject<T>(json);
}
}
}

视图

<linkhref="~/Content/themes/default/easyui.css"rel="stylesheet"/><linkhref="~/Content/themes/icon.css"rel="stylesheet"/><scriptsrc="~/Scripts/jquery-1.10.2.js"></script><scriptsrc="~/Scripts/jquery.easyui.min.js"></script><scriptsrc="~/Scripts/easyui-lang-zh_CN.js"></script><scripttype="text/javascript">$(function(){initData();});functioninitData(){$('#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:'状态'},]]});}functionchangeP(){vardg=$('#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>选择分页显示位置：<selectid="p-pos"onchange="changeP()"><option>bottom</option><option>top</option><option>both</option></select>选择分页显示样式<selectid="p-style"onchange="changeP()"><option>manual</option><option>links</option></select></p><tableid="tt"></table>