ligerui combobox ajax,LigerUI中使用ligerComboBox生成多选下拉框
一 下拉框的数据源由后台生成
(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生成多选下拉框相关推荐
- ajax 下拉框 保留,Ajax生成select级联下拉框和清空多余选项
Ajax生成select级联下拉框和清空多余选项 实现效果 function professionType(){ var obj=document.getElementById("下拉框id ...
- bootstrap3中select2的默认值和下拉框的禁用
bootstrap3中select2的默认值和下拉框的禁用 最近做项目用到了select2插件,需求中需要给下拉框设置默认值之后,禁用下拉框,我开始的写法是这样的 <script type=&q ...
- Thinkphp5中使用PhpSpreadsheet实现excel特定下拉框联动模板的生成
前言: 最近有遇到过这样的项目需求,需要导出 excel 模板的时候在模板中内置好需要联动的下拉框选择功能,这样在进行excel填写的时候可以进行选择内置的内容. 这里就是进行联动选择的,省.市.区三 ...
- html中下拉列表监听事件,ExtJS 下拉框监听事件、日期选择器监听事件、实现动态给items添加删除数据...
本文将为您描述ExtJS 下拉框监听事件.日期选择器监听事件.实现动态给items添加删除数据,具体实现方法: 1.下拉框 下拉框选择时,触发事件的方法: 在 Ext.form.ComboBox 组件 ...
- Android中自定义xml文件给Spinner下拉框赋值并获取下拉选中的值
场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...
- elementui中多选下拉框 multiple属性时 编辑表单如何显示默认值问题解决 以及校验验证问题
首先 这是点击编辑以后 期待的样子 但是使用过程中出现了不现实的问题 之后找到了问题所在 这个下拉框的value是这种样子的[1,2,3,4] 给到数据库的时候我给他去掉了中括号变成了字符串就是这样子 ...
- ligerui combobox ajax,ligerui给ligerForm中的ligerComboBox添加事件
当通过ligerForm的fields配置类型为select的combobox时,给options配置tree中添加相关事件,如onSelect,这样是无法触发事件的.因为通过ligerForm来配置 ...
- 选下拉框的的值对应上传相应的图片_如何在excel中实现,选择下拉菜单某一项,该表格中就出现选项对应的数据?(excel表格制作选择数据)...
怎样从多个excel表格中提取数据,做数据分析图呢 1. 数据的.录入.表格的设置,效果如示. 2.如图所示,选进行分析的图据范围 3.如图所示,点击菜单栏目上的"插入",选择&q ...
- 选下拉框的的值对应上传相应的图片_excel表格下拉菜单调用对应数据,如何在excel中实现,选择下拉菜单某一项,该表格中就出现选项对应的数据?...
如何在excel中实现,选择下拉菜单某一项,该表格中就出现选项对应的数据? 选中这几列 打开菜单"数据"-"筛选"-"自动筛选"就是了. 另 ...
- JQuery从Excel表中获取数据添加到select下拉框多选的实现
JS代码如下 function importf(excel) {var perids = [];//for循环遍历Excel表中的数据,取出需要的列for(var i = 0 ; i < exc ...
最新文章
- ACCESS数据库防止下载
- mysql与access数据库_mysql数据库和access数据库有什么不同吗?
- 国内做事就要高调——财富人生:邹果庆:中国新蛋网总裁
- 启动nuxt项目fsevents报错
- 做外挂小记(3)--C#调用读写内存类篇
- 分隔线演练-增加多行分隔线函数的参数
- mysql8 修改权限_MySQL8修改重置root密码,远程连接权限设置
- shiro学习(3):用户权限
- 上厕所时间超长也能被开除?法院:超出正常生理需求范围!
- 用jquery动态添加form表单
- bootstrap datetimepicker 复选可删除,可规定指定日期不可选
- 2018-2019-2 20165312《网络攻防技术》Exp7 网络欺诈防范
- Python的类成员函数、静态函数和成员的函数的比较
- 数据结构—二叉树的遍历
- 数据结构-阶段性理解
- matlab求解pde,matlab求解pde问题
- 正则表达式行尾行首添加字符
- httpclient实现模拟登陆126邮箱
- 2021-04-26 PNP三极管
- 在华为公司的项目总结
热门文章
- 【3D目标检测】PV-RCNN:Point-Voxel Feature Set Abstraction for 3D Object Detection
- 【论文】Learning by Abstraction: The Neural State Machine
- halcon入门之_提取遥控器字符并且写入txt文本
- ctfshow-WEB-web2
- 米家机器人连接不上了怎么重置_米家扫地机器人wifi连接不上怎么办(小米扫地机器人重置wifi怎么链接)...
- 军火库(第一期):无线电硬件安全大牛都用哪些利器?
- K-mer频率分布图代码实现
- Android权限Uri.parse的详细资料
- onkeyup+onafterpaste
- 从原理上搞懂编码——究竟什么是编码?什么是解码?什么是字节流?