easyui datagrid 如何嵌入以toolbar形式的搜索功能

怎样在easyui内嵌入搜索框，本人查看了好多资料，以及easyui文档，有如下体会，希望能给大家带来帮助！

首先：看下功能截图

 

二.在看页面加载datagrid代码：

		//组grid创建
		function groupgrid(url){
			$('#leftGroupGrid').datagrid({
				title:'字典表分组',
			 	iconCls:'icon-ok',
			 	singleSelect:true,
				fitColumns: true,
			    nowrap:false,
			    striped: true,
			    collapsible:true,
			    url:url,
				loadMsg:'请稍候,系统正在处理请求...',
				dataType: 'json',
				pagination:true,
                rownumbers:true,
			    remoteSort:false,
				columns:[[
					{field:'groupname',title:'组名',width:$('#leftGroupGrid').width()*0.3,sortable:true,editor:'text'},
					{field:'remark',title:'描述',width:$('#leftGroupGrid').width()*0.2,sortable:true,editor:'text'},
					{field:'type',title:'数据类型',width:$('#leftGroupGrid').width()*0.175,
						editor:{
							type:'combobox',
							options:{valueField:'id',textField:'name',data:typepram,required:true}
						}},
					{field:'dicDicType',title:'字典表分类',width:$('#leftGroupGrid').width()*0.175,
						editor:{
							type:'combobox',
							options:{valueField:'id',textField:'name',data:dicdictypepram,required:true}
						}},
					{field:'action',title:'操作',width:$('#leftGroupGrid').width()*0.15,align:'center',
							formatter:function(value,row,index){
								if (row.editing){
									var s = '<a href="#" οnclick="saveGroupRow('+index+')"><img src="${ctx}/resources/jquery-easyui-1.2.5/themes/icons/filesave.png" width="16" height="16" border="0" alt="保存"></a> ';
									var c = '<a href="#" οnclick="cancelGrouprow('+index+')"><img src="${ctx}/resources/jquery-easyui-1.2.5/themes/icons/redo.png" width="16" height="16" border="0" alt="撤销"></a> ';
									return s+c;
								} else {
									return '--';
								}
							}
						}
					
				]],
				onBeforeLoad:function(){
					$('leftGroupGrid').datagrid('rejectChanges');
					$('#lbtnadd').linkbutton('enable');

				},
				//双击行事件（根据组名查询组中的值信息）
				onDblClickRow:function(rowIndex,rowData){group = rowData.groupname;$(document).ready(function(){rightItemGrid();});},
				//用户开始编辑一行时触发
				onBeforeEdit:function(index,row){row.editing = true;$('#leftGroupGrid').datagrid('refreshRow',index);},
				//当用户完成编辑一行时触发
				onAfterEdit:function(index,row,changes){saveGroupRow(index,row,changes);row.editing = false;$('#leftGroupGrid').datagrid('refreshRow',index);},
				//当用户取消编辑一行时触发
				onCancelEdit:function(index,row){row.editing = false;$('#leftGroupGrid').datagrid('rejectChanges');}
			});
			  //设置分页控件   
		    $('#leftGroupGrid').datagrid('getPager').pagination({   
		        pageSize: 10,//每页显示的记录条数，默认为10   
		        pageList: [5,10,15],//可以设置每页记录条数的列表   
		        beforePageText: '第',//页数文本框前显示的汉字   
		        afterPageText: '页    共 {pages} 页',   
		        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录', 
		    });
		}
		

三.定义的html代码：

	<!-- start 列表区 -->
	<div class="divgrid">
		<table border="0" cellspacing="5px">
			<tr>
				<td valign="top"><table id="leftGroupGrid" toolbar="#search"></table></td>
				<td valign="top"><table id="rightItemGrid"></table></td>
			</tr>
		</table>
	</div>
	<!-- end  列表区 -->
	
	<!-- start搜索框 -->
	<div id="search" style="padding-top: 3px;">
		<a href="javascript:void(0)" id="lbtnadd" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="insertGroupRow();">增加</a>
		组名<input type="text" id="txtGroupName" value="${groupname}" style="width:80px"></input>
		描述<input type="text" id="txtRemark" value="${remark}"   style="width:80px"></input>
		类型<select id="txtType" >
				<ef:option groupname="DicType"  selectedValue="${type}" link="true" flag="true"></ef:option>
			</select>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" οnclick="selectItemValue();">查询</a>
	</div>
	<!-- end搜索框 -->

四.代码贴上了，解释下：

1.定义了一个<td valign="top"><table id="leftGroupGrid" toolbar="#search"></table></td>的table专门放json数据；

2.在table里引用toolbar="#search“，即将定义好的<div id="search" style="padding-top: 3px;"></div>的内容以toolbar的形式嵌入到了上述table里；

3.注意toolbar是等于div里的#id。

4.不要再js在重新定义一个toolbar，否则html里的div内容就不会被嵌入进去。