这里要说的显示界面是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. IIS7下设置AD单点登录

    简介:IIS7下设置AD单点登录 1.选中网站,双击“身份验证”: 2.启用“Window身份验证”.禁用“匿名身份验证”.启用“基本身份验证”: 3.在“基本身份验证”上面点右键,选择“编辑”,输入 ...

  2. Day1下午解题报告

    预计分数:0+30+30=60 实际分数:0+30+40=70 T1水题(water) 贪心,按长度排序, 对于第一幅牌里面的,在第二个里面,找一个长度小于,高度最接近的牌 进行覆盖. 考场上的我离正 ...

  3. 如何优雅的写UI——（5）选项卡功能实现

    先在我们的选项卡可以说能用了,每个标签页都能点进去,但是这还远远没到能用的地步,比如说你把窗口最大化后. 立马就露出马脚了,所以这篇我们要先讲讲tabctrl的最基本的功能实现 改变选项卡大小 上图的 ...

  4. [置顶] Docker学习总结（3）——Docker实战之入门以及Dockerfile（三）

    应用镜像 csphere/wordpress:4.2 # cd docker-training/wordpress/ # ls -a . license.txt wp-config-sample.ph ...

  5. 使用Cygwin在Windows上体验Linux的快感

    前言 记得大学的时候就以前使用过Cygwin,可惜当时没有发现她的美,我相信如今大多数朋友可能会更加倾向于使用Git或者干脆直接使用虚拟机以及原生Unix. 只是对于刚进入Linux的世界新人来说,使 ...

  6. 从”茄子快传”看应用程序怎样获取手机已安装程序的apk文件

    "茄子快传"是联想开发的一款近距离文件共享软件.它通过wifi-direct(速度飞快,不须要联网)或者普通的网络(速度慢)在不同手机间传递文件. 不知为何.它就火了起来,火的也飞 ...

  7. TimePickerDialog -下划线颜色修改

    首先就是去framework下去找与之相关的theme属性 最开始的时候,直接找的是<item name="datePickerStyle">@style/Widget ...

  8. [NOI.AC#31]MST 计数类DP

    链接 注意到 \(n\) 只有40,爆搜一下发现40的整数拆分(相当于把 \(n\) 分成几个联通块)很少 因此可以枚举联通块状态来转移,这个状态直接用vector存起来,再用map映射,反正40也不 ...

  9. 21. Node.Js Buffer类（缓冲区）-（一）

    转自:https://blog.csdn.net/u011127019/article/details/52512242

  10. 如何修复和检测Windows系统漏洞

    本文为<如何给系统打补丁(知识篇)>一文实战文章.   本文出自 "李晨光原创技术博客" 博客,谢绝转载!