easyui-combobox用法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/dongyuxu342719/article/details/78647144
以省份下拉框为例,两种写法,第一种设置默认值有问题,推荐第二种。
1)第一种方法

HTML代码:

<th>省份</th>
<td>
	<select class="easyui-combobox" id="provinceList" name="provinceList" style="width:200px;" >
	</select>
</td>
js代码:

//后台查询省份数据,以键值对列表的json形式返回
//查询条件,多选
//打开页面时在$(function(){}方法中调用findProvinceList()方法初始化省份列表
function findProvinceList()
	{
		$('#provinceList').empty();
		$('#provinceList').combobox({
      type: "POST",
      url: "${ctx}/jsp/province/findprovinceList.action",
      valueField:'provinceId',
      textField:'provinceNm',
      multiple:true, //设置为多选框
      onLoadSuccess: function () { 
          var val = $(this).combobox("getData");//获取加载的数据
          //循环列表第一行的键值对
          for (var item in val[0]){
            if (item == "provinceId"){
            //设置默认值为列表第一个
              $(this).combobox("select", val[0][item]);
            }
          }
        }
	    });
	}
java代码:

/**
 * 初始化省份下拉列表
 */
@RequestMapping("/findProvinceList")
public void findProvinceList(Map<String, Object> paraMap){
		//查询后台数据
    List<Object[]> rdataList=provinceService.findProvinceList(paraMap);
    JSONObject json = new JSONObject();
    JSONArray array = new JSONArray();
    //默认值
    json.put("cityId", "");
    json.put("cityNm", "全国");
    array.add(json);
    for (Object[] objects:rdataList)
    {
        json.put("provinceId", objects[0]);
        json.put("provinceNm", objects[1]);
        array.add(json);
    }
    try
    {
        //System.out.println(array);
        //System.out.println(JSON.toJSONString(array));
        //返回json数据到前台
        response.getWriter().write(array.toString());
    }
    catch (IOException e)
    {
        e.printStackTrace();
    }  
}
2)第二种方法
html代码:

<th width="5%">省份</th>
<td width="15%" align="left">
	<select class="easyui-combobox" id=cityIdSelect name="cityIdSelect" data-options="multiple:true,multiline:true" style="width:200px;">
		<c:forEach items="${cityList}" var="citys" varStatus="status">
			<option value="${citys.cityId}">${citys.cityNm}</option>
		</c:forEach>
	</select>
</td>
js代码:
//直接获取选择的省份id作为查询条件查询业务数据
var provinceIds = $("#provinceList").combobox('getValues')+"";
java代码:
/**
 * 打开查询功能页面,在页面打开之前先查询后台省份数据通过ModelMap直接带到前台
 * @return
 */
@RequestMapping("/initQueryList")

public String initQueryList(ModelMap modelMap)
{   
    //打开页面之前查询省份,初始化省份列表
    Map<String, Object> paraMap = new HashMap<String, Object>();
    List<Object[]> rdataList=provinceService.findProvinceList(paraMap);
    //存储省份键值对列表的容器
    List<Map<String, Object>> provinceList = new ArrayList<Map<String, Object>>();
    //存储省份键值对的临时容器
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("cityId", "");
    map.put("cityNm", "全省");
    cityList.add(map);
    for (Object[] objects:rdataList)
    {
        map = new HashMap<String, Object>();
        map.put("cityId", objects[0]);
        map.put("cityNm", objects[1]);
        cityList.add(map);
    }
    //放入ModelMap中,前台获取
    modelMap.put("provinceList", provinceList);
    return "/page/queryData/province_List";
}

没有更多推荐了,返回首页