JQuery easyUi dataGrid工具栏 怎么添加搜索输入框

JQuery easyUi dataGrid工具栏添加搜索输入框的方法：

1、使用tab，在每个tab上面都有一个datagrid，这样easyui给所有datagrid的toolbar生成的dom的class，所以用prependTo()会给所有的toolbar都加上要生成的dom。通过style来指定要prepend的toolbar，代码如下：

//tab初始化完毕之后

$("<table><tr><td style='padding:0 8px'><label>标题:</label></td><td><input id='sTitle' name='sTitle'></td></tr></table>").prependTo("#tabs .panel[style='display: block'] .datagrid-toolbar")

$('#sTitle').searchbox({

width : 180,

searcher : doSearch,

prompt : '请输入标题'

})

function doSearch() {

$("#grid").datagrid("load", {

"sTitle" : $("#sTitle").val()

})

}

2、效果如下图：

datagrid有个方法叫做load用来加载数据，它可以接受一个参数对象，这个参数对象就是datagrid向服务器请求数据时附带的请求参数。

你只需要设定好datagrid的url是正确查询数据的url，然后在查询按钮的click事件处理中获得文本框的值，并将其放在参数对象中调用datagrid的load方法。

示例：

$("#queryButton").click(function(){

    var v_name = $("#name").val() //取文本框的内容

    $("#yourDatagrid").datagrid("load",{name:v_name}) //查询加载数据，附带了请求参数

})

---