03.手把手教你 .Net EasyUI DataGrid(带搜索功能的数据表格)
我们将数据展示出来，自然少不了对某条数据的搜索，所以搜索功能是必不可少的！
效果图3-1：
（1）提交参数到后台的方法
我们在datagrig的toolbar（工具栏）区定义了一个input用来输入要检索的数据，一个easyui-combobox用来设置排序，然后一个按钮用来提交参数到服务器，
那么DataGrid提交参数的方法有不少，常用的两种方法如下：
1.queryParams：在请求远程数据的时候发送额外的参数。
示例：$('#tb1').datagrid({
queryParams: {
Equement: $('input[name="Eq"]').val(),//获取输入的检索的值
order: $("#order").combobox('getValue')//获取升序还是降序
order: $("#order").combobox('getValue')//获取升序还是降序
}
});
2.load：加载和显示第一页的所有行。如果指定了'param'，它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询，通过调用这个方法从服务器加载新数据。
示例：
$(function () {
obj = {
search: function () {
$('#tb1').datagrid('load', {
Equement: $('input[name="Eq"]').val(),
order: $("#order").combobox('getValue')
});
}
}
})
obj = {
search: function () {
$('#tb1').datagrid('load', {
Equement: $('input[name="Eq"]').val(),
order: $("#order").combobox('getValue')
});
}
}
})
本章博客用的第二种提交参数的方式，具体代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sort.aspx.cs" Inherits="web._20160521.sort" %>
新建webform窗体粘贴代码进去后（记得改 CodeBehind="sort.aspx.cs" Inherits="web._20160521.sort"为你自己的），运行在谷歌浏览器上，F12，输入2008，选择降序，然后点击查询按钮，你会在XHR看到以下的参数：
图3-2
那么datagrid控件ajax方式提交了4个参数，一个是Equment:2008,一个是order:desc，那么我们就可以用这些参数转化为SQL语句查询数据库，返回给浏览器啦！
（2）查询方法
以下是将查询关键字封装成模糊查询的sql查询语句
SQL 模糊查询 语句：
SELECT * FROM ( SELECT ROW_NUMBER() OVER (
order by T.numID desc)AS Row, T.* from tb_equipment T
WHERE UPPER(numID) like '%2008%' or upper(仪器名称) like '%2008%' or
upper(型号) like '%2008%' or upper(规格) like '%2008%' or
upper(厂家) like '%2008%' or upper(出厂号) like'%2008%' or
upper(供货商) like '%2008%' ) TT
WHERE TT.Row between 1 and 10
我们查询的是有条件的，所以datagrid的total（总记录数）也应该是符合该条件的记录，我们要重写新的获取行的方法，代码如下：
///
/// 根据输入的条件获取记录数
///
/// 查询条件
/// 返回行数
public int EUGetRecordCount(string EquementKey)
{
StringBuilder strSql = new StringBuilder();
strSql.Append("select count(1) FROM tb_equipment ");
if (EquementKey.Trim() != "")
{
strSql.Append(" where " + EquementKey);
}
object obj = GetSingle(strSql.ToString());
if (obj == null)
{
return 0;
}
else
{
return Convert.ToInt32(obj);
}
}
自然地，我们的查询返回DataSetd的方法也该重写，代码如下：
///
/// 带条件与排序的查询方法
///
/// 检索关键字
/// 排序
/// 查询开始位置
/// 查询结束位置
/// （3）后台代码
新建一个一般处理程序后将接受的参数Equment与order，传给两个重写后的新方法，代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Text;
namespace web._20160521
{
///
/// EasyUI_load1 的摘要说明
///
public class EasyUI_load1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int page = 1, rows = 10;
//EasyUI自带的两个参数rows与page ,表示当前页与行数
if (context.Request.QueryString["rows"] != null)
{
rows = int.Parse(context.Request.QueryString["rows"].ToString().Trim());
}
if (context.Request.QueryString["page"] != null)
{
page = int.Parse(context.Request.QueryString["page"].ToString().Trim());
}
//查询分页 stratIndex endIndex
int stratIndex, endIndex;
stratIndex = (page - 1) * rows + 1;
endIndex = page * rows;
//关键字查询 设备号码：Equement 升序降序：order
string Equement = "", order = "";
if (context.Request.QueryString["Equement"] != null)
{
Equement = context.Request.QueryString["Equement"].ToString().Trim();
}
if (context.Request.QueryString["order"] != null)
{
order = context.Request.QueryString["order"].ToString().Trim();
}
//设置模糊查询
StringBuilder EquementKey = new StringBuilder();
if (Equement != "")
{
EquementKey.AppendFormat("UPPER(numID) like '%{0}%' or " +
"upper(仪器名称) like '%{0}%' or " +
"upper(型号) like '%{0}%' or " +
"upper(规格) like '%{0}%' or " +
"upper(厂家) like '%{0}%' or " +
"upper(出厂号) like'%{0}%' or " +
"upper(供货商) like '%{0}%' ", Equement);
}
//查询数据库
HelperClass.SqlHelper sqlhelper = new HelperClass.SqlHelper();
//根据查询关键字获取查询数据的行数
int count = sqlhelper.EUGetRecordCount(EquementKey.ToString());
//封装数据到dataset
DataSet ds = sqlhelper.GetListByPagebykey(EquementKey.ToString(), order, stratIndex, endIndex);
//将dataset转化为Json格式
string strToJon = HelperClass.ToJson.DatasetJson(ds, count);
context.Response.Write(strToJon);
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
那么，
我们的查询功能已经实现了，如果你发现报错的话，很可能你少了将DataSet数据转化为Json格式的方法，那么请转到我的第一篇博客：
01.手把手教你 .Net EasyUI DataGrid(创建数据表格)