整理下对jquery easyui中的datagrid查询框的扩展的思路。

1、首先、在进行扩展时查询框封装的是一个表单，此表单中需要包含jquery eaysui的自定义的表单，如combobox、datebox、datetimebox等等。那么就需要定义一系列的jquery easyui的表单组件数组。在看过easyui源码之后，发现在datagrid中已经定义了这么一个数组，存储了大部分的表单组件，即为editors。

2、接着、就要考虑如何扩展查询框这个属性啦，这很简单，只要在定义datagrid时，多添加一个属性就好了，此处我定义了searchbar，是一个数组。这个数组定义的方式和可编辑表格中的editor类似。

可以参考可编辑表格的实例。
 

其中、type即为表单组件的类型，上面定义的是文本框。具体有那些类型可以参考editors。当然需要的话可以自己扩展（如可以定义一个又开始和结束时间的查询控件）。
为了以后能够对其进行扩展，在searchbar中定义了另一个属性forms来存储查询表单中的内容。

3、第三个问题来了，进行查询时，会遇到分页查询的问题。这要求在每次进行查询时，能够在每次查询时把查询参数也一起传到后台，怎样才能实现呢？细心的你也许已经发现，在datagrid中，提供了queryParams这个参数。

这个在Jquery easyui之控件参数传递（http://www./article/jquery/20936.html）中提到过。

能够在每次查询时将已定义的参数传递到相应的URL地址。
在单击查询按钮时，需要调用datagrid的方法，将表单查询参数集成到queryParams当中，然后传递到URL中，这就是load方法。这将为我们扩展searchbar提供了便利。

4、有了上面几点作为支持，实现查询框的功能已经不在话下了。但是还有一个样式问题，当时这个问题让我很是纠结（当初样式学的很烂，嘻嘻）。这个问题就是如何让查询框能够上下对齐而且自动换行，在这之前就是如何将这些查询组件组装到已有的datagrid中。

1，样式代码：
 

2，js代码，分两部分 ：
第一部分是来控制datagrid高度的代码，这是由于扩展的searchbar要占用一定的高度。
放置代码的具体位置是在wrap.children("div.datagrid-toolbar").outerHeight(true)后面再减去wrap.children("div.datagrid-searchbar").outerHeight(true)即可。

第二部分既是对searchbar的扩展，找到$("div.datagrid-pager",_3ae).remove();然后在前面加上如下代码：