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 ...
随机推荐
- POJ 1014 Dividing 背包
二进制优化,事实上是物体的分解问题. 就是比方一个物体有数量限制,比方是13,那么就须要把这个物体分解为1. 2, 4, 6 假设这个物体有数量为25,那么就分解为1, 2, 4. 8. 10 看出规 ...
- Qt源码编译
Qt源码编译 eryar@163.com Key words. Qt, 源码编译 1.Introduction 随着Qt版本升级,源码编译出来的库体积越来越大.如果只是用Qt来做GUI,Qt提供的预编 ...
- 76.Nodejs Express目录结构
转自:https://blog.csdn.net/xiaoxiaoqiye/article/details/51160262 Express是一个基于Node.js平台的极简.灵活的web应用开发框架 ...
- 洛谷P1722 矩阵 II
题目背景 usqwedf 改编系列题. 题目描述 如果你在百忙之中抽空看题,请自动跳到第六行. 众所周知,在中国古代算筹中,红为正,黑为负…… 给定一个1*(2n)的矩阵(usqwedf:这不是一个2 ...
- 数据库事务及其EF中如何处理事务
一.基础知识 1) 使用事务级别ReadUnCommited 会产生脏读现像,意味着读取到的为UnCommited(未提交)的数据.怎么理解呢?在使用该隔离级别的事务开始后.更新了数据 ...
- 微信小程序从零开始开发步骤（六）4种页面跳转的方法
用法:用于页面跳转,相当于html里面的<a></a>标签. API教程:https://mp.weixin.qq.com/debug/wxadoc/dev/component ...
- C#引用c++DLL结构体数组注意事项（数据发送与接收时）
本文转载自:http://blog.csdn.net/lhs198541/article/details/7593045 最近做的项目,需要在C# 中调用C++ 写的DLL,因为C# 默认的编码方式是 ...
- NSCharacterSet 最经常使用的使用方法
NSString *str = @"<p>讨厌的</p>节点<br/></pN>"; //除去字符串中的不想要的 ...
- 利用淘宝ip库限制地区访问
https://sss.one/97.html 利用淘宝ip库限制地区访问 有些应用可能需要对某些地区的用户进行限制访问 在采用才此方法的时候,可以利用一些ip库对访问者的ip进行判断 淘宝ip库地址 ...
- <meta-data>的使用
在AndroidManifest.xml中,<meta-data>元素可以作为子元素,被包含在<activity>.<application> .<servi ...