使用easyui所遇到的问题

1. easyui页面一打开的时候出现短暂混乱的问题

在布局用到easyui的时候总会出现一个问题。就是在一进入主界面的时候，页面的并不是马上就展现，而是会有一个混乱的过程，之后一闪就又好了。其实这个就是因为easyui是在dom载入完毕之后才会对整个页面进行解析

 

解决方法：要解决这个问题其实只要好好利用这个onComplete 事件在结合一个载入遮罩就解决问题了。

在body下面第一行加入一个载入提示遮罩div，<div id='Loading' style="position:absolute;z-index:1000;top:0px;left:0px;width:100%;height:100%;background:#DDDDDB url('style/images/bodybg.jpg');text-align:center;padding-top: 20%;"><h1><image src='style/images/loading.gif'/><font color="#15428B">加载中···</font></h1></div>  

加入一段js：function closes(){

        $("#Loading").fadeOut("normal",function(){

               $(this).remove();

        });

}

var pc;

$.parser.onComplete = function(){

        if(pc) clearTimeout(pc);

        pc = setTimeout(closes,1000);

}

2. 弹出框在控件之上，被控件遮挡问题

项目中多次地方有视频控件，根据需求需要在控件的上方弹出弹出框，由于层级问题，弹出框被控件遮挡

 

解决方法：就在遮罩生成后用jquery选中遮罩的元素，渲染一个宽度高度都100%的iframe，于是在遮罩窗口弹出后执行

$(".window-mask").append("<iframestyle=\"position: absolute; z-index: -1; width: 100%; height: 100%; top:0;left:0;scrolling:no;\"frameborder=\"0\"></iframe>");

3. Easyui重复请求2次的问题

项目中会经常遇到对表格和下拉框等数据渲染，调试发现有时会出现重复请求2次的问题，错误代码：<table id=”id-table” class=”easyui-datagrid”url=”/driver/driver/list”toolbar=”#tb”></table>

Js代码：$(“#id-table”).datagrid({

   

});

html加载的时候回请求url加载数据，紧接着js执行代码的时候，又给datagrid绑定事件的时候，datagrid又会去请求一次数据源，导致请求2次的问题；

 

解决方法：html代码不要设置url属性，在绑定datagrid事件的时候，设置url属性值

4.  表单验证，可以封装成组件以便使用

项目中多处用到表单验证，可以将常用的表单验证写到公共的js中，方便大家的使用以及后期的维护

 

解决方法：可视化运维平台项目中将公共的验证方法放置到commonValidate.js

5.  easyui中下拉树的onLoadSuccess事件

项目中经常会遇到输入框里面放置一个下拉树，查询的时候将树上跟节点传给后台，如果在onLoadSuccess事件中写入查询事件的话，异步树每次展开节点都会调用查询事件，这显然不是我们想要的结果

 

解决方法：定义一个变量,通过变量来判断eg:var _flag=true;if(_flag){

    search();

    _flag=false;

}

6.查询条件下分页应该处于第一页

在项目开发过程中，根据查询条件查询数据时应将表格分页置于第一页

 

解决方法：查询条件之前加上一下两句话即可将分页置于第一页

varopts=$("#abnormalInfoDg").datagrid("options");
opts.pageNumber=1;

7.遮罩层的加载

Easyui中表格有默认的蒙版，但是大多数情况下由于数据量庞大，等待时间较长，多数是没有蒙版的

 

解决方法：添加js逻辑处理，代码如下

$("<div class=\"datagrid-mask\"></div>").css({
    display: "block",
    position: "absolute",
    width: "100%",
    height: "100%"
}).appendTo("#Loading");
$("<div class=\"loading\"></div>").html("").css({
    position: "relative",
}).appendTo("#Loading").css({display: "block"});