easyui datagrid toolbar 添加搜索框

1.jsp 页面

tb：datagrid工具栏 

search：搜索框div层

sss：esayui-searchbox 包含 searcher=“”属性，指定搜索方法

mm：搜索选项，选择不同搜索类型

 <div id="tb">                                                         
	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="addUser()">添加用户</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="uploadUser1()">导入用户</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">查看/更新用户</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="deleteUser()">删除用户</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-redo" plain="true" οnclick="distributeRoles()">查看/分配角色</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="distributeMajors()">查看/选择专业</a>
   </div>  
 
 <!-- 搜索框，放入tb中 -->
<!-- 这里的padding-top是让搜索栏向下点，也就是与"添加"等按钮对齐，但在HTML里面不好用，在jsp页面中已测试可用 -->  
 <div id="search" style="float: right;"> <!--   若想调整搜索框位置，加一个div层 -->
    
    <input id="sss"  class="easyui-searchbox" searcher="searcher" prompt="请输入查询内容"  style="width:300px"></input>
         检索     
  <div id="mm" style="width:100px"> 
  <!-- 搜索选项，若上面的初始化中有相关内容则不需要下面的内容 -->
   <div data-options="name:'realName'">员工名称</div>
    <div data-options="name:'userNum'">员工ID</div> 
    <div data-options="name:'departmentName'">部门</div> 
    <div data-options="name:'majorName'">专业</div> 
   </div>  
</div> 
 

2.js 构建初始datagrid

<span style="font-size:24px;"> </span><span style="font-size:18px;">$('#dg').datagrid({ 
       url:'allusersShow.action', 
        success:function(data){
         
        }, 
        title:'用户列表', 
        iconCls:'icon-edit',//图标 
        width: 1000, 
        height: 300, 
        collapsible:true,//是否可折叠的 
        fit: true,//自动大小 
        
      // sortName: 'userId', 
      // sortOrder: 'asc', 
        remoteSort:false,  
        idField:'userId', 
        singleSelect:true,//是否单选 
        pagination:true,//分页控件 
        rownumbers:true,//行号 
        fitColumns:true,
         toolbar: '#tb',
       
    }); 
    	        //分页
				var p = $('#dg').datagrid('getPager');
					$(p).pagination({
						pageSize : 10,//每页显示的记录条数，默认为10 
						pageList : [ 5, 10, 15 ],//可以设置每页记录条数的列表 
						beforePageText : '第',//页数文本框前显示的汉字 
						afterPageText : '页    共 {pages} 页',
						displayMsg : '当前显示 {from} - {to} 条记录   共 {total} 条记录',
					});

                 //初始化搜索框和搜索框选项 ，自动获得datagrid的field值，若下面<div>中手动添加则不需要此处内容					
				    /*  var muit = "";		
					for ( var i = 0; i < fields.length; i++) {
						var opts = $('#dg').datagrid('getColumnOption',
								fields[i]);
							//console.info(opts);	
						muit += "<div name='"+  fields[i] +"'>" + opts.title
								+ "</div>";
					}
					;
					$('#mm').html($('#mm').html() + muit);
					$('#sss').searchbox({
						menu : '#mm'
					});
					var a=$("#testa");  //若想调整搜索框位置，可以再加一个div层
					//将生成好的搜索框放入工具栏  
					$(".datagrid-toolbar").append(a); */
					$('#sss').searchbox({
						menu : '#mm'
					});
					//将生成好的搜索框放入工具栏  (两种方法)
					$('#search').appendTo('#tb.datagrid-toolbar');
					
					

				});//页面初始化结束</span>

3.js中定义search方法，根据搜索得到的值重新生成datagrid

<span style="font-size:18px;">function searcher(value, name) {//value是输入搜索值，name是搜索选项类型
					/* $.post('userDetailSearch.action',{searchValue:value,searchType:name},function(result){
					//console.info(result);
					}); */
					
					$('#dg').datagrid({ 
					//loadData: {'searchValue':'value','searchType':'name'},
	        url:'userDetailSearch.action?searchValue='+encodeURI(encodeURI(value))+'&searchType='+name, 
			        title:'用户列表', 
			        iconCls:'icon-edit',//图标 
			        width: 1000, 
			        height: 300, 
			        collapsible:true,//是否可折叠的 
			        fit: true,//自动大小 
			        
			        //sortName: 'code', 
			        //sortOrder: 'desc', 
			        remoteSort:false,  
			        idField:'fldId', 
			        singleSelect:true,//是否单选 
			        pagination:true,//分页控件 
			        rownumbers:true,//行号 
			        fitColumns:true,
			         toolbar: '#tb',
			       onLoadSuccess : function(data){
			       if(data.total==0)
			       {
			       alert("无相关匹配信息，请重新查找！")
			       }
			       }
			    }); </span>

4.action后台搜索方法，返回搜索得到的json值