MVC+EasyUI实现查询显示到对应表格
这里要说的显示界面是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实现查询显示到对应表格的更多相关文章
- Asp.Net MVC EasyUI DataGrid查询分页
function doSearch() { //查询方法 var searchValue = $('#txtQueryTC001').textbox('getText'); $('#dgCMSTC') ...
- MVC+EasyUI 菜单导航的实现
一个简单的使用mvc+easyUi 动态菜单显示 直接上代码 前端 function initMenu() { $.get("/Admin/Home/GetNav", functi ...
- 用easyui实现查询条件的后端传递并自动刷新表格的两种方法
用easyui实现查询条件的后端传递并自动刷新表格的两种方法 搜索框如下: 通过datagrid的load方法直接传递参数并自动刷新表格 通过ajax的post函数传递参数并通过loadData方法将 ...
- 如何用easyui+JAVA 实现动态拼凑datagrid表格(续)
前面一段时间写了一篇文章: 如何用easyui+JAVA 实现动态拼凑datagrid表格 这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的. 今天这篇文章就是向大家介绍下如何避免 ...
- asp.net mvc +easyui 实现权限管理（二）
一写完后,好久没有继续写了.最近公司又在重新开发权限系统了,但是由于我人微言轻,无法阻止他们设计一个太监版的权限系统.想想确实是官大一级压死人啊, 没办法我只好不参与了 让他们去折腾. 我就大概说一下 ...
- 《ArcGIS Engine+C#实例开发教程》第八讲 属性数据表的查询显示
原文:<ArcGIS Engine+C#实例开发教程>第八讲 属性数据表的查询显示 第一讲 桌面GIS应用程序框架的建立 第二讲 菜单的添加及其实现 第三讲 MapControl与Page ...
- MVC中，查询以异步呈现，分页不用异步的解决方案
MVC中,查询以异步呈现,分页不用异步的解决方案 这种需求,用一个ASPX页面和一个ASCX分部视图就可以解决了,ASPX提供对ASCX的引用,ASCX显示列表信息,ASPX主页面提供查询功能 < ...
- hibernate+spring+mvc+Easyui框架模式下使用grid++report的总结
最近刚开始接触hibernate+spring+mvc+Easyui框架,也是刚开通了博客,希望能记录一下自己实践出来的东西,让其他人少走弯路. 转让正题,以个人浅薄的认识hibernate对于开发人 ...
- EasyUi通过POI 实现导出xls表格功能
Spring +EasyUi+Spring Jpa(持久层) EasyUi通过POI 实现导出xls表格功能 EasyUi界面: 点击导出按钮实现数据导入到xls表格中 第一步:修改按钮事件: @Co ...
随机推荐
- 从头认识Spring-2.4 基于java的标准注解装配-@Inject（2）-通过set方法或者其它方法注入
这一章节我们来讨论一下基于java的标准注解装配标签@Inject是如何通过通过set方法或者其它方法注入? 在使用@Inject标签之前.我们须要在pom文件中面增加以下的代码: <depen ...
- region实现大纲效果
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- VS中创建自定义一个VC工程为基础的开发向导的总结
作者:朱金灿 来源:http://blog.csdn.net/clever101 VS允许用户进行自定义开发向导.自定义开发向导的好处在于将常用的设置都通过向导生成,从而大大提供开发效率.特别是在开发 ...
- C/C++(结构体)
结构体(struct) 从某种意义上说,会不会使用struct,如何使用struct是区别一个开发人员是否具备丰富开发经验的试金石. 处理由不同类型成员构成的构造类型,要采用结构体的方式. 定义:关键 ...
- spring之AOP（转）
Spring之AOP篇: AOP框架是Spring的一个重要组成部分.但是Spring IOC 并不依赖于AOP,这就意味着你有权力选择是否使用AOP,AOP作为Spring IOC容器的一个补充,使 ...
- worktools-不同分辨率下图片移植
1.下载需要移植的平台代码 1)查看手机需要的项目平台信息:adb shell getprop | gerp flavor ----->mt6732_m561_p2_kangjia_cc ...
- [51Nod]NOIP2018提高组省一冲奖班模测训练（四）翻车记+题解
链接 下午5点的时候,突然想起来有这个比赛,看看还有一个小时,打算来AK一下,结果因为最近智商越来越低,翻车了,我还是太菜了.上来10分钟先切掉了C和A,结果卡在了B题,唉. A.砍树 一眼题,两遍树 ...
- SQL中实现千分位的语句
传递一个sql的小知识,现成的语句,在工作流的表单域中很实用. 数字或字符串转成千分位 ) 字符串转换成数值 )
- Fedora 13 Alpha测试手记横空出世
本文转载在:http://www.linux521.com/2009/system/201004/10719.html 本文是继<Fedora 11-Alpha试用手记>文章(http ...
- POJ 1082 Calendar Game
Adam and Eve enter this year's ACM International Collegiate Programming Contest. Last night, they pl ...