(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的相关方法来获取下拉框中的值。