这里要说的显示界面是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”的记录

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. 百度地图ios环境配置

    1 前言 由于工作需要,要开始捣腾百度地图了,今天上午初始牛刀,各种碰壁,无奈之下,中午睡了一觉,养精蓄锐,以备下午大战三百回合,所幸下午中午把百度地图Demo捣腾出来了,在此与大家分享,环境搭建教程 ...

  2. UML图和C#

        这段时间学习了楚光明老师解说的C#视频,接触这个学习材料的第一感觉就是老师解说的通俗易懂,非常easy让人去接受:再有就是在学习到UML图和C#的一节时非常有收获,之前自己也学习过UML图的一 ...

  3. Activity中recreate方法的应用

    參考两篇文章:http://blog.csdn.net/watermusicyes/article/details/47392949     http://blog.csdn.net/droyon/a ...

  4. spring源码分析之@Conditional

    根源在AnnotationConfigApplicationContext和AnnotationConfigWebApplicationContext,以AnnotationConfigApplica ...

  5. windows下go语言环境

    1  liteIDE ,随便装哪儿都行 2  GO语言包 安装  ,我安装到了 c:\go  (顺便给个地址下载地址  https://golang.org/dl/  ) 3  GCC编译器 安装,同 ...

  6. OpenCV —— 矩阵和图像操作

    cvAbs , cvAbsDiff , cvAbsDiffS cvAdd , cvAddS , cvAddWeighted(可添加权重) #include <cv.h> #include ...

  7. python 中文文档地址总结

    sqlalchemy: https://www.imooc.com/article/details/id/22343

  8. Android中级第九讲--相机调焦

    博客出自:http://blog.csdn.net/liuxian13183,转载注明出处! All Rights Reserved ! 相机调焦:原理,使用竖直seekbar,根据用户拖拉来获得距离 ...

  9. pat(A) 2-06. 数列求和（模拟摆竖式相加）

    1.链接:http://www.patest.cn/contests/ds/2-06 2.思路:模拟摆竖式相加,因为同样位置上的数字同样,那么同一位上的加法就能够用乘法来表示 3.代码: #inclu ...

  10. Android学习笔记进阶九之Matrix对称变换

    网上很多的倒影特效实际上就是一个对称变换,在改变透明度即可. Matrix对称变换包括很多种,有关于Y轴对称,关于X轴对称,关于y= -x对称等等. 1 关于Y轴对称 // 获取资源文件的引用res ...