本文接着上一篇,来体验给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,古老的榕树,5-wow.com