ligerui combobox ajax,LigerUI中使用ligerComboBox生成多选下拉框

ligerui combobox ajax,LigerUI中使用ligerComboBox生成多选下拉框一下拉框的数据源由后台生成(1)前台jsp页面:XHTML:1234:(2)jQuery中加载下拉框:JavaScriptvarlistChannelUrl=_CONTEXT_PATH+”/refund/refundSearch/channel.json”;$(function(){$(“#pos”).ligerComboBox({isShowCheckBox:true,isMul…

一 下拉框的数据源由后台生成

(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)测试:

最后运行之后的效果是这样的:

9a4b19b2bbfa1e14b9f2135af79269b5.gif

可以发现,这里只加载了测试的用户能够查询的渠道选项。最后,当我们选中一些选项之后,其数据会出现在id为requestPos的输入框中,当我们提交表单的时候提交这个表单即可

9a4b19b2bbfa1e14b9f2135af79269b5.png

二 下拉框显示所有选项,默认选中部分选项

如上所示,在配置一个用户的可查询的渠道时,这时候的下拉框需要显示所有的渠道信息,同时需要默认选中用户之前拥有的渠道查询信息

(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)测试:

最后运行之后的效果是这样的:

9a4b19b2bbfa1e14b9f2135af79269b5.png

9a4b19b2bbfa1e14b9f2135af79269b5.png

今天的文章ligerui combobox ajax,LigerUI中使用ligerComboBox生成多选下拉框分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/25175.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注