目录
1. easyui,toolbar工具条使用;
我们借助easyui的工具条来实现如下效果;
且要在table栏里面新添一个属性为toolbar;
<table id="dg" title="班级信息" class="easyui-datagrid" fitColumns="true"
pagination="true" rownumbers="true" fit="true" url="gradelist" toolbar="#tb">
<thead>
<tr>
<th field="cb" checkbox="true"></th>
<th field="id" width="50">编号</th>
<th field="gradeName" width="100">班级名称</th>
<th field="gradeDesc" width="100">班级描述</th>
</tr>
</thead>
</table>
<div id="tb">
<div>
<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" id="s_gradeName" name="s_gradeName"/> <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a></div>
</div>
2. 查询班级信息;
这里我们先在dao方法里面加上查询的代码;
//分页显示
public ResultSet gradeList(Connection con, PageBean pageBean, Grade grade)throws Exception{
StringBuffer sb=new StringBuffer("select * from t_grade");
if(StringUtil.isNotEmpty(grade.getGradeName())){
sb.append(" and gradeName like '%"+grade.getGradeName()+"%'");
}
if(pageBean!=null){
sb.append(" limit "+pageBean.getStart()+","+pageBean.getRows());
}
PreparedStatement pstmt=con.prepareStatement(sb.toString().replaceFirst("and","where"));
return pstmt.executeQuery();
}
然后在servlet层里面获取前台的信息,就是gradeName;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String page=request.getParameter("page");
String rows=request.getParameter("rows");
String gradeName=request.getParameter("gradeName");
//第一次查询为null
if(gradeName==null){
gradeName="";
}
Grade grade=new Grade();
grade.setGradeName(gradeName);
PageBean pageBean=new PageBean(Integer.parseInt(page),Integer.parseInt(rows));
Connection con=null;
try {
con=dbUtil.getCon();
JSONObject result=new JSONObject();
JSONArray jsonArray=JsonUtil.formatRsToJsonArray(gradeDao.gradeList(con,pageBean,grade));
//获取总记录数
int total=gradeDao.gradeCount(con);
//返回每页大小以及总记录数
result.put("rows",jsonArray);
result.put("total",total);
//向页面传送数据
ResponseUtil.write(response,result);
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
dbUtil.closeCon(con);
} catch (Exception e) {
e.printStackTrace();
}
}
}
然后在页面上写js逻辑来获取easyui传来的请求;
在搜索的链接上写一个方法:
<a href="javascript:searchGrade()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
具体的方法实现:
<script type="text/javascript">
function searchGrade(){
$('#dg').datagrid('load',{
gradeName:$('#s_gradeName').val()
});
}
</script>
然后再去测验查询就没问题了!