给easyui-datagrid的toolbar自定义一个动态查询条件的搜索框

最新推荐文章于 2024-08-21 17:51:57 发布

程序媛~婷

最新推荐文章于 2024-08-21 17:51:57 发布

阅读量6.1k

点赞数 4

分类专栏： JS HTML JQuery EasyUI

本文链接：https://blog.csdn.net/litingyuki/article/details/80535476

版权

本文介绍了如何为EasyUI Datagrid的toolbar添加动态查询条件的搜索框，包括两种不同类型的实现方式。案例一展示了以各列为查询条件，查询条件可切换，通过提取变量提高了代码复用性。案例二则提供了一个查询条件单一的简单搜索框。文章还进行了两者之间的对比分析，指出了它们在menu和searcher参数上的区别。

摘要由CSDN通过智能技术生成

第一部分案例一：以各列为查询条件，查询条件可切换

1.首先在HTML部分写一个searchbox,代码如下：

<div id="searchOptionTb">
  <input id="searchOptionbox"  style="width:260px"></input>
  <div id="menuOption" style="width:100px">
</div> </div>

2.将searchbox 添加至toolbar，代码如下：

toolbar:[
					{
						id : 'btnAdd',
						text : '添加备选',
						iconCls : 'icon-ok',
						handler : function (){
							addSystem(); }
					},'-', {  
			            text: document.getElementById('searchOptionTb').innerHTML,
			        } ]

3.在datagrid 初始化的时候，配置相关属性：

$(function