simplejf


EasyUI异步下拉地域树实现

<p>此文的描述通过EasyUI中combotree组件完成下拉异步地域树实现。</p> <h5>下拉表单HTML</h5> <p>其中<code>#(user.region_code??)</code>表示修改地域信息时,默认回显的地域code值</p> <pre><code class="language-html">&lt;div class="form-group"&gt; &lt;label class="col-sm-3 control-label"&gt;所在地域:&lt;/label&gt; &lt;div class="col-sm-8"&gt; &lt;input type="text" id="user_region_code" class="ftext" name="user.region_code" value="#(user.region_code??)"&gt; &lt;/div&gt; &lt;/div&gt;</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>

页面列表

ITEM_HTML