我们将数据展示出来,自然少不了对某条数据的搜索,所以搜索功能是必不可少的!
效果图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" %>
<!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&