03.手把手教你 .Net EasyUI DataGrid(带搜索功能的数据表格)

来源：互联网发布：网络英语写作平台推荐编辑：程序博客网时间：2024/05/22 01:30

我们将数据展示出来，自然少不了对某条数据的搜索，所以搜索功能是必不可少的！

效果图3-1：

（1）提交参数到后台的方法

我们在datagrig的toolbar（工具栏）区定义了一个input用来输入要检索的数据，一个easyui-combobox用来设置排序，然后一个按钮用来提交参数到服务器，

那么DataGrid提交参数的方法有不少，常用的两种方法如下：

1.queryParams：在请求远程数据的时候发送额外的参数。

示例：$('#tb1').datagrid({

queryParams: {

Equement: $('input[name="Eq"]').val(),//获取输入的检索的值
order: $("#order").combobox('getValue')//获取升序还是降序

}

});

2.load：加载和显示第一页的所有行。如果指定了'param'，它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询，通过调用这个方法从服务器加载新数据。

示例：

        $(function () {
            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" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <script src="../js/jquery-1.7.1.min.js"></script>    <script src="../EasyUI/jquery.min.js"></script>    <script src="../EasyUI/jquery.easyui.min.js"></script>    <link href="../EasyUI/themes/icon.css" rel="stylesheet" />    <script src="../EasyUI/locale/easyui-lang-zh_CN.js"></script>    <link href="../EasyUI/themes/default/easyui.css" rel="stylesheet" />    <script type="text/javascript">        $(function () {            $('#tb1').datagrid({                url: '../20160521/EasyUI_load.ashx',                width: 850,                title: '设备管理',                method: 'get',                toolbar: '#tb',                columns: [[                    { field: 'numID', title: '设备编号', width: 150},                    { field: '仪器名称', title: '名称', width: 150},                    { field: '型号', title: '型号', width: 150 },                    { field: '规格', title: '规格', width: 150 },                    { field: '厂家', title: '厂家', width: 150 },                    { field: '出厂号', title: '出厂号', width: 150 },                    { field: '单价', title: '价格', width: 100}                ]],                pagination: true,                pageSize:10,                pageList: [10, 15, 20, 25],            })        })        $(function () {            obj = {                search: function () {                    $('#tb1').datagrid('load', {                        Equement: $('input[name="Eq"]').val(),                        order: $("#order").combobox('getValue')                    });                }            }        })    </script></head><body>    <table id="tb1"></table>    <div id="tb" style="padding:5px">        <div style="margin-bottom:5px">             <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>             <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>             <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>        </div>        <div>            查询设备：<input type="text" name="Eq" style="width:150px"/>            <select id="order" class="easyui-combobox" panelHeight="auto" style="width:100px">                <option value="asc">升序</option>                <option value="desc">降序</option>            </select>            <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="obj.search()">查询</a>        </div>    </div></body></html>

新建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（总记录数）也应该是符合该条件的记录，我们要重写新的获取行的方法，代码如下：

        /// <summary>        /// 根据输入的条件获取记录数        /// </summary>        /// <param name="EquementKey">查询条件</param>        /// <returns>返回行数</returns>        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的方法也该重写，代码如下：

        /// <summary>        /// 带条件与排序的查询方法        /// </summary>        /// <param name="EquementKey">检索关键字</param>        /// <param name="order">排序</param>        /// <param name="startIndex">查询开始位置</param>        /// <param name="endIndex">查询结束位置</param>        /// <returns></returns>        public DataSet GetListByPagebykey(string EquementKey, string order, int startIndex, int endIndex)        {            StringBuilder strSql = new StringBuilder();            strSql.Append("SELECT * FROM ( ");            strSql.Append(" SELECT ROW_NUMBER() OVER (");            if (!string.IsNullOrEmpty(EquementKey.Trim()))            {                strSql.Append("order by T.numID " + order);            }            else            {                strSql.Append("order by T.numID asc");            }            strSql.Append(")AS Row, T.*  from  tb_equipment T ");            if (!string.IsNullOrEmpty(EquementKey.Trim()))            {                strSql.Append(" WHERE " + EquementKey);            }            strSql.Append(" ) TT");            strSql.AppendFormat(" WHERE TT.Row between {0} and {1}", startIndex, endIndex);            return Query(strSql.ToString());        }

（3）后台代码

新建一个一般处理程序后将接受的参数Equment与order，传给两个重写后的新方法，代码如下：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Data;using System.Text;namespace web._20160521{    /// <summary>    /// EasyUI_load1 的摘要说明    /// </summary>    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(创建数据表格)

0 0