真正的才智是刚毅的志向。 —— 拿破仑
志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚
志向和热爱是伟大行为的双翼。 —— 歌德
生活有度，人生添寿。 —— 书摘
<select id="ccdatabase" class="easyui-combobox" name="state" multiple="multiple" style="width:200px; height: 30px"></select>
function initCombobox() {
$.ajax({
type: "get", // 使用post方法访问后台
dataType: "json", // 返回json格式的数据
url: "/CollectionSource/SearchAllSource?content=&sourceType=-1&page=1&rows=20", // 要访问的后台地址
data: {
//content: "", sourceType: "-1", page: "1", rows: "100"
},
complete: function () { },
success: function (data) {// result为返回的数据
$(#ccdatabase).combobox({
data: data.Data.Items,
valueField: Id,
textField: Name
});
}
});
}
-----------------------------------------------------------------------------------------------------------------------------------------------
首先easyui相关js和css文件需要准备好，这个就不详细说明
其次本文主要针对ajax和jsp的处理。
1.combobox 贴代码
$.ajax({
type : "post",
data : {
infotype:1
},
url : "${pageContext.request.contextPath}/getData.action",
dataType : "json",
success : function(data) {
$(#mySelectul).combobox({data:data,
valueField:"value",
textField:"value"});
//alert("ok");
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("获取查询条件数据失败，请刷新页面！");
}
});
关键是后台传入的值是json格式，我的是一个map,key的名字是value,不过可以换成对象，如果是对象valeField和textField名称也要相应改变
<td id="mySelect" class="mySelect select">
<select
id="mySelectul" class="easyui-combobox" name="comType"
style="width:200px;" multiple="multiple">
<option>随意内容不影响展示</option>
</select>
</td>
获取值方法很多：因为我要处理拿到的值comTypeStr 所以代码如下
var comTypeStr = ;
$("[name=comType]").each(function(index, element) {
comTypeStr += $(this).val() + ",";
});
最后由于多选中ie会自动在input内容填充后选中时添加叉，但是easyui没有提供下拉列表内容同时删除功能，所以建议去掉叉。代码加上css
input::-ms-clear { display: none; }
2.combotree (多选,单选的话稍作修改） 贴代码
$.ajax({
type : "post",
data : {
infotype:2
},
url : "${pageContext.request.contextPath}/getDataOther.action",
dataType : "json",
success : function(data) {
$(#mySelectInfoul).combotree({data :data,
valueField: id,
textField: text,
multiple: true,
editable: false,
method: get,
panelHeight: auto,
checkbox: true,
children:children
});
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("获取查询条件数据失败，请刷新页面！");
}
});
关键是后台传入的值是json格式，这次是一个对象，注意该对像要有id和需要展示的text属性，名字也不能改,如果有二级目录需要将list放入children中，名字同样不能改，不知道是不是easyui限制反正改了就有问题。
例如public class Info {
private String text;
private int id;
private List<Info> children=new ArrayList<Info>();
<td id="mySelectInfo" class="mySelect select">
<select
id="mySelectInfoul" class="easyui-combotree" name="infoFrom"
style="width:200px;" multiple="multiple">
<option>随意内容不影响展示</option>
</select>
</td>
获取选中的值$("#mySelectInfoul").combotree("getText"),我这里需要的是文字所以是getText，如果是value可以改为getValues/getValue，一个是多选一个是单选。
王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat