easyui--form load 异步变同步

    ajax异步变同步,很容易的,不难,只需要加一句async:false,就行了.关键是想到要这么改,以及想到可以这么改jquery.easyui的源码.

显示图片

    有这么个功能,在一个Form中显示后台Json串中的数据.用form('load',url),就可以将值一一对应的放到文本框中.

$(function() {
       $('#ff').form('load',${pageContext.request.contextPath}/queryPersonal');
}

    就是这样,其中ff就是form的id.

    但是问题是,里面有一个数据是图片的名称,需要根据名称,获取图片.当初做的时候,是将图片的名称放在一个隐藏域中,然后在form load方法之后,写上拼凑图片完整路径的方法.

//加载图片
function myfun() {
     var picture = $('#picture').val();
     $('#uploadImage').attr("src","..${pageContext.request.contextPath}/" + picture);
}

    而#picture,就是隐藏域的id.

<input type="hidden" id="picture" name="picture" />

    其中uploadImage就是图片.

<img id="uploadImage" name="picture" src="" style="width: 200px; height: 180px;" />

    但是后来发现有的时候能显示,有的时候则不能.

    这是因为form load填充数据的方法是异步加载的,他执行完form load之后,也不管数据是否返回,就会立马执行后面的拼凑图片路径的方法.那么若执行的快,拿到数据还好;若数据还没加载到picture隐藏域上,那么拼凑的路径铁定就不对了,显示不出图片.

    当时知道是这个问题,但是只想着怎么修改这句, $('#ff').form('load',${pageContext.request.contextPath}/queryPersonal');看看能不能有个callback,在有返回值之后,再执行加载图片的方法,后来发现,没有.也想过,把这个代码改成$.ajax(),这样就可以修改异步为同步,但是后来觉得form('load'这个功能太强大了,我自己改不了这么好.还想过,用监听器,只要picture的隐藏域中值,就开始执行加载图片的方法,后来也不了了之.

     所以,最后弄了个折中的方法,就是延时加载.也就是setTimeout,延时1秒钟执行,差不多就能返回异步加载完了,但是这也看运气.

if (document.addEventListener) {
      setTimeout(function() {
	    window.addEventListener("load", myfun(), false);
	}, 1000);
  } else if (window.attachEvent) {
      setTimeout(function() {
	  window.attachEvent("onload", myfun());
	}, 1000);
}

    这些方法都不好,最后,打开jquery.easyui.min.js文件,找到load方法,在$.ajax中添加上async:false.现在,就可以解决了.

<pre name="code" class="javascript"><pre name="code" class="javascript">function load(_4b7,data){
var opts=$.data(_4b7,"form").options;
if(typeof data=="string"){
var _4b8={};
if(opts.onBeforeLoad.call(_4b7,_4b8)==false){
return;
}
$.ajax({url:data,async:false,data:_4b8,dataType:"json",success:function(data){
_4b9(data);
},error:function(){
opts.onLoadError.apply(_4b7,arguments);
}});
}else{
_4b9(data);
}

    其实,我以前也遇到过这种问题,每次遇到都觉得很难办,一般最后就是用延时来解决,现在想来为什么以前从来没有想到可以去改源码,主要是看的源码太少,完全没往源码上想.这次也是因为查资料的时候,发现有人改源码,才发现原来form load中用的也是ajax,我完全可以把他改成同步的.只是,这个改的话,影响挺大的,只要用到form load的地方就都是同步了.也不知道还是否有其他更好的解决方法.

显示文本

    还有一个类似的,其实功能很简单,只是显示一句话,"**恭喜您,成为***的一员",这样的信息,只是**和***是从后来加载过来的.但是,问题困难在label不能绑定数据,不能像input这样,绑定字段,获取值.当然,当时加载数据用的也是form load异步加载.所以,就用了input,但是用input的话,会有长度的问题,编辑问题,以及边框样式的问题.

<input name="name" style="color: red; font-size: 40px; margin-top: 60px; text-align: center;"
readonly="true">

    就是这样的效果,

    所以用了border:none,去掉边框;编辑问题,改为readonly为true;长度用了一个js来控制,在执行完form load之后,执行.

<pre name="code" class="javascript">//调节input的size大小
$("input").each(function(i) {
	var input_size = $(this).val().length;
	this.size = input_size * 2;
});

    异步加载,会有什么问题,就是这个长度,也是时而长,时而短.现在用了同步,不仅解决了上面的问题,并且还可以采用更好,更简单的方式来显示数据.

    以前代码是这么写的.(在同步的基础上)

<div id="content" style="color: blue; font-size: 40px; margin-top: 60px; text-align: center">
      <input name="name" style="color: red; font-size: 40px; margin-top: 60px; text-align: center;"
readonly="true"> 恭喜您，成为<input name="schoolName" style="color: red; font-size: 40px; margin-top: 60px; text-align: center;" readonly="true">的一员!
</div>

    Js是这样的

//窗体加载的时候查询数据
$(function() {
    $('#ff').form('load','${pageContext.request.contextPath}/queryPersonal');	 
	$("input").each(function(i) {
	   var input_size = $(this).val().length;
	   this.size = input_size * 2;
	});
 });

    效果是这样的,长度还是有的.

    而现在代码则是,

<pre name="code" class="javascript">//窗体加载的时候查询数据
$(function() {
      $('#ff').form('load','${pageContext.request.contextPath}/queryPersonal');
      var name= $("input[name^='name']").val();
      var schoolName=$("input[name^='schoolName']").val();
      $("#content").append(name+"恭喜您，成为"+schoolName+"的一员");
 });
	 
<div id="content" style="color: blue; font-size: 40px; margin-top: 60px; text-align: center">
    <input name="name" type="hidden"/>
    <input name="schoolName" type="hidden"/>

</div>

    则现在的效果是这样的,完全不用担心长度的问题了,这就已经是一段文本了.

    之前用异步,这种都需要考虑文本框获取到值,设置才有意义,现在是同步,只有加载完了值,才会执行绑定数据,完全不用担心.

    以上,就是我遇到的问题,导致我将easyui form load从异步改为同步,我的问题是解决了,只是私心觉得这个改是否还有其他问题,这么做是否合理,是否还有其他更好的方式可以解决这种问题,希望大牛可以指点.