在使用easyui-combogrid時,由於html解析出的格式是如下三層:
<td>
<input id="txcombo" class="easyui-combogrid combogrid-f combo-f" value="" style="width: 200px; height: 28px; display: none;" comboname="tx">
<span class="combo" style="width: 198px; height: 26px;">
<input type="text" class="combo-text validatebox-text validatebox-invalid" autocomplete="off" readonly="readonly" title="" style="cursor: pointer; width: 176px; height: 26px; line-height: 26px;">
<span>
<span class="combo-arrow" style="height: 26px;">
</span>
</span>
<input type="hidden" class="combo-value" name="tx" value=""></span>
</td>
注意到最外層的display:none,所以直接在樣式中添加required="required"是不起作用的娥,而真正提交的input卻是hidden。
第一層是一個display:none的下拉數據表格框;
第二層是一個validate-box,驗證框;
第三層是一個顯示屬性為hidden,隱藏的文本框。
選擇一項下拉值后發現,第一層的value,值為空,第三層的文本框值卻不為空。那么問題就出現在第一層,因為它自動解析了一個display:none,同時我又在頁面添加了必填屬性,required:true,但是它又沒有拿到值,所以就是那個報錯的原因:一個隱藏的必填項為空。
前台html代碼是自動解析的,無法更改,也就意味着無法去掉display:none屬性,那么只能去掉必填屬性,required:true.但是需求中又明確要求必填,那么只能在js中試試,是否能夠識別必填屬性:
/*********下拉數據表格*******/
$('#tx').combogrid({
panelWidth: 700,
panelHeight:500,
idField: 'value',
textField: 'value',
url:'getTx.do',
method: 'post',
fit: false,
fitColumns: false,
required: true,
editable:false,
columns: [[
{field:'value',title:'value'},
{field:'note',title:'note',align:'left'}
]],
onLoadSuccess:function(){ //修改頁加載表格數據
$('#tx').combogrid('setValue', '${dto.tx}');
}
}
});
測試發現,無論是否有值,都會提示必填。這說明必填屬性起作用了,但是這個框沒有拿到值。那么此時的隱藏項就只剩下最后一層了,那個type=”hidden”的文本框,這樣問題就簡單多了,在下拉框選中值之后,將下拉框的值手動賦給這個文本框:
/*********下拉數據表格*******/
$('#tx').combogrid({
panelWidth: 700,
panelHeight:500,
idField: 'value',
textField: 'value',
url:'getTx.do',
method: 'post',
fit: false,
fitColumns: false,
required: true,
editable:false,
columns: [[
{field:'value',title:'value'},
{field:'note',title:'note',align:'left'}
]],
onLoadSuccess:function(){ //修改頁加載表格數據
$('#tx').combogrid('setValue', '${dto.tx}');
},
onClickRow:function(index,row){
$('#tx').val(row.value); //下拉數據表格的第一層的input框賦值,否則不能作為必填項提交
}
}
});
注意到此處的方法onClickRow:function(index,row)是數據表格的方法,那么easyui-combogrid繼承自easyui-datagrid和easyui-combo,它同時也繼承了datagrid和combo的方法,所以此處可以直接用。