EasyUI异步下拉地域树实现
<p>此文的描述通过EasyUI中combotree组件完成下拉异步地域树实现。</p>
<h5>下拉表单HTML</h5>
<p>其中<code>#(user.region_code??)</code>表示修改地域信息时,默认回显的地域code值</p>
<pre><code class="language-html"><div class="form-group">
<label class="col-sm-3 control-label">所在地域:</label>
<div class="col-sm-8">
<input type="text" id="user_region_code" class="ftext" name="user.region_code" value="#(user.region_code??)">
</div>
</div></code></pre>
<h5>生成地域js</h5>
<p><strong>注:获取默认回显的值,由于地域树是异步结构,该值无法直接回显在页面中,需要进行处理。</strong>
url: 获取地域异步树形结构地址。</p>
<p>combotree 的setValue 方法有一段描述:如果id不在结果中,那么则用text中的值来显示在页面中。因为是异步的,id可能还未获取到,所以可以直接回显在页面中。</p>
<pre><code class="language-javascript">$(function(){
$("#user_region_code").combotree({
url:path + "/region/tree",
onLoadSuccess:function(node,data){
// 步骤1:获取页面回显地域code的详细信息
var region_code = $("#user_region_code").combotree("getValue");
var region = $.common.region(region_code);
// 步骤2:设置在下拉框中。
$("#user_region_code").combotree("setValue",{
id:region.r_code,
text:region.region_name_path
});
}
});
});</code></pre>