<input class="easyui-combobox" id="projectId" name="projectId" value="" data-options="valueField:'projectId',textField:'projectName', onShowPanel:showPanel<%--,events:{blur:proCondBlurFun}--%>" url="${pageContext.request.contextPath}/project/selProjectIdAndName" prompt="输入关键字搜索" <%--hasDownArrow="false"--%> panelHeight="auto" style="width: 260px;"/>
$('#projectId').combobox({
url:"<%=request.getContextPath()%>/project/selProjectIdAndName",
editable:false,
cache: false,
panelHeight: 'auto',
valueField:'projectId',
textField:'projectName'
});
combobox不访问后台,直接赋值:(必须是value和text)
<input id="status" class="easyui-combobox" editable="false" name="flag" value="" panelHeight="auto" data-options="valueField:'value',textField:'text',data:[{value:'',text:'请选择'},{value:'0',text:'待确认'},{value:'1',text:'已确认'}]" style="width: 100px;" />
不可编辑:editable="false"
无滚动条:panelHeight="auto"
1. 设置下拉列表选项少时无滚动条,自适应高度;选项多时,添加滚动条:
onShowPanel:showPanel
function showPanel()
{
var v = $(this).combobox('panel')[0].childElementCount;
if (v <= 10) {
$(this).combobox('panel').height('auto');
} else {
$(this).combobox('panel').height(200);
}
}
2.disable & readonly
都可以使下拉列表不可修改;但disable不会向后台提交该数据,而readonly则可以提交。
$('#userId').combobox({disabled:true});
$('#userId').combobox('select', '${sessionScope.userInfo.userId}');
如果只是不可修改,但需要提交已默认选中的值(一般在权限中使用,某些资源只能查询有关自己的):
$('#userId').combobox({readonly:true});
$('#userId').combobox('select', '${sessionScope.userInfo.userId}');
注意:上面的语句顺序不能反,反了就显示不出选中的值了,即使是readonly,也不会提交到后台。
3. 取值 & 赋值 & 清空
取值:
$('#userId').combobox('getValue')//取ID或者key(传递到后台的值)
$('#userId').combobox('getText')//取name(页面显示的内容)
赋值:
$('#userId').combobox('select', '7');
清空选中的值:
$("#userId").combobox('clear');//清除选中值,列表仍存在
清空option:
$("#userId").combobox('loadData', {});//这种情况限制于关联下拉,由上一级下拉框选择的值决定这个下拉框的内容。
或
$('#areaDistrict').combobox('loadData', []);
或
$('#areaDistrict').combobox('loadData', [{typeValue:' ', type:' '}]);
4. 增改查页面都有相同字段的查询,由 在每个input中设置url发起查询 改为 加载在页面function方法中使用ajax发起查询,再将data加载到每个元素中。
原来:
<input class="easyui-combobox" id="orgName" name="orgId" value="" data-options="valueField:'orgId',textField:'orgName', onShowPanel:showPanel" url="${pageContext.request.contextPath}/organcode/selOrgIdAndOrgName" style="width: 120px;"/>
<input class="easyui-combobox" id="crtorgId" name="coOrganId" value="" data-options="valueField:'orgId',textField:'orgName', onShowPanel:showPanel,required:true" url="${pageContext.request.contextPath}/organcode/selOrgIdAndOrgName" panelHeight="auto" style="width: 300px;"/>
<input class="easyui-combobox" id="uptorgId" name="coOrganId" value="" data-options="valueField:'orgId',textField:'orgName', onShowPanel:showPanel,required:true" url="${pageContext.request.contextPath}/organcode/selOrgIdAndOrgName" panelHeight="auto" style="width: 300px;"/>
改为:
$.ajax({
async:true,
url:'${pageContext.request.contextPath}/organcode/selOrgIdAndOrgName',
type:'post',
dataType:'json',
success:function(data){
$("#orgName").combobox("loadData",data);
$("#crtorgId").combobox("loadData",data);
$("#uptorgId").combobox("loadData",data);
},
error:function(data){
$.messager.alert('提示','获取【机构信息】失败,请重试!','error');
}
});