如何给easyui datagrid toolbar上方添加搜索框

2019独角兽企业重金招聘Python工程师标准>>>

        最近在使用easyui编写后台框架时，遇到一个头疼的问题，就是给datagrid添加一个搜索框，蛋疼的是官方貌似没有提供相关的方法(有可能是我不知道，如果哪位大神知道，希望能告知)。

        百度了很久，搜索到一篇博文，是通过prependTo到.datagrid-toolbar的方式，这样子确实是可行的。楼主使用的是tab，在每个tab上面都有一个datagrid，由于楼主是使用js动态添加节点，所以面临了一个问题，就是easyui给所有datagrid的toolbar生成的dom的class(好绕:P)都是这个，所以用prependTo()会给所有的toolbar都加上要生成的dom。

        后来通过观察自动生成的页面的代码，发现每次生成一个新的tab时，所在的panel的div的style会变为block，查看了jquery的prependTo()的api，发现prepend的对象是选择器(selector)，所以我在控制台试验了一下，通过style来指定要prepend的toolbar。代码如下("#tabs是盛放tab的div的id")。

//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()
    });
}

效果如下图：

转载于:https://my.oschina.net/u/927151/blog/419670