在学习过程中，可以参照JQuery EasyUI的官方网站学习。地址：http://www.jeasyui.com/demo/main/index.php
在学习JQuery EasyUI中的DataGrid标签时，可以参照http://www.jeasyui.com/documentation/datagrid.php进行学习。
本文主要讲解DataGrid标签的使用，怎么设置参数，怎么向后台请求数据等。
在使用过程中，我使用的是1.4版本，存在一个问题，当请求数据为0行时，会重新请求一次。
这一个问题，园中兄弟帮我解决了，地址是：http://www.cnblogs.com/Reaver/p/4056770.html，感谢flyreaver
一、在页面中添加标签
@*这是datagrid标签展示的地方，其中iconcls表示datagrid中左上角展示的图标*@
<table id="dg" iconcls="icon-edit">
</table>
@*如果需要弹出层，请参照下边的代码，并在js中做相应的设置*@
<div id="dlg" class="easyui-dialog" title="弹出框标题" style="width: 400px; height: 200px; padding: 10px"
data-options="
iconCls: 'icon-add',
buttons: [{
text:'确定',
iconCls:'icon-ok',
handler:function(){
//点击'确定'按钮触发的事件
UpdateData();
}
},{
text:'取消',
handler:function(){
alert('cancel');;
}
}]
">
<div class="aaa">
<span>主键id:</span><input type="text" />
</div>
</div>
二、在js中添加方法，如下所示：
<script type="text/javascript">
$(function () {
loadData();
}); function loadData() {
$('#dg').datagrid({
url: '/Financial/GetLoanDataInfo',//请求方法的地址
title: '信息管理',
width: 900,
height: 400,
fitColumns: true, //列自适应
nowrap: false,//禁止文字自动换行
idField: 'CID',//主键列的列明
loadMsg: '正在加载信息...',//当数据没有加载出来时显示的文字
pagination: true,//是否有分页
singleSelect: true,//是否单行选择
pagePosition: 'bottom',//分页符在底部,可选参数为top，bottom，both
pageSize: 15,//页大小，一页多少条数据
pageNumber: 1,//默认当前的页码
pageList: [15, 30, 50],//一页可显示数据的条目
queryParams: {},//往后台传递参数，json格式
columns: [[
//field表示绑定的字段名，如不绑定就随便写一个；
//checkbox: true表示这一列是checkbox
//hidden: true表示隐藏这一列
//sortable: true表示单击这一列可以排(升/降)序，这样请求数据时会向后台多传输两个参数
{ field: 'ck', checkbox: true, align: 'left', width: 50 },
{ field: 'CID', title: '1', width: 80, align: 'center', hidden: true },
{ field: 'CMoney', title: '2', width: 80, align: 'center', sortable: true },
{
field: 'CAge', title: '3', width: 80, align: 'center',
//这里表示对显示的信息做处理。value表示原本的值，在方法中对value进行逻辑判断并返回处理后的标签样式
formatter: function (value, row, index) {
//在该函数中，对文本大小判断，如果大于18，显示为红色的字
if (value > 18) {
return '<span style="color:red;">' + value + '</span>';
} else {
return value;
}
}
},
{
field: 'CTitle', title: '7', width: 80, align: 'center',
formatter: function (value, row, index) {
//在该函数中，把这一列变为一个a标签。设置class和自定义数据。为下边做准备
return "<a href='javascript:void(0);' data-id='" + row.CID + "' class='detailLink'>" + value + "</a>";
}
}
]],
//绑定数据成功后执行这个方法
onLoadSuccess: function () {
//先把弹出框关闭
$('#dlg').dialog('close');
//添加最后一列的单击事件
$('.detailLink').click(function () {
//获取自定义数据
var id = $(this).data('id');
//为弹出的层中的标签赋值
$('.aaa input').attr('value', id);
//弹出层
$('#dlg').dialog('open');
});
}
});
}
function UpdateData() {
//点击弹出层的确定按钮触发的事件——刷新datagrid
$('#dg').datagrid('reload');
};
</script>
三、后端得到datagrid传过去的参数，并返回数据
//在本系统中，datagrid请求的方法需要是Action类型的方法
public ActionResult GetLoanDataInfo()
{
int pageIndex;
int pageSize;
string sortName = string.Empty;
string order = string.Empty;
//page是datagrid内部实现的，传过来的参数名。表示第几页
if (!int.TryParse(Request.Form["page"], out pageIndex))
{
pageIndex = ;
}
//rows表示这一页显示多少条数据
if (!int.TryParse(Request.Form["rows"], out pageSize))
{
pageSize = ;
}
//sort表示根据那一列排序;order表示升序或者降序,有两个值：asc、desc
if (!string.IsNullOrEmpty(Request.Form["sort"]))
{
sortName = Request.Form["sort"];
order = Request.Form["order"];
}
//这一块是从后台请求数据,把上边的参数传进去（本例是模拟的，没有传参数进方法，应该在方法中同时把总数据的条目数out出来）
List<TLoan> list = _DataHelper.GetData();
int totalCount = list.Count();
list = list.Skip((pageIndex - ) * pageSize).Take(pageSize).ToList();
//把需要传给前台的数据，分拣出来，赋给rows,这样可以把不需要的数据过滤掉，如果不用过滤数据，可以省略下边一行代码
var rows = from l in list
select new { CID = l.CID, CMoney= l.CMoney, CAge= l.CAge, CTitle= l.CTitle };
31
//rows = rows, total = totalCount；等号之前的名字是不可变的，因为是easy ui规定的。
//JsonRequestBehavior.AllowGet表示该方法可以被get方式请求，否则get方式请求得不到数据
return Json(new { rows = rows, total = totalCount }, JsonRequestBehavior.AllowGet);
}