datagrid在MVC中的运用02-结合搜索
本文接着上一篇,来体验给datagrid加上搜索功能。主要涉及到:
※ 把一个div与datagrid相关起来
※ datagrid接收查询参数
※ 查询参数的封装
效果图:
查询参数封装
分页相关的是每个页面都能用到的,所以把分页相关的封装成基类。
与查询相关的,封装成继承基类的子类。
public class PageParam
{
public int PageSize { get; set; }
public int PageIndex { get; set; }
}
public class BookParam : PageParam
{
public string ItemId { get; set; }
public string ProductId { get; set; }
}
查询Book的服务类方法就要考虑分页和查询参数


展开using System.Linq;
using DataGridInMvc.Models;
using System.Collections.Generic;
using Microsoft.Ajax.Utilities; namespace DataGridInMvc.Helper
{
public class BookService
{
public IEnumerable<Book> LoadPageBookData(BookParam param, out int total)
{
//创建Book的集合
var books = new List<Book>();
for (int i = 0; i < 30; i++)
{
books.Add(new Book()
{
ItemId = "EST-" + i,
ProductId = "AV-SB-" + i,
ListPrice = (i + 5) * 10m,
UnitCost = (i + 2) * 10m,
Attr1 = "Attr" + i,
Status = (short)0
});
} //搜索逻辑
if (!string.IsNullOrEmpty(param.ItemId))
{
books = books.Where(b => b.ItemId.Contains(param.ItemId)).ToList();
} if (!string.IsNullOrEmpty(param.ProductId))
{
books = books.Where(b => b.ProductId.Contains(param.ProductId)).ToList();
} total = books.Count();
var result = books.OrderBy(b => b.ItemId)
.Skip(param.PageSize*(param.PageIndex - 1))
.Take(param.PageSize);
return result;
}
}
}
视图
datagrid的toolbar属性能把div与datagrid相关起来,并显示到datagrid的顶部。
dtagrid的queryParams属性能接受查询参数,传递给Controller.
点击查询按钮的时候,需要带上参数。


