对于datagrid的工具栏,一般很简单的通过配置toolbar就能达到以下的效果。

datagrid自定义工具栏

 

但是仅仅是button,有时候并不能满足我们的需求,例如搜索,这时候,如果搜索我们总不能点击搜索按钮弹出一个dialog然后填完关键字,再点击dialog上的ok再去搜索吧。那样就太失败了。

这个时候我们可以使用自定义的toolbar,在官方demo中,datagrid文件夹有一个complextoolbar.html例子就是讲自定义一个div,然后赋值给toolbar的。

datagrid自定义工具栏

datagrid自定义工具栏

通过看这个demo,我们就豁然开朗,自定义其实很简单。

 

但是,碰到这么种情况,我就看着我第一副图上的button不错,我只想加一个textbox关键字框,不想自定义了。那么就需要我们的Juery功底了。

datagrid自定义工具栏

 

代码:

$('.datagrid-toolbar').prepend("<div style='float:left; margin-top:4px' ><input type='text' style='width:100px' /></div>");

 


相关文章: