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="#" onclick="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="#" onclick="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" onclick="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" onclick="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内容就不会被嵌入进去。