下拉框中可以實現複選框
阿新 • • 發佈:2018-12-31
(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的相關方法來獲取下拉框中的值。