(1)要实现的界面形式如下:
下面是jsp页面中的写法:
<!-- 下面是下拉框中含有复选框。要是能够传值,必须重写easyui——combox,用js添加复选框-->
<tr>
<td align="right">
<label class="Validform_label">
呵呵:
</label>
</td>
<td class="value">
<input id="category" name="category" style="width: 156px;" class="easyui-combobox" >
<!-- 下面是单纯的一个下拉框,没有复选框 。var="item"表示定义一个item变量,-->
<%--
<input id="category" name="hehe" url="xxxController.do?heheSelect"
style="width: 156px;" editable="false" class="easyui-combobox" multiple>
<select id="hehe" name="category" datatype="*">
<option></option>
<c:forEach items="${hehe}" var="item">
<option value="${item.code}">${item.name}</option>
</c:forEach>
</select>
--%>
<span class="Validform_checktip">*</span>
<label class="Validform_label" style="display: none;">呵呵</label>
</td>
</tr>
在同一个jsp页面中对这个复选框进行传值:
$(function(){
//初始化多选复选框
initCombobox('category');//这是品类的id,
});
//参数:id 控件id
function initCombobox(id){
var value = "";
//加载下拉框复选框
$('#'+id).combobox({
url:'xxxController.do?heheSelect', //后台获取下拉框数据的url
method:'post',
panelHeight:200,//设置为固定高度,combobox出现竖直滚动条
valueField:'value',
textField:'text',
multiple:true,
formatter: function (row) { //formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法
var opts = $(this).combobox('options');
debugger;//这是在debug模式下的时候运行到这里后就会出现
return '<input type="checkbox" name = "'+row[opts.valueField]+'" class="combobox-checkbox">' + row[opts.textField]
},
onLoadSuccess: function () { //下拉框数据加载成功调用
var opts = $(this).combobox('options');
var target = this;
var values = $(target).combobox('getValues');//获取选中的值的values
$.map(values, function (value) {
var el = opts.finder.getEl(target, value);
el.find('input.combobox-checkbox')._propAttr('checked', true);
})
},
onSelect: function (row) { //选中一个选项时调用
var opts = $(this).combobox('options');
//获取选中的值的values
$("#"+id).val($(this).combobox('getValues'));
//设置选中值所对应的复选框为选中状态
$("input[name='" + row[opts.valueField] + "']").attr("checked", true);
},
onUnselect: function (row) {//不选中一个选项时调用
var opts = $(this).combobox('options');
//获取选中的值的values
$("#"+id).val($(this).combobox('getValues'));
//取消选中值岁对应的复选框选中状态
$("input[name='" + row[opts.valueField] + "']").attr("checked", false)
}
});
}
上述代码中的URL地址,表示在xxxController中有xxxSelect的相关方法来获取下拉框中的值。