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 : 征服数据库（一）
严格的说.这里征服的是关系型数据库.之后笔者会以MongoDB为例,给出非关系型数据库的解决方式,敬请期待. 获取连接,操作,关闭,不知所云的异常...是的,你受够了.在使用纯JDBC时你訪问数据库时 ...
- U盘版Windows 10已经在亚马逊Amazon開始接受预订啦
Windows 10定于下周7月29日正式公布. Windows 10家庭版119美元.专业版199美元,这个价格包含 Windows 10 授权.
- DB2物化视图(Materialized Query Tables, MQT)
DB2的物化视图MQT是基于查询结果定义的一个表,MQT中包括的数据来自MQT定义所基于的一个或多个表, 使用MQT能够显著提高查询的操作性能. 数据库的视图和MQT都是基于一个查询来定义的.每当视图 ...
- json和XML
发请求(url) 1.client ---------------->服务端 发送数据(Json/xml) < - ...
- sparksql不支持hive中的分区名称大写
但是在hive中查询是可以的. 后来经过一点一点测试发现,原来分区名称不能是大写,必须小写才行.
- jQuery插件--根据数据加载的进度动画案例
css: *{ margin:; padding:; } @media screen and (min-width:320px){ html{font-size:12px;}} @media scre ...
- JavaScript--数据结构与算法之散列
散列:实现散列表的数据后可以快速地实现插入或者删除.但是对于实现查找操作则效率非常的低.散列表的底层是数组实现的,长度是预先设定,可以随时根据需求增加.所有的元素根据和该元素对应的键,保存在特定的位置 ...
- WPF MVVM架构 EF、WCF、IOC 设计示例经典
概要 该演示项目利用WPF应用程序构建的MVVM架构示例, 运用了Unity容器接口注入, MVVM的经典设计, 后台利用的EF+WCF. 后台实现: 从数据库生成的emdx 结合上下文进行数据交互, ...
- 74LS153 选择器 【数字电路】
74LS153 我用了八个不同频率的方波信号,用153当作信号选择器,控制环节的开关是4通道的选择器,00 01 10 11分别选择通道 0 1 2 3 以下是八选一的demo
- 如何在实际项目中使用Promise（入门级）
你们有没有遇到过这样的情况,ES6看过了,Promise的文字概念都懂,但是我要怎么在项目中去写一个Promise呢? 那天我就是带着这样的疑问去网上搜了下.最后成功地在项目中应用了Promise,只 ...