这里要说的显示界面是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:'档案在否' } ]], //表头的按钮 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”的记录
版权声明：本文为博主原创文章，未经博主允许不得转载。