1. 程式人生 > >下拉框中可以實現複選框

下拉框中可以實現複選框

(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的相關方法來獲取下拉框中的值。