标签：
最近在使用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()
});
}
效果如下图：
如何给easyui datagrid toolbar上方添加搜索框
标签：
原文地址：http://my.oschina.net/u/927151/blog/419670
