这个例子展示了jqGrid一个非常有用的功能-在工具栏上选择一个特定字段进行搜索操作。
为此,我们引入了一个新的工具栏搜索参数-searchOperators,当我们设置它为true时,
他允许我们在一个特定的字段上选择一个搜索操作。
在例子中,很多不同的操作,已经在搜索操作项里面被定义了。
选择一个期望的操作,填入一个值,然后点击Enter,它将会被搜索。
HTML代码举例
<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="list451"></table> <div id="pager451"></div> ···代码省略··· </body> </html>
javascript代码举例
$(function(){ pageInit(); }); function pageInit(){ jQuery("#list451").jqGrid({ url:ctx+'/LocalData', datatype: "json", height: 255, width: 600, colNames:['Index','Name', 'Code'], colModel:[ {name:'item_id',index:'item_id', width:65, sorttype:'integer', searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}}, {name:'item',index:'item', width:150, sorttype:'string', searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']}}, {name:'item_cd',index:'item_cd', width:100} ], rowNum:50, rowTotal: 200, rowList : [20,30,50], loadonce:true, mtype: "GET", rownumbers: true, rownumWidth: 40, gridview: true, pager: '#pager451', sortname: 'item_id', viewrecords: true, sortorder: "asc", caption: "Loading data from server at once" }); jQuery("#list451").jqGrid('filterToolbar',{searchOperators : true}); }
java servlet代码举例
package net.mn886.blog.jqgrid.new_3_7; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONArray; import org.json.JSONObject; /** * Servlet implementation class LocalData */ public class LocalData extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public LocalData() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doPost(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub JSONArray rows = new JSONArray(); //模拟数据 for(int i=0;i<2000;i++){ JSONObject item = new JSONObject("{\"id\":\""+(i+1)+"\",\"cell\":[\""+(i+1)+"\",\"Lorem\",\"575878\"]}"); rows.put(item); } JSONObject jsondata = new JSONObject(); jsondata.put("page", "1"); jsondata.put("total", 7); jsondata.put("records", "12269"); jsondata.put("rows", rows); response.getWriter().write(jsondata.toString()); } }