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" onclick="addUser()">添加用户</a><a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="uploadUser1()">导入用户</a><a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">查看/更新用户</a><a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteUser()">删除用户</a><a href="#" class="easyui-linkbutton" iconCls="icon-redo" plain="true" onclick="distributeRoles()">查看/分配角色</a><a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="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值