这里要说的显示界面是Razor页面。我们要使用easyui首先应该在界面中加入对应的引用，例如以下代码，这些都是必要的引用文件，能够依据自己所存放的路径来加入src地址。

  1. @*加入Jquery EasyUI的样式*@
  2. <linkhref="~/Content/JqueryEasyUI/themes/default/easyui.css"rel="stylesheet" />
  3. <linkhref="~/Content/JqueryEasyUI/themes/icon.css"rel="stylesheet" />
  4.  
  5. @*加入Jquery，EasyUI和easyUI的语言包的JS文件*@
  6. <scriptsrc="~/Content/JqueryEasyUI/jquery-1.8.0.min.js"></script>
  7. <scriptsrc="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script>
  8. <scriptsrc="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>

以下是实现对EasyUI的DataGird控件操作的JS代码

  1. @*实现对EasyUI的DataGird控件操作的JS代码*@
  2.     <scripttype="text/javascript">
  3.         //窗口控件载入完运行
  4.         $(function () {
  5.            $("#btnSearch").click(function () {
  6.                 var pars = { name:$("#txtName").val() };
  7.                 //有參数时运行此方法
  8.                 initTable(pars)
  9.             });
  10.             //无參数时运行此方法
  11.             initTable("");
  12.         });
  13.  
  14. //实现DataGird控件的绑定操作
  15.         function initTable(pars) {
  16.             $('#tableShowData').datagrid({   //定位到Table标签，Table标签的ID是tableShowData
  17.                 fitColumns: true,
  18.                 url:'/ExcellentDispatch/QueryInfo',  //指向后台的Action来获取当前用户的信息的Json格式的数据
  19.                 title: '卓越派遣信息查询',  //表格标题
  20.                 iconCls: 'icon-save',
  21.                 height: 500,
  22.                 nowrap: true,
  23.                 loadMsg: '正在载入用户的信息...',
  24.                 autoRowHeight: false,
  25.                 striped: true,
  26.                 collapsible: true,
  27.                 pagination: true,
  28.                 rownumbers: true,//加入列数字
  29.                 //sortName: 'ID',    //依据某个字段给easyUI排序
  30.                 //sortOrder: 'asc',
  31.                 remoteSort: false,
  32.                 idField: 'ID',//主键
  33.                 queryParams: pars,  //异步查询的參数
  34.                 pageList: [5, 10, 15, 20, 25,30],//分页的分组设置
  35.                 pageSize: 10,//每页的默认值大小
  36.                 columns: [[
  37.                     { title: '全选',checkbox:true},
  38.                 { field: 'companyName', title:'单位名称' },
  39.                 { field: 'ID', title: '档案编号' },
  40.                     { field: 'name', title:'姓名' },
  41.                     { field: 'sex', title: '性别'},
  42.                     { field: 'idNumber', title:'身份证号' },
  43.                     { field: 'receivemode',title: '接收方式' },
  44.                     { field: 'myidentity',title: '本人身份' },
  45.                     { field:'educationBackground', title: '学历' },
  46.                     { field: 'oldworkplace',title: '原工作单位' },
  47.                     { field: 'isrecord', title:'档案在否' }
  48.                 ]],
  49.                 //表头的button
  50.                 toolbar: [{
  51.                     id: 'btnCancle',
  52.                     text: '删除',
  53.                     iconCls: 'icon-cancel',
  54.                     handler: function () {
  55.                         //实现直接删除全部数据的方法
  56.                         Delete();
  57.                     }
  58.                 }, '-', {
  59.                     id: 'btnDetail',
  60.                     text: '具体',
  61.                     iconCls: 'icon-remove',
  62.                     handler: function () {
  63.                         //展示所选人员的具体信息方法
  64.                         Show();
  65.                     }
  66.                 }, '-', {
  67.                     id: 'btnEdit',
  68.                     text: '编辑',
  69.                     iconCls: 'icon-edit',
  70.                     handler: function () {
  71.                         //编辑所选人员的信息方法
  72.                         Update();
  73.                     }
  74.                 }, '-', {
  75.                     id: 'btnCheckout',
  76.                     text: '导出',
  77.                     iconCls: 'icon-undo',
  78.                     handler: function () {
  79.                         //实现改动的方法
  80.                         Checkout();
  81.                     }
  82.  
  83.                 }]
  84.             });
  85.         }

