EasyUi combobox下拉列表相当于html的select,对应关系valueField-->value;extField-->text。
1、一个简单的为combobox赋值的例子如下:
将平台数据提交的页面
//跳转到角色封禁页面
@RequestMapping(value = "/tolist")
public ModelAndView userMessageYeMian(){
List<Platform> platforms=platformService.selectPlatform(null);
return new ModelAndView("gm/mh/userManager/forbidAction").addObject("platforms", platforms);
}
<form action="exportUser.do" id="userMessageForm" method="post">
<table cellpadding="3" cellspacing="5">
<tr style="font-size: 13px;">
<td width="50" align="right"> 平台:</td>
<td align="left">
<select class="easyui-combobox" style="width:130px;" name="platformID" id="platformID">
<c:forEach items="${platforms}" var="platform">
<option value="${platform.platformId}" >${platform.platformName}</option>
</c:forEach>
</select>
</td>
<td width="50" align="right"> 服:</td>
<td align="left">
<select class="easyui-combobox" style="width:130px;" name="areaID" id="areaID" editable=false panelHeight="auto">
</select>
</td>
</tr>
</table>
</form>
$(document).ready(function(){
//在页面加载的时候根据平台号去后台查找平台下的服务器,然后默认选择第一向
var id= jQuery("#platformID option:selected").val();
if(id!=null && id !=""){
$('#areaID').combobox({
url:"./getserver.do?platformId="+id,
valueField:'serverid',
textField:'serverName' ,
onLoadSuccess:function(){
//加载完成后,设置选中第一项
var val = $(this).combobox("getData");
for (var item in val[0]) {
if (item == "serverid") {
$(this).combobox("select", val[0][item]);
}
}
}
});
}
//根据平台获得服务数据(二级联查)
//当重新选择平台后重新设置服务器
$('#platformID').combobox({
onSelect:function(newValue, oldValue){
var platformId = $('input[name=platformID]').val();
server.combobox({
disabled: false,
url:"./getserver.do?platformId="+platformId,
valueField: 'serverid',
textField: 'serverName'
}).combobox('clear');
}
});
var server = $('#areaID').combobox({
valueField:'serverid',
textField:'serverName',
editable:false
});
});
//根据平台查询服
@RequestMapping(value="/getserver",method=RequestMethod.POST)
@ResponseBody
public List<GameServer> getserver(HttpServletRequest request) throws Exception{
String platformId = request.getParameter("platformId") == "" ? null : request.getParameter("platformId"); //平台名称
Map<String,Object> params = new HashMap<String,Object>();
params.put("platformId", platformId);
List<GameServer> servers = gameServerService.getServerByGameId(params);
return servers;
}
2、提高例子
$(document).ready(function(){
//根据游戏、平台获得服务数据(二级联)
$('#platform').combobox({
onSelect:function(newValue, oldValue){
var gameId = $('input[name=gameId]').val();
var platform = $('input[name=platform]').val();
$('#serverId').combobox({
disabled: false,
url:"./getserver.do?gameId="+gameId+"&platform="+platform,
valueField: 'serverid',
textField: 'serverName',
//加载成功后,设置默认选择第一项
onLoadSuccess:function(){
var data = $('#serverId').combobox('getData');
if(data.length > 0){
$("#serverId").combobox('setValue',data[0].serverId);
}
}
}).combobox('clear');
}
});
$('#serverId').combobox({
valueField:'serverId',
textField:'serverName',
editable:false
});
});
本文介绍了EasyUI中的Combobox组件,将其与HTML的select进行对比,并详细讲解了如何为Combobox设置值,包括valueField与textField的对应关系及其在实际应用中的示例。
883

被折叠的 条评论
为什么被折叠?



