这里要说的显示界面是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. 矩阵乘法2（codevs3147）

    题目描写叙述 Description 给出两个n*n的矩阵.m次询问它们的积中给定子矩阵的数值和. 输入描写叙述 Input Description 第一行两个正整数n,m. 接下来n行,每行n个非负 ...

  2. 《从0到1》读书笔记第2章&quot;像1999 年那样狂欢&quot;第1记:小结及词汇解析

    小结 本章的目的应该是通过90年代末的互联网泡沫的背景,成因.影响,以及教训来教诫人们,在全部人都疯狂的抛身于洪流热潮之中时,我们要冷静的思考辨识出那些不切实际的大众观点,找到隐藏在这些观点后面的反主 ...

  3. 创建maven项目pom.xml出现错误（依赖Missing）

    Maven的依赖问题 在聚合模块时候,发现在父工程目录中的依赖存在一些问题.一开始是${pagehelper.version},后来将版本直接填写相应的版本如图下 依赖添加失败 * 在父工程的jar包 ...

  4. jquery中最常用的API有哪些

    jquery中最常用的API有哪些 一.总结 一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法 1.jQuery Object Access ...

  5. 高阶函数sort

    排序中我们经常会用sort这个高阶函数,我们今天就来讲讲这个sort的比较机制,对于数字来说我们只需要比较他们的大小就可以了 但是 var arr =[15,81,9,4,3]; alert(arr. ...

  6. 安装Domino分区服务器

    主要是修改修改notes.ini文件 •所有分区服务器使用同一个 IP 地址     指定不同端口 ,端口映射服务器使用端口号1352.建议对其他分区服务器使用端口号 1352以后的TCPIP_Tcp ...

  7. svg(1) path路径

    注: 笔记来自于http://www.jb51.net/html5/72250.html  以及http://blog.csdn.net/u013291076/article/details/2707 ...

  8. eclipse工作空间配置导出

    由于工作与学习的需求,需要使用不同的工作空间.而eclipse的新建工作空间其他以前的配置都没有继承过来,那么就得重新配置一遍. 经过学习其他前辈们的经验与自己的摸索总结一下3种方法: 方法一:使用e ...

  9. PHP foreach遍历数组之如何判断当前值已经是数组的最后一个

    先给出foreach的两种语法格式 1,foreach (array_expression as $value) statement 2,foreach (array_expression as $k ...

  10. C# WPF开源控件库MaterialDesign介绍

    介绍 1.由于前端时间萌发开发一个基础架构得WPF框架得想法, 然后考虑到一些界面层元素统一, 然后就无意间在GitHub上发现一个开源WPF UI, 于是下载下来了感觉不错. 官网地址:http:/ ...