青岛网站建设
网站首页 联系我们

资讯中心

联系方式
  • 地址:青岛市李沧区金水路772号
  • 电话:0532-87606070
  • 手机:13969865210
  • 邮箱:web@toorain.net

网站开发知识
easyUI searchBox搜索框的实现
时间:2014-1-3 18:40:38  来源:青岛网站建设  点击:2473

easyui searchBox 搜索框

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


2.js
  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);  
//循环列名,生成搜索的下拉列表 
var fields =  $('#datagrid').datagrid('getColumnFields'); 
var muit=""; 
for(var i=0; i<fields.length; i++){  var opts = $('#datagrid').datagrid('getColumnOption', fields[i]);
	muit += "<div name='"+ fields[i] +"'>"+ opts.title +"</div>";
};
$('#searchMenu').html($('#searchMenu').html()+muit);
	$('#searchBox').searchbox({ 
		menu:'#searchMenu' 
	}); 
	//获取生成的搜索框
	var tSearch = $("#search"); 
	//将生成好的搜索框放入工具栏
	 $(".datagrid-toolbar").append(tSearch);


3. 搜索方法

  1. function searchData(value,name){  
  2.      $('#datagrid').datagrid('load', { "searchKey": name, "searchValue": value });  
  3. }  
	function searchData(value,name){
		 $('#datagrid').datagrid('load', { "searchKey": name, "searchValue": value });
	}



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

  a.这是查询总记录的

  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.         }  
String hql = "select count(*) from PageImg p where 1=1";
		if (!UtilTool.isNull(pageImgModel.getSearchKey()) && !UtilTool.isNull(pageImgModel.getSearchValue())) {
			hql = hql + " and p." + pageImgModel.getSearchKey() + " like '%" + pageImgModel.getSearchValue() + "%'";
		}
  b.这是查询列表
  1. private List<PageImg> find(PageImgModel pageImgModel) {  
  2.         String hql = "from PageImg p where 1=1 ";  
  3.   
  4.         List<Object> values = new ArrayList<Object>();  
  5.         hql = addWhere(pageImgModel, hql, values);  
  6.           
  7.         if (pageImgModel.getSort() != null && pageImgModel.getOrder() != null) {  
  8.             hql += " order by " + pageImgModel.getSort() + " " + pageImgModel.getOrder();  
  9.         }  
  10.         return pageImgDAO.find(hql, values, pageImgModel.getPage(), pageImgModel.getRows());  
  11.     }  
  12.       
  13.     private String addWhere(PageImgModel imgModel, String hql, List<Object> values) {  
  14.         if (!UtilTool.isNull(imgModel.getSearchKey()) && !UtilTool.isNull(imgModel.getSearchValue())) {  
  15.             hql += "and p." + imgModel.getSearchKey() + " like ? ";  
  16.             values.add("%" + imgModel.getSearchValue().trim() + "%");  
  17.         }  
  18.         return hql;  
  19.     }  
private List<PageImg> find(PageImgModel pageImgModel) {
		String hql = "from PageImg p where 1=1 ";

		List<Object> values = new ArrayList<Object>();
		hql = addWhere(pageImgModel, hql, values);
		
		if (pageImgModel.getSort() != null && pageImgModel.getOrder() != null) {
			hql += " order by " + pageImgModel.getSort() + " " + pageImgModel.getOrder();
		}
		return pageImgDAO.find(hql, values, pageImgModel.getPage(), pageImgModel.getRows());
	}
	
	private String addWhere(PageImgModel imgModel, String hql, List<Object> values) {
		if (!UtilTool.isNull(imgModel.getSearchKey()) && !UtilTool.isNull(imgModel.getSearchValue())) {
			hql += "and p." + imgModel.getSearchKey() + " like ? ";
			values.add("%" + imgModel.getSearchValue().trim() + "%");
		}
		return hql;
	}

封装的DAO

    /** 

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