6 数据网格的搜索功能

在这个教程中，将显示如何从数据库中获取数据并显示的数据网格中。首先案例定义一个搜索框，依据输入的内容来获取数据库中的数据。

接着《5 数据网格具有分页功能》，需要在数据网格中添加一个搜索工具条。

在datagrid_getdata.html表格之后添加如下代码：

<div id="tb">
	<span>用户名：</span>
	<input id="name">
	<a href="#" class="easyui-linkbutton" plain="true" οnclick="doSearch()">搜索</a>
</div>

注意链接标签使用了class="easyui-linkbutton"样式，关于这个知识点可查看：

 http://blog.csdn.net/gdhyyanglang/article/details/8293784

测试运行，可见新添加的搜索工具条出现在数据网格下面。现在使用数据网格的toolbar属性，可以很容易的将工具条整合进数据网格中。给数据网格添加toolbar属性：

toolbar="#tb"

这样，搜索工具条就和数据网格整合在一起了，简单吧。

当用户在input框中输入内容，点击搜索后将会触发onclick事件，进而执行doSearch方法。

function doSearch(){  
    $('#tt').datagrid('load',{  
        name: $('#name').val(), //获取输入文本框的值，作为传递给url的参数  
    });  
}

当单击搜索时，传递name参数给服务器。同时重新加载数据网格中请求的数据（url）。

修改datagrid_getdata.jsp代码：

……
//获取搜索框中的值
String name = "";
if(request.getParameter("name") != null){
	name = 	request.getParameter("name");
}
// 设置搜索条件
String where = "name like '" + name + "%'";  
……
ResultSet rset = stmt.executeQuery("select * from " + tableName + " where " + where); 
while(rset.next()) { 
  rows++; 
}

//获得数据结果集合
String sql="select * from " + tableName + " where " +  where + " limit " + offset + ", " + datagridRows;
……

蓝色为新增的代码，现在搜索功能正常运行。