这里要说的显示界面是Razor页面。我们要使用easyui首先应该在界面中加入对应的引用，例如以下代码，这些都是必要的引用文件，能够依据自己所存放的路径来加入src地址。
@*加入Jquery EasyUI的样式*@ <linkhref="~/Content/JqueryEasyUI/themes/default/easyui.css"rel="stylesheet" /> <linkhref="~/Content/JqueryEasyUI/themes/icon.css"rel="stylesheet" /> @*加入Jquery，EasyUI和easyUI的语言包的JS文件*@ <scriptsrc="~/Content/JqueryEasyUI/jquery-1.8.0.min.js"></script> <scriptsrc="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script> <scriptsrc="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>
以下是实现对EasyUI的DataGird控件操作的JS代码
@*实现对EasyUI的DataGird控件操作的JS代码*@
<scripttype="text/javascript">
//窗口控件载入完运行
$(function () {
$("#btnSearch").click(function () {
var pars = { name:$("#txtName").val() };
//有參数时运行此方法
initTable(pars)
});
//无參数时运行此方法
initTable("");
});
//实现DataGird控件的绑定操作
function initTable(pars) {
$('#tableShowData').datagrid({ //定位到Table标签，Table标签的ID是tableShowData
fitColumns: true,
url:'/ExcellentDispatch/QueryInfo', //指向后台的Action来获取当前用户的信息的Json格式的数据
title: '卓越派遣信息查询', //表格标题
iconCls: 'icon-save',
height: 500,
nowrap: true,
loadMsg: '正在载入用户的信息...',
autoRowHeight: false,
striped: true,
collapsible: true,
pagination: true,
rownumbers: true,//加入列数字
//sortName: 'ID', //依据某个字段给easyUI排序
//sortOrder: 'asc',
remoteSort: false,
idField: 'ID',//主键
queryParams: pars, //异步查询的參数
pageList: [5, 10, 15, 20, 25,30],//分页的分组设置
pageSize: 10,//每页的默认值大小
columns: [[
{ title: '全选',checkbox:true},
{ field: 'companyName', title:'单位名称' },
{ field: 'ID', title: '档案编号' },
{ field: 'name', title:'姓名' },
{ field: 'sex', title: '性别'},
{ field: 'idNumber', title:'身份证号' },
{ field: 'receivemode',title: '接收方式' },
{ field: 'myidentity',title: '本人身份' },
{ field:'educationBackground', title: '学历' },
{ field: 'oldworkplace',title: '原工作单位' },
{ field: 'isrecord', title:'档案在否' }
]],
//表头的button
toolbar: [{
id: 'btnCancle',
text: '删除',
iconCls: 'icon-cancel',
handler: function () {
//实现直接删除全部数据的方法
Delete();
}
}, '-', {
id: 'btnDetail',
text: '具体',
iconCls: 'icon-remove',
handler: function () {
//展示所选人员的具体信息方法
Show();
}
}, '-', {
id: 'btnEdit',
text: '编辑',
iconCls: 'icon-edit',
handler: function () {
//编辑所选人员的信息方法
Update();
}
}, '-', {
id: 'btnCheckout',
text: '导出',
iconCls: 'icon-undo',
handler: function () {
//实现改动的方法
Checkout();
}
}]
});
}以下是我们easyui绑定的表格
<body>
<div>
请输入姓名：<input type="text"id="txtName" />
<input type="button"id="btnSearch" value="查询" />
<table id="tableShowData"class="querytable"></table>
</div>
</body>Controller 代码
public ActionResultQueryInfo()
{
try
{
int pageIndex;
int pageSize;
//查询參数
string name =Request["name"];
if (name == null)
{
name = "";
}
//当前页码值
if(!int.TryParse(Request["page"], out pageIndex))
{
pageIndex = 1;
}
//每页值大小
if(!int.TryParse(Request["rows"], out pageSize))
{
pageSize = 5;
}
//总页数
int totalCount;
//分页查询查到的结果集
var AllList =myExcellentDispatch.QueryInfo(pageSize, pageIndex, out totalCount,name).ToList();
//rows必须给赋值，这是easyui前台显示须要的
var rows = from c in AllList
select new
{
ID = c.ID,
companyName =c.companyName,
name = c.name,
sex = c.sex,
idNumber =c.idNumber,
myidentity =c.myidentity,
receivemode =c.receivemode,
educationBackground = c.educationBackground,
oldworkplace =c.oldworkplace,
isrecord =c.isrecord,
};
//返回Json格式的字符串（必须有rows和total，名字要和easyui声明的变量一致）
return Json(new { rows = rows,total = totalCount }, JsonRequestBehavior.AllowGet);
}
catch (Exception)
{
throw;
}
}须要说明的是mvc使用json格式的字符串不须要引用System.Web.Script.Serialization命名空间，这也是它非常便利的一点。mvc还有非常多方便快捷的地方。这也是mvc魅力所在吧！
以下看下效果图吧~
页面初始化
查询名字中包括“s”的记录
