开局附上最最最有用的官方文档。
划重点⚠️:easyui使用手册
进入正题--------------------------------------------------------------------------------------------------------------------------------------------------------------
现象:
有这样一段代码,浏览器请求getSystemSignList方法有返回数据并且严格符合easyui的应答规范--一个json格式的list对象。
<tr>
<td class="FormdataL">系统标识:</td>
<td width="400px">
<input class="easyui-combobox" style="width:110px;" id="systemSign"
name="systemSign" editable="false" url="${pageContext.request.contextPath}/dictionary/dictionary!getSystemSignList.action" valueField="itemCode" textField="itemName" disabled="true">
</td>
</tr>
现象是textField不显示查出来的值。显示的是个0. 于是进入一脸懵逼的状态。。。。。。
valueField:基础数据值名称绑定到Combobox(提交值)
textField:基础数据的字段名称绑定的Combobox(显示值)
排查:
首先确定就是页面展示的问题了,因为浏览器请求的response结果是符合要求的,但是为什么展示不出来呢?
首先看哪里有没有对id="systemSign" 做了改变。果不其然有如下一行代码:
$(document).ready(function(){
$('#systemSign').combobox('select', '${systemSign}');
});
一直不理解这是什么意思,感觉并没有什么操作呀,奇奇怪怪。
官方文档这么回应:
可能觉得太简单?不屑于过多的解释?反正就是你现在看到的这么可怜的一句话。
那就只能我去翻译一下啦
用法实例:$('#customerStatusList').combobox('select', '1');
解释:id="customerStatusList"的输入框,指定value=1的对象,显示的内容都是此对象的内容。
这样一来,一切都解释通了。
首先getSystemSignList方法会查询很多个对象组成的一个list,那么显示的的话需要选择其中的一个对象,一般我们会想遍历,但是这个框架就是这么的便捷,你不需要遍历,你只需要指定value是哪个,它自动给你选出来这个对象,然后自然他的值随你处置。
页面加载完成,就将id=systemSign的框进行指定对象,指定value对应的对象,进行展示。
为了方便理解,下面是实例版:
如果请求应答结果是
[{
"id":1,
"text":"text1"
},{
"id":2,
"text":"text2"
},{
"id":3,
"text":"text3",
"selected":true
},{
"id":4,
"text":"text4"
},{
"id":5,
"text":"text5"
}]
那么可以通过以下两种方法指定默认值:
$('#customerStatusList').combobox('select', '1');//选择id=1的对象text
或者
$("#customerStatusList").combobox("setValue",1);//选择id=1的对象text
设计借鉴:
有一个查询列表的方法很多地方都用到了,有的用所有的,有的用其中的一个,那就非常合适用easyui的这个。
用所有的就不必说了,用其中的一个的,只需要指定value就可以选择啦。非常方便。