使用easyui-combogrid自动搜索提示

最新推荐文章于 2019-07-20 15:22:00 发布

原创最新推荐文章于 2019-07-20 15:22:00 发布 · 4.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #easyui-datagrid #自动提示

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用 EasyUI 的 combogrid 组件实现带有远程数据加载的下拉框搜索功能。示例中详细展示了 HTML 结构、JavaScript 初始化配置及回调函数等内容，帮助读者快速掌握 combogrid 的使用方法。

1.页面内容

<select id="inputMenu" class="easyui-combogrid" style=" width: 200px;"></select>  
        <a type="button" class="easyui-linkbutton" id="openTab" href="#">打开菜单</a>

2.js部分

	$("#inputMenu").combogrid({
			prompt:'输入关键字后自动搜索',
			required:true,
			mode:'remote',
			url:getRequestPath('/resource/getCodeByInput'),
			idField: 'name',  
			textField: 'code',   
			editable:true,
			hasDownArrow:true,			
			onBeforeLoad: function(param){				
					var value = $("#inputMenu").combogrid('getValue');
					if(value!=null && value!=undefined && value!=''){
						param.tecode = value;
						return true;
					}else{
						$("#inputMenu").combogrid('hidePanel');
						return false;	
					}		
			},
			onSelect:function(data){
				$("#inputMenu").combogrid('setValue',data.code);
			},
			columns: [[    
	            {field:'code',title:'Code',width:80,sortable:true},    
	            {field:'name',title:'Name',width:120,sortable:true}    
			 ]]    
		});

java后台代码没有放上去，这是加载的远程数据，后台返回的值存在map中，以json数据格式显示