展开 <link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Content/themes/icon.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.easyui.min.js"></script>
<script src="~/Scripts/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
initData(); $('#btnQuery').click(function() {
initData(initQuery());
});
}); function initData(params) {
$('#tt').datagrid({
url: 'Home/GetData',
width: 500,
height: 350,
title: 'Book列表',
iconCls: 'icon-save',
fitColumns: true,
rownumbers: true, //是否加行号
pagination: true, //是否显式分页
pageSize: 15, //页容量,必须和pageList对应起来,否则会报错
pageNumber: 2, //默认显示第几页
pageList: [15, 30, 45],//分页中下拉选项的数值
columns: [[
//book.ItemId, book.ProductId, book.ListPrice, book.UnitCost, book.Status, book.Attr1
{ field: 'ItemId', title: '主键', sortable: true },
{ field: 'ProductId', title: '产品编号' },
{ field: 'Attr1', title: '属性' },
{ field: 'UnitCost', title: '成本价' },
{ field: 'ListPrice', title: '零售价' },
{ field: 'Status', title: '状态' }
]],
toolbar: '#tb',//搜索div
queryParams: params //搜索json });
} function changeP() {
var dg = $('#tt');
dg.datagrid('loadData', []); //重新加载数据
dg.datagrid({ pagePosition: $('#p-pos').val() }); //分页位置
dg.datagrid('getPager').pagination({ //分页样式、内容
layout: ['list', 'sep', 'first', 'prev', 'sep', $('#p-style').val(), 'sep', 'next', 'last', 'sep', 'refresh']
});
} //表单查询值组成json对象
function initQuery() {
var queryParams = {
ItemId: $('#itemid').val(),
ProductId: $('#productid').val()
};
return queryParams;
}
</script>
<p>
选择分页显示位置:
<select id="p-pos" onchange="changeP()">
<option>bottom</option>
<option>top</option>
<option>both</option>
</select>
选择分页显示样式
<select id="p-style" onchange="changeP()">
<option>manual</option>
<option>links</option>
</select>
</p> <table id="tt">
</table> <!--搜索开始-->
<div id="tb" style="padding:3px">
<span>主键:</span>
<input id="itemid" style="line-height:22px;border:1px solid #ccc">
<span>产品编号:</span>
<input id="productid" style="line-height:22px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" plain="false" id="btnQuery">搜索</a>
</div>
<!--搜索结束—>
Controller


展开using System.Web;
using System.Web.Mvc;
using DataGridInMvc.Helper;
using DataGridInMvc.Models; namespace DataGridInMvc.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
} //
public ActionResult GetData()
{
//接收datagrid传来的参数
int pageIndex = int.Parse(Request["page"]);
int pageSize = int.Parse(Request["rows"]); //接收搜索参数
string itemId = Request["ItemId"];
string productId = Request["ProductId"]; //构建得到分页数据方法所需的参数
var temp = new BookParam()
{
PageIndex = pageIndex,
PageSize = pageSize,
ItemId = itemId,
ProductId = productId
}; //分页数据方法的输出参数
int totalNum = 0; var service = new BookService();
var books = service.LoadPageBookData(temp, out totalNum); var result = from book in books
select new {book.ItemId, book.ProductId, book.ListPrice, book.UnitCost, book.Status, book.Attr1}; //total,rows是前台datagrid所需要的
var jsonResult = new {total = totalNum, rows = result}; //把json对象序列化成字符串
string str = JsonSerializeHelper.SerializeToJson(jsonResult);
return Content(str);
}
}
}
JsonSerializeHelper静态类在上一篇介绍过。
datagrid在MVC中的运用02-结合搜索的更多相关文章
- datagrid在MVC中的运用05-加入时间搜索条件,枚举填充下拉框
本文主要来体验在搜索区域增加更多的搜索条件,主要包括: ※ 使用jQuery ui的datepicker显示时间,设置显示格式.样式. ※ 设置jQuery ui的onClose事件,使开始和结束时间 ...
- datagrid在MVC中的运用01-基本属性并实现分页
本文体验jQuery EasyUI的datagrid在MVC中的应用.主要涉及到: ※ datagrid的基本属性和方法 ※ datagrid分页在前后台的实现 最终效果: 与视图显示对应的view ...
- datagrid在MVC中的运用07-实现Master-Detail(使用PartialView)
本文主要体验用jQuery Easyui的datagrid来实现Master-Detail主次表.谢谢Kevin的博文,助我打开了思路. 主表显示所有的Category,当点击主表的展开按钮,显示该C ...
- jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页
※ datagrid的基本属性和方法 ※ datagrid分页在前后台的实现 最终效果: 与视图显示对应的view model public class Book public strin ...
- datagrid在MVC中的运用10-勾选
本文体验与勾选有关的特性. 需要加载的books.json 展开{ "total": 4, "rows": [ { "productid": ...
- datagrid在MVC中的运用09-实现排序
本文体验datagrid的排序. □ 思路 当点击datagrid的标题,视图传递给Controller的Form Data类似这样:page=1&rows=10&sort=Custo ...
- datagrid在MVC中的运用06-固定连续列
本文主要体验datagrid的frozenColumns属性. □ frozenColumns效果: 在frozenColumns的列将保持不动,而其他列横向滚动. □ frozenColumns效果 ...
- datagrid在MVC中的运用08-实现Master-Detail(使用子datagrid)
本文主要通过一个子datagrid来实现主次表.谢谢Kevin的博文. 代码部分与http://www.cnblogs.com/darrenji/p/3576258.html相似,这里只列出不一样的地 ...
- datagrid在MVC中的运用04-同时添加搜索和操作区域
本文介绍在datagrid上同时添加搜索和操作区域. 仅仅是增加操作区域 □ 方法1 $('#dg').datagrid({ toolbar: '#tb' }); <div id="t ...
随机推荐
- 如何阻止点击scrollviewer里面的单位内容时,自动滚动
<Style TargetType="{x:Type ListBoxItem}"> <Setter Property="FocusVisualStyle ...
- AdvStringGrid 复选框、goRowSelect
var I: Integer; begin do begin AdvStringGrid1.AddCheckBox(, I, True, True); AdvStringGrid1.Cells[,I] ...
- Centos之常见目录作用介绍
我们先切换到系统根目录 / 看看根目录下有哪些目录 [root@localhost ~]# cd / [root@localhost /]# ls bin dev home lib64 mn ...
- Icon.png pngcrush caught libpng error:Read
[问题处理]Icon.png pngcrush caught libpng error:Read Error 遇到问题 在项目Archive时,遇到 Icon.png pngcrush caught ...
- MEF实现设计上的“松耦合”(一)
1.什么是MEF 先来看msdn上面的解释:MEF(Managed Extensibility Framework)是一个用于创建可扩展的轻型应用程序的库. 应用程序开发人员可利用该库发现并使用扩展, ...
- 12 打印1到最大的n位数
输入数字 n,按顺序打印出从 1 最大的 n 位十进制数.比如输入 3,则打印出 1.2.3 一直到最大的 3 位数即 999.由于 n 可能会非常大,因此不能直接用 int 表示数字,而是用 cha ...
- 【AtCoder】ARC095 C-F题解
我居然每道题都能想出来 虽然不是每道题都能写对,debug了很久/facepalm C - Many Medians 排序后前N/2个数的中位数时排序后第N/2 + 1的数 其余的中位数都是排序后第N ...
- php中explode和implode函数
explode array explode ( string $delimiter, string $string, [ , $limit ] ) 函数返回由字符串组成的数组,每个元素都是string ...
- react篇章-React Props
state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 pro ...
- Android ListView 自动加载更多
Android ListView下拉刷新 ListView是我们经常用来展示数据的一个控件,但是由于我们手机的性能和流量的问题,往往我们从服务器中取数据,不能一次性将数据取出来,比如一个新闻的手机AP ...