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

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的如何给easyui datagrid toolbar上方添加搜索框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。