下拉框中可以实现复选框

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



猜你喜欢

转载自blog.csdn.net/qq_26925297/article/details/80255826