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)测试：

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