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

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

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

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

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

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

$(function(){

...

initSearchOptionbox();

})

为了提高代码的复用性，我们将变量提取出来：

function initSearchOptionbox(){
	var searchbox = 'searchOptionbox';
	 var menu = 'menuOption';
	 var datagridId = 'optionTableId';
	 var URL = "../ra/TNwp/getOptionDatas.do?resDomainId="+resDomainId+"&nlayerSystem="+nlayerSystem+"®ionId="+regionId;
	//调用功能函数
	 initSearchBox(searchbox, menu, datagridId, URL);
};

实现查询功能的具体代码如下：

function initSearchBox(searchbox, menu, datagridId, URL) {
	 //获取下拉选项
	
	 var fields =  $('#'+datagridId).datagrid('getColumnFields');
	 for(var i=1; i"+ opts.title +"

"; $('#'+menu).html($('#'+menu).html()+muit); }; $('#'+searchbox).searchbox({ searcher:function(value,name){ //value：文本框输入的内容， name: 搜索条件对应的field if(value !="" ||value !=null){ //验证数据格式 有枚举值的列，应该将输入的字符串转为相应的枚举值 if(name=='transStyle'){ if(value =='OTN'){ value = '1'; }else if(value =='WDM'){ value ='2'; }else if(value =='SDH'){ value ='3'; }else{ alert('无此类型') ; return false; } }else if(name=='waveCount'|| name=='systemWaveCount'){ var valueInt = parseInt(value); if(valueInt < 0 || valueInt >= 200 || valueInt == NaN){ alert('数据格式不正确') ; return false; } } $('#'+datagridId).datagrid('options').url = URL+"&"+name+"="+value; $('#'+datagridId).datagrid('reload'); $('#'+datagridId).datagrid('unselectAll'); }; }, menu:'#'+menu, prompt:'Please input keyword' }); };

成品外观如下图：

注意事项：如果datagrid存在frozenClomn,应该将两部分拼接

var fields = $('#'+datagridId).datagrid('getFrozenColumnFields');
 fields = fields.concat($('#'+datagridId).datagrid('getColumnFields'));

第二部分 案例二： 给toolbar添加查询条件单一的简单搜索框

1.HTML部分

2.添加到toolbar:

toolbar:[{
	text : document.getElementById('searchNeTb').innerHTML
}]

3.在表格初始化或表格加载成功时添加实现查询功能的代码：

var searchbox = 'searchNebox';
  $("#searchNeTb").css("display","block");//页面加载时不显示，表格初始化后再显示，否则页面看起来很乱
  $('#'+searchbox).searchbox({
	searcher:function(value){
	//value：文本框输入的内容， name: 搜索条件对应的field
	var inputStr = value;
	if(inputStr != null && inputStr != ''){
	 //本例和上个案例不同，本例遍历节点并进行定位，不许重新查询后台
	 var roots = $("#" + treegrid).treegrid('getRoots');
	  for(let i = 0;i=0){
			//如果该父节点是折叠状态 应先展开
			if(roots[i].state == 'closed'){
			$("#" + treegrid).treegrid('expand',roots[i].id);
			}
			$("#" + treegrid).treegrid('select', opts[j].id);
			}
		   }
	   }
      }}, 
   prompt:'网元名称'
			});

4.效果图

第三部分  对比分析

1.后者不需要menu ；

2.后者searcher的入参只有value,前者有value，name。