以下是我们easyui绑定的表格

  1. <body>
  2.     <div>
  3.         请输入姓名：<input type="text"id="txtName" />
  4.         <input type="button"id="btnSearch" value="查询" />
  5.         <table id="tableShowData"class="querytable"></table>
  6.     </div>
  7. </body>

Controller
代码

  1. public ActionResultQueryInfo()
  2.         {
  3.             try
  4.             {
  5.                 int pageIndex;
  6.                 int pageSize;
  7.                 //查询參数
  8.                 string name =Request["name"];
  9.                 if (name == null)
  10.                 {
  11.                     name = "";
  12.                 }
  13.                 //当前页码值
  14.                 if(!int.TryParse(Request["page"], out pageIndex))
  15.                 {
  16.                     pageIndex = 1;
  17.                 }
  18.                 //每页值大小
  19.                 if(!int.TryParse(Request["rows"], out pageSize))
  20.                 {
  21.                     pageSize = 5;
  22.                 }
  23.                 //总页数
  24.                 int totalCount;
  25.                 //分页查询查到的结果集
  26.                 var AllList =myExcellentDispatch.QueryInfo(pageSize, pageIndex, out totalCount,name).ToList();
  27.                 //rows必须给赋值，这是easyui前台显示须要的
  28.                 var rows = from c in AllList
  29.                            select new
  30.                            {
  31.                                ID = c.ID,
  32.                                companyName =c.companyName,
  33.                                name = c.name,
  34.                                sex = c.sex,
  35.                                idNumber =c.idNumber,
  36.                                myidentity =c.myidentity,
  37.                                receivemode =c.receivemode,
  38.                               educationBackground = c.educationBackground,
  39.                                oldworkplace =c.oldworkplace,
  40.                                isrecord =c.isrecord,
  41.                            };
  42.                //返回Json格式的字符串（必须有rows和total，名字要和easyui声明的变量一致）
  43.                 return Json(new { rows = rows,total = totalCount }, JsonRequestBehavior.AllowGet);
  44.             }
  45.             catch (Exception)
  46.             {
  47.                 throw;
  48.             }
  49.         }

须要说明的是mvc使用json格式的字符串不须要引用System.Web.Script.Serialization命名空间，这也是它非常便利的一点。mvc还有非常多方便快捷的地方。这也是mvc魅力所在吧！

以下看下效果图吧~

页面初始化

查询名字中包括“s”的记录

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

