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

最近在使用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()
    });
}

效果如下图:

时间: 2024-08-27 19:00:52

如何给easyui datagrid toolbar上方添加搜索框的相关文章

Codejock Xtreme ToolkitPro MFC 15.1.3.0908(Full Source) 汉化与添加搜索框

Codejock Xtreme ToolkitPro MFC 15.1.3.0908(Full Source) 1.安装序列号 B0B50-00000-A301C-00000-3ADC6 2.汉化过程 1.Source\XTToolkitPro.rc中找到 #defineLANGUAGE_DEFAULT(ProdName) <##ProdName##\res\Resource.rc> 在它的前面一行加上: #define _XTP_RESOURCE_LANGUAGE zh_CN 即: 2.Wo

如何在WordPress菜单中添加搜索框?

如何在WordPress菜单中添加搜索框?且不需要不使用任何WordPress插件. 想要达到这种效果只需按照以下步骤相同. 如何在WordPress菜单中添加搜索框: WordPress菜单中添加搜索框 打开functions.php文件,并在文件末尾的代码片段下面复制粘贴并保存.以下代码将自动将搜索框添加到主菜单栏. /** * Add searchbox in menubar */ add_filter( 'wp_nav_menu_items','add_search_box', 10,

EasyUI datagrid toolbar常用的两种形式

第一种 <table id="userInfo"></table> <script> $(function(){ $('#userInfo').datagrid({ url:'../json/customerAction_getCustomerInfo', fitColumns:true, striped:true, nowrap:true, loadMsg:'数据正在加载,请稍后...', pagination:true, rownumbers:t

IOS第二天-新浪微博 - 添加搜索框,弹出下拉菜单 ,代理的使用 ,HWTabBar.h(自定义TabBar)

********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearchBar *searchBar = [HWSearchBar searchBar]; searchBar.width = 300; searchBar.height = 30; self.navigationItem.titleView = searchBar; //设置titleView 是搜索框

EasyUI基础searchbox&amp;amp;progressbar(搜索框,进度条)

easyui学习的基本组成部分(八个部分)硕果仅存searchbox和pargressbar.tooltip该,有一点兴奋.本文将偏向searchbox和pargressbar做一个探讨.鉴于双方的内容不会太多,在这里,直接此事合并! searchbox 不用过多解释,仅仅要用于用户对数据的搜索.使用$.fn.searchbox.defaults重载默认值. 依赖组件:菜单button. searchbox提示用户输入搜索值.它能够设定一个类别菜单,同意用户选择不同的搜索类别.当用户点击确认bu

Easyui datagrid toolbar 模板

<div id="DataGridEmployeeToolBar" border="false" style="border-bottom: 1px solid #ddd; height: 32px; padding: 2px 5px; background: #fafafa;"> <div style="float: left;"> <a href="#" class=&qu

easyui datagrid editor combobox添加空选则清空combobox框

<script type='text/javascript'> var editIndex = undefined; $(function() { $('#tb1').datagrid({ url:'CourseTeachersSave.aspx?opt=GetDatagridData&xnxq='+$('#hiddenXnxq').val()+'&synj='+$('#hiddenSynj').val()+'&bh='+$('#hiddenBh').val(), wi

解决easyui datagrid单选时复选框不取消问题

1 var flag = true: //定义一个开关变量控制 2 $("#table").datagrid({ 3 pagination: true,//允许分页 4 rownumbers: true,//行号 5 singleSelect: false,//只选择一行 6 pageSize: 20,//每一页数据数量 7 width:"100%", 8 checkOnSelect: false, //此属性必须设置为 false10 pageList: [10,

iOS --- 搜索框UISearchController的使用(iOS8.0以后替代UISearchBar + UISearchDisplayController的组合)

在iOS 8.0以上版本中, 我们可以使用UISearchController来非常方便地在UITableView中添加搜索框. 而在之前版本中, 我们还是必须使用UISearchBar + UISearchDisplayController的组合方式. 添加UISearchController属性: @property(strong, nonatomic) UISearchController *searchController; @property(strong, nonatomic) NS