easyui-combobox的使用

一直在加班重复造轮子,博客停更了好久。实在惭愧,今天有点闲空,记录下刚使用的easyui-combobox。

需求:使用下拉框展示历史选项,并能编辑保存新的数据。
首先尝试editableSelect,可以进行编辑和过滤,但是发现不能动态增加option。又找到 easyui-combobox这个插件。这个插件有开源和商用两个版本,辅助资料还是挺多的。这里对editableSelect的动态赋值做个小结。

easyui-combobox引用的文件

jquery.easyui.min.js
easyui.css
icon.css
http://www.jeasyui.net/download/ 官网可以下载。

easyui-combobox两种动态赋值

  1. 运用<select> 元素创建
<select id="data_unit"  class="easyui-combobox" name="deptstyle="width:286px;" value='<c:out value="${dcBoarding.data_unit}"/>' >
	<option value="">请选择或者输入</option>
       <c:forEach items="${unit}" var="name" varStatus="st">
	<option value="${name}">${name}</option>
	</c:forEach> 	
</select>

2.用<input> 创建

<input  id="data_unit" name="dept" style="width:286px" value='<c:out value="${dcBoarding.data_unit}"/>'/>

$('#data_unit').combobox({
        	   url:importConst.formAjaxurl+"?method=queryUnite",
        	    valueField:'value',
        	    textField:'text',
			    editable : true,  //是否可编辑
			    panelHeight:'auto',
			});

url返回的数据类型是json类型,map中的key是value ,map的value是textField。

更多属性请查看官网。

发布了137 篇原创文章 · 获赞 123 · 访问量 25万+

猜你喜欢

转载自blog.csdn.net/lz20120808/article/details/85014097