67jqGrid - 搜索操作工具栏

简介: 67jqGrid - 搜索操作工具栏

这个例子展示了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());
  }
}
目录
相关文章
|
JavaScript 数据格式
10jqGrid - 搜索操作
10jqGrid - 搜索操作
48 0
|
JSON JavaScript 前端开发
82jqGrid - 搜索
82jqGrid - 搜索
28 0
|
JavaScript 前端开发 Java
63jqGrid - 复杂搜索
63jqGrid - 复杂搜索
50 0
|
JavaScript 前端开发 Java
66jqGrid - 搜索模板
66jqGrid - 搜索模板
34 0
|
JavaScript 前端开发 Java
64jqGrid - 在搜索中显示查询条件
64jqGrid - 在搜索中显示查询条件
56 0
|
前端开发 JavaScript 数据库
layui联动菜单搜索select表单选项的设置方法
layui联动菜单搜索select表单选项的设置方法
563 0
|
JavaScript 算法 前端开发
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
816 0
|
前端开发 API 定位技术
【百度地图API】如何使用suggestion--下拉列表方式的搜索建议
原文:【百度地图API】如何使用suggestion--下拉列表方式的搜索建议 摘要:   百度地图上有一个很强大的搜索建议功能,以下拉列表的方式展示出来。比如,输入“百度”,下拉列表中就会出现“北京市海淀区百度在线网络技术(北京)有限公司”。
2356 0
|
4天前
|
前端开发 程序员 API
前端|基于 Layui 实现动态搜索选择框
网页端实现动态搜索选择框,要求下拉选项列表能根据用户输入内容动态刷新,最终提交的值必须是由选项列表中点选的。
26 3
|
2月前
|
JSON JavaScript 前端开发
jQuery下拉框搜索模糊查询实现
【9月更文挑战4天】
102 10