MVC+EasyUI实现查询显示到对应表格的更多相关文章

  1. Asp.Net MVC EasyUI DataGrid查询分页

    function doSearch() { //查询方法 var searchValue = $('#txtQueryTC001').textbox('getText'); $('#dgCMSTC') ...

  2. MVC+EasyUI 菜单导航的实现

    一个简单的使用mvc+easyUi 动态菜单显示 直接上代码 前端 function initMenu() { $.get("/Admin/Home/GetNav", functi ...

  3. 用easyui实现查询条件的后端传递并自动刷新表格的两种方法

    用easyui实现查询条件的后端传递并自动刷新表格的两种方法 搜索框如下: 通过datagrid的load方法直接传递参数并自动刷新表格 通过ajax的post函数传递参数并通过loadData方法将 ...

  4. 如何用easyui+JAVA 实现动态拼凑datagrid表格(续)

    前面一段时间写了一篇文章: 如何用easyui+JAVA 实现动态拼凑datagrid表格 这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的. 今天这篇文章就是向大家介绍下如何避免 ...

  5. asp.net mvc +easyui 实现权限管理（二）

    一写完后,好久没有继续写了.最近公司又在重新开发权限系统了,但是由于我人微言轻,无法阻止他们设计一个太监版的权限系统.想想确实是官大一级压死人啊, 没办法我只好不参与了 让他们去折腾. 我就大概说一下 ...

  6. 《ArcGIS Engine+C#实例开发教程》第八讲 属性数据表的查询显示

    原文:<ArcGIS Engine+C#实例开发教程>第八讲 属性数据表的查询显示 第一讲 桌面GIS应用程序框架的建立 第二讲 菜单的添加及其实现 第三讲 MapControl与Page ...

  7. MVC中，查询以异步呈现，分页不用异步的解决方案

    MVC中,查询以异步呈现,分页不用异步的解决方案 这种需求,用一个ASPX页面和一个ASCX分部视图就可以解决了,ASPX提供对ASCX的引用,ASCX显示列表信息,ASPX主页面提供查询功能 < ...

  8. hibernate+spring+mvc+Easyui框架模式下使用grid++report的总结

    最近刚开始接触hibernate+spring+mvc+Easyui框架,也是刚开通了博客,希望能记录一下自己实践出来的东西,让其他人少走弯路. 转让正题,以个人浅薄的认识hibernate对于开发人 ...

  9. EasyUi通过POI 实现导出xls表格功能

    Spring +EasyUi+Spring Jpa(持久层) EasyUi通过POI 实现导出xls表格功能 EasyUi界面: 点击导出按钮实现数据导入到xls表格中 第一步:修改按钮事件: @Co ...

随机推荐

  1. 用css画三角形

    当我们给某个图片做一个弹出层的时候,假设要让我们的弹出层显示一个小箭头,能够用css来画 用div来演示 div{ border:12px solid; berder-color:transparen ...

  2. 刘汝佳 算法竞赛-入门经典 第二部分 算法篇 第六章 2（Binary Trees）

    112 - Tree Summing 题目大意:给出一个数,再给一颗树,每个头节点的子树被包含在头节点之后的括号里,寻找是否有从头节点到叶子的和与给出的数相等,如果有则输出yes,没有输出no! 解题 ...

  3. 深入理解Android（2）——理解Android中的JNI（中）

    阳光小强参加了CSDN博客之星评选,如果你觉得阳光小强的博客对你有所帮助,为小强投上一票吧:http://vote.blog.csdn.net/blogstar2014/details?usernam ...

  4. OpenCV —— 图像变换

    将一副图像转变成另一种表现形式 ,比如,傅里叶变换将图像转换成频谱分量 卷积 —— 变换的基础 cvFilter2D  源图像 src 和目标图像 dst 大小应该相同 注意:卷积核的系数应该是浮点类 ...

  5. 003 python 注释/数据类型/运算符/输入输出/格式化输出

    集成开发环境 pycharm 工欲善其事,必先利其器 pycharm是具备一般的python ide的功能,同时呢支持调试,语法高亮,代码管理,智能提示 加快快发的速度,提高开发效率 注释 what ...

  6. 【Educational Codeforces Round 36 B】Browser

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 分类在区间里面和左边.右边三种情况. 看看l的左边有没有标签.r的右边有没有标签. 就能做完了. [代码] #include < ...

  7. IntelliJ IDEA如何导入maven结构的web工程

    第一步:打开一个现有(也可以不打开,直接用import选择Maven类型)的IntelliJ IDEA工程,点击菜单的"File"->"new"-> ...

  8. Javascript：存储和读取cookie

    Cookie是网页开发中的一项重要技术,用于在本地存储一些信息(如username,password.登录状态)以便用户下一次訪问时使用(或在其他页面使用). cookie的格式是键值对,多个键值对之 ...

  9. Oracle442个应用场景-----------Oracle数据库物理结构

    -------------------------Oracle数据库物理结构------------------------------- Oracle数据库物理结构     oracle的数据,实际 ...

  10. js28--适配器模式

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...