easyUI searchBox搜索框的实现

easyui searchBox 搜索框

 

[html][/html] view plaincopy

  1. <body class=”easyui-layout” data-options=”fit:true”>
  2.     <div data-options=”region:’center’,border:false”
  3.         style=”overflow: hidden;”>
  4.         <table id=”datagrid”></table>
  5.     </div>
  6.     <div id=”search” style=”display:inline;padding-top:10px;”>
  7.         <!– 这里的padding-top是让搜索栏向下点,也就是与”添加”等按钮对齐,但在HTML里面不好用,在jsp页面中已测试可用 –>
  8.         <input id=”searchBox” class=”easyui-searchbox” searcher=”searchData”
  9.             prompt=”请输入查询内容” style=”width:300px”></input>
  10.         <div id=”searchMenu” style=”width:100px”></div>
  11.     </div>
  12.     <div id=”menu” class=”easyui-menu” style=”width:120px;display: none;”>
  13.         <div onclick=”append();” data-options=”iconCls:’icon-add'”>增加</div>
  14.         <div onclick=”removeData();” data-options=”iconCls:’icon-remove'”>删除</div>
  15.         <div onclick=”edit();” data-options=”iconCls:’icon-edit'”>编辑</div>
  16.     </div>
  17.     </div>
  18. </body>

 

2.js

 

[javascript][/javascript] view plaincopy

  1. //循环列名,生成搜索的下拉列表
  2. var fields =  $(‘#datagrid’).datagrid(‘getColumnFields’);
  3. var muit=””;
  4. for(var i=0; i<fields.length; i++){
  5. <span style=”white-space:pre”>  </span>var opts = $(‘#datagrid’).datagrid(‘getColumnOption’, fields[i]);
  6.     muit += “<div name='”+ fields[i] +”‘>”+ opts.title +”</div>”;
  7. };
  8. $(‘#searchMenu’).html($(‘#searchMenu’).html()+muit);
  9.     $(‘#searchBox’).searchbox({
  10.         menu:’#searchMenu’
  11.     });
  12.     //获取生成的搜索框
  13.     var tSearch = $(“#search”);
  14.     //将生成好的搜索框放入工具栏
  15.      $(“.datagrid-toolbar”).append(tSearch);

 

3. 搜索方法

 

[javascript][/javascript] view plaincopy

  1. function searchData(value,name){
  2.      $(‘#datagrid’).datagrid(‘load’, { “searchKey”: name, “searchValue”: value });
  3. }

 

 

4.searchKey是要查询的字段名,searchValue是这个字段名的值,后台接收到这两个参数然后自己拼接sql查询

a.这是查询总记录的

 

[java][/java] view plaincopy

  1. String hql = “select count(*) from PageImg p where 1=1”;
  2.         if (!UtilTool.isNull(pageImgModel.getSearchKey()) && !UtilTool.isNull(pageImgModel.getSearchValue())) {
  3.             hql = hql + ” and p.” + pageImgModel.getSearchKey() + ” like ‘%” + pageImgModel.getSearchValue() + “%'”;
  4.         }

b.这是查询列表

 

 

[java][/java] view plaincopy

  1. private List<PageImg> find(PageImgModel pageImgModel) {
  2.         String hql = “from PageImg p where 1=1 “;
  3.         List<Object> values = new ArrayList<Object>();
  4.         hql = addWhere(pageImgModel, hql, values);
  5.         if (pageImgModel.getSort() != null && pageImgModel.getOrder() != null) {
  6.             hql += ” order by ” + pageImgModel.getSort() + ” ” + pageImgModel.getOrder();
  7.         }
  8.         return pageImgDAO.find(hql, values, pageImgModel.getPage(), pageImgModel.getRows());
  9.     }
  10.     private String addWhere(PageImgModel imgModel, String hql, List<Object> values) {
  11.         if (!UtilTool.isNull(imgModel.getSearchKey()) && !UtilTool.isNull(imgModel.getSearchValue())) {
  12.             hql += “and p.” + imgModel.getSearchKey() + ” like ? “;
  13.             values.add(“%” + imgModel.getSearchValue().trim() + “%”);
  14.         }
  15.         return hql;
  16.     }

封装的DAO

 

 

[java][/java] view plaincopy

  1.     /**
  2.      * 查询集合(带分页)
  3.      *
  4.      * @param hql
  5.      * @param param
  6.      * @param page
  7.      * @param rows
  8.      * @return
  9.      */
  10.     public List<T> find(String hql, List<Object> param, Integer page, Integer rows);
  11. public List<T> find(String hql, List<Object> param, Integer page, Integer rows) {
  12.         if (page == null || page < 1) {
  13.             page = 1;
  14.         }
  15.         if (rows == null || rows < 1) {
  16.             rows = 10;
  17.         }
  18.         Query q = this.getCurrentSession().createQuery(hql);
  19.         if (param != null && param.size() > 0) {
  20.             for (int i = 0; i < param.size(); i++) {
  21.                 q.setParameter(i, param.get(i));
  22.             }
  23.         }
  24.         return q.setFirstResult((page – 1) * rows).setMaxResults(rows).list();
  25.     }

效果图一张:( 发现设置了哪个padding还是不能让搜索框和按钮对齐)

 

标签