一 下拉框的数据源由后台生成
(1)前台jsp页面:
XHTML
:
1
2
3
4:
(2)jQuery中加载下拉框:
JavaScript
var listChannelUrl = _CONTEXT_PATH+”/refund/refundSearch/channel.json”;
$(function() {
$(“#pos”).ligerComboBox({ isShowCheckBox: true, isMultiSelect: true,
url: listChannelUrl,
textField:’text’,
valueField: ‘id’,
valueFieldID: ‘requestPos’
});
…
});
1
2
3
4
5
6
7
8
9
10
11varlistChannelUrl=_CONTEXT_PATH+”/refund/refundSearch/channel.json”;
$(function(){
$(“#pos”).ligerComboBox({isShowCheckBox:true,isMultiSelect:true,
url:listChannelUrl,
textField:’text’,
valueField:’id’,
valueFieldID:’requestPos’
});
…
});
(3)后台传递需要显示的下拉框数据源:
Java
/**
* 根据用户的渠道信息在退票审核和申请时显示可查询的渠道
* @return
*/
@RequestMapping(“/refund/refundSearch/channel.json”)
@ResponseBody
public JSONArray queryChannel(){
List> resultList = new ArrayList>();
UserBO user = AuthSessionContext.getUserBO();
String note = user.getStaff().getNote();//获取备注
if(StringUtils.isNoneBlank(note)){
List userPosList = Arrays.asList(note.split(“;”));
if(userPosList != null && userPosList.size() > 0){
for(String tmp : userPosList){
Map channel = new HashMap();
if(tmp.matches(“\\w+”)){
if(BusinessCode.B2M.getCode().equalsIgnoreCase(tmp)){
channel.put(“text”, “股份APP(旧)”);
channel.put(“id”, “B2M”);
resultList.add(channel);
}else if(BusinessCode.HUAPP.getCode().equalsIgnoreCase(tmp)){
channel.put(“text”, “股份APP(新)”);
channel.put(“id”, “HUAPP”);
resultList.add(channel);
}else if(BusinessCode.B2W.getCode().equalsIgnoreCase(tmp)){
channel.put(“text”, “新金鹏网站”);
channel.put(“id”, “B2W”);
resultList.add(channel);
}else if(BusinessCode.CC.getCode().equalsIgnoreCase(tmp)){
channel.put(“text”, “呼叫中心”);
channel.put(“id”, “CC”);
resultList.add(channel);
}else if(BusinessCode.HXWEB.getCode().equalsIgnoreCase(tmp)){
channel.put(“text”, “港行WEB”);
channel.put(“id”, “HXWEB”);
resultList.add(channel);
}else if(BusinessCode.HXAPP.getCode().equalsIgnoreCase(tmp)){
channel.put(“text”, “港行APP”);
channel.put(“id”, “HXAPP”);
resultList.add(channel);
}
}
}
}
}
return JSONArray.fromObject(resultList);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50/**
* 根据用户的渠道信息在退票审核和申请时显示可查询的渠道
* @return
*/
@RequestMapping(“/refund/refundSearch/channel.json”)
@ResponseBody
publicJSONArrayqueryChannel(){
List>resultList=newArrayList>();
UserBOuser=AuthSessionContext.getUserBO();
Stringnote=user.getStaff().getNote();//获取备注
if(StringUtils.isNoneBlank(note)){
ListuserPosList=Arrays.asList(note.split(“;”));
if(userPosList!=null&&userPosList.size()>0){
for(Stringtmp:userPosList){
Mapchannel=newHashMap();
if(tmp.matches(“\\w+”)){
if(BusinessCode.B2M.getCode().equalsIgnoreCase(tmp)){
channel.put(“text”,”股份APP(旧)”);
channel.put(“id”,”B2M”);
resultList.add(channel);
}elseif(BusinessCode.HUAPP.getCode().equalsIgnoreCase(tmp)){
channel.put(“text”,”股份APP(新)”);
channel.put(“id”,”HUAPP”);
resultList.add(channel);
}elseif(BusinessCode.B2W.getCode().equalsIgnoreCase(tmp)){
channel.put(“text”,”新金鹏网站”);
channel.put(“id”,”B2W”);
resultList.add(channel);
}elseif(BusinessCode.CC.getCode().equalsIgnoreCase(tmp)){
channel.put(“text”,”呼叫中心”);
channel.put(“id”,”CC”);
resultList.add(channel);
}elseif(BusinessCode.HXWEB.getCode().equalsIgnoreCase(tmp)){
channel.put(“text”,”港行WEB”);
channel.put(“id”,”HXWEB”);
resultList.add(channel);
}elseif(BusinessCode.HXAPP.getCode().equalsIgnoreCase(tmp)){
channel.put(“text”,”港行APP”);
channel.put(“id”,”HXAPP”);
resultList.add(channel);
}
}
}
}
}
returnJSONArray.fromObject(resultList);
}
(4)测试:
最后运行之后的效果是这样的:
可以发现,这里只加载了测试的用户能够查询的渠道选项。最后,当我们选中一些选项之后,其数据会出现在id为requestPos的输入框中,当我们提交表单的时候提交这个表单即可
二 下拉框显示所有选项,默认选中部分选项
如上所示,在配置一个用户的可查询的渠道时,这时候的下拉框需要显示所有的渠道信息,同时需要默认选中用户之前拥有的渠道查询信息
(1)JSP页面:
:
1
2
3
4
:
这里因为在加载页面时后台给id为note的输入框中传递了以分号隔开的数据,因此在后面生成下拉框之后就可以默认选中一部分信息了
(2)jQuery中加载下拉框:
JavaScript
$(“#pos”).ligerComboBox({ isShowCheckBox: true, isMultiSelect: true,
data: [
{ text: $.i18n.prop(“b.rfd.req.Pos.B2M”), id: ‘B2M’ },
{ text: $.i18n.prop(“b.rfd.req.Pos.HUAPP”), id: ‘HUAPP’ },
{ text: $.i18n.prop(“b.rfd.req.Pos.B2W”), id: ‘B2W’ },
{ text: $.i18n.prop(“b.rfd.req.Pos.CC”), id: ‘CC’ },
{ text: $.i18n.prop(“b.rfd.req.Pos.HXWEB”), id: ‘HXWEB’ },
{ text: $.i18n.prop(“b.rfd.req.Pos.HXAPP”), id: ‘HXAPP’ }
],
textField:’text’,
valueField: ‘id’,
valueFieldID: ‘note’
});
1
2
3
4
5
6
7
8
9
10
11
12
13$(“#pos”).ligerComboBox({isShowCheckBox:true,isMultiSelect:true,
data:[
{text:$.i18n.prop(“b.rfd.req.Pos.B2M”),id:’B2M’},
{text:$.i18n.prop(“b.rfd.req.Pos.HUAPP”),id:’HUAPP’},
{text:$.i18n.prop(“b.rfd.req.Pos.B2W”),id:’B2W’},
{text:$.i18n.prop(“b.rfd.req.Pos.CC”),id:’CC’},
{text:$.i18n.prop(“b.rfd.req.Pos.HXWEB”),id:’HXWEB’},
{text:$.i18n.prop(“b.rfd.req.Pos.HXAPP”),id:’HXAPP’}
],
textField:’text’,
valueField:’id’,
valueFieldID:’note’
});
(3)测试:
最后运行之后的效果是这样的:
今天的文章ligerui combobox ajax,LigerUI中使用ligerComboBox生成多选下拉框分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/25175.html