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

最新推荐文章于 2020-05-11 17:53:56 发布

lemoncorporation

最新推荐文章于 2020-05-11 17:53:56 发布

阅读量8.7k

点赞数 3

本文链接：https://blog.csdn.net/lemoncorporation/article/details/51473788

版权

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

效果图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&

最低0.47元/天解锁文章

lemoncorporation

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
03.手把手教你 .Net EasyUI DataGrid(带搜索功能的数据表格)

我们将数据展示出来，自然少不了对某条数据的搜索，所以搜索功能是必不可少的！效果图3-1：（1）提交参数到后台的方法我们在datagrig的toolbar（工具栏）区定义了一个input用来输入要检索的数据，一个easyui-combobox用来设置排序，然后一个按钮用来提交参数到服务器，那么DataGrid提交参数的方法有不少，常用的两种方法如下：1
复制链接

扫一扫