解决方案,找了下资料,加一个遮罩层,提升用户体验。

<script type="text/javascript">
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight; var html = "<div id='loading' style='position:absolute;left:0;width:100%;height:" + height + "px;top:0;background:#E0ECFF;opacity:1;filter:alpha(opacity=100);'>";
//html += "<div style='position:absolute;cursor1:wait;left:" + ((width / 2) - 75) + "px;top:200px;width:150px;height:16px;padding:12px 5px 10px 30px;";
//html += "background:#fff url(../themes/default/images/loading.gif) no-repeat scroll 5px 10px;border:2px solid #ccc;color:#000;'>";
//html += "正在加载,请等待...";
//html += "</div>";
html += "</div>"; window.onload = function () {
var mask = document.getElementById('loading');
mask.parentNode.removeChild(mask);
};
document.write(html);
document.write(html);
</script>
//获取浏览器页面可见高度和宽度
var height = document.documentElement.clientHeight,
width = document.documentElement.clientWidth; //在页面未加载完毕之前显示的loading Html自定义内容
var html = "<div id='loading' style='position:absolute;left:0;width:100%;height:" + height + "px;top:0;background:#E0ECFF;opacity:1;filter:alpha(opacity=100);'>";
html += "</div>";
//呈现loading效果
document.write(html); //监听加载状态改变
document.onreadystatechange = completeLoading; //加载状态为complete时移除loading效果
function completeLoading() {
if (document.readyState == "complete") {
var loadingMask = document.getElementById('loadingDiv');
loadingMask.parentNode.removeChild(loadingMask);
}
}

easyui datagrid JS加载样式 表头乱的更多相关文章

  1. easyui datagrid 动态加载数据 渲染问题,表格错位问题

    $('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {fie ...

  2. easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题

    在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...

  3. EasyUI datagrid 动态加载表头和数据

    首先返回到页面的需要是JSON数据: 第一步: 遍历表头,插入到array中 for (var i = 0; i < jsonObj.title.length; i++) { //把返回的数据封 ...

  4. EasyUI datagrid easyui datagrid +dialog 加载 可直接运行 七

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  5. easyui datagrid onLoadSuccess加载两次。。

    今天使用EasyUI的datagrid时发现首次打开页面时onLoadSuccess方法执行了两次.后来发现主要问题是datagrid被初始化了两次.主要原因是一开始html中声明了dg为easyui ...

  6. jquery easyui datagrid 远程加载数据----javascript法

    jquery easyui有三种办法生成datagrid(数据网格),本篇专门讨论javascript借助jquey easy ui实现的方式 html部分 <main role="m ...

  7. EasyUI datagrid动态加载json数据

    最近做一个项目,要求是两张张表可能查找出10多种不同的结果集. 如果想只用一个表格就把全部的结果不同的显示出来那么就肯定不同使用固定的字段名字,要通过动态加载后台返回来的数据把它显示出来就必须动态加载 ...

  8. jquery easyui datagrid 动态 加载列

    实现方式: 首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid.从而实现类似or ...

  9. jquery easyui datagrid 远程加载数据----把主键渲染为值遇到的问题及解决方案

    起因:数据库中一些字段存的是代表具体值的数字,需要渲染为具体值 monggodb中的字典 mysql中存放的值为:expertin代表教练擅长的搏击技能 jquery easyui中的相关代码如下:用 ...

随机推荐

  1. SQL Server: create table sql script

    ---摇奖observeh数据库设计 Function getSpace lottery /* -- Author:geovindu 涂聚文 -- Date: 20180427 为了自写生成代码.根据 ...

  2. js 动态绑定事件 on click 完美解决绑定不成功

    动态绑定坑了多少人..... //绑定   $("ol").on("click","li a",function(){ ...   }) / ...

  3. Scoop及使用

    scoop window的命令行安装程序管理工具 通常我们下载软甲需要从网上搜索软件并下载安装等一系列复杂麻烦的过程 现在有了scoop 等一系列包管理器的诞生,就是省去了上述繁琐的搜索 - 下载 - ...

  4. 【工具相关】Web-Sublime Text2新建立文件夹(二)

    紧接着上文. 一,打开Sublime Text2. 二,在桌面上新建立一个文件夹,html5. 三,打开html5如图所示.里面有我们刚刚建立好的文件. 四,把html5文件夹拖动到sublime2中 ...

  5. “由于无法验证发行者,所以WINDOWS已经阻止此软件”的解决方法

    Vista 和 Windows7 系统都很注重系统的安全性,在提高安全性的同时,也给我们某些应用带来不便,例如需要安装插件或证书,可能会弹出“由于无法验证发行者,所以WINDOWS已经阻止此软件”的相 ...

  6. html基本标签(慕课网)

    html标签: 1.<q>标签,短文本引用(quote,引用) 注解:引用短文本,比如引用古人的一句话 ,注意引用的文本不需要再加双引号. <q>标签的真正关键点不是它的默认样 ...

  7. Flutter 布局(六)- SizedOverflowBox、Transform、CustomSingleChildLayout详解

    本文主要介绍Flutter布局中的SizedOverflowBox.Transform.CustomSingleChildLayout三种控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. ...

  8. Flutter 依赖的那些事儿

    Flutter 里面有2种库一样的东西, Package -creating a pure Dart component. like a new Widget. 这种是纯Dart,相当于你自己写的组件 ...

  9. Android之移动热修复

    阿里云推出了移动热修复服务,听说这个服务傻瓜式接入,性能相对较好,对新技术比较好奇的我决定尝试一下. 1.首先,需要开通这个服务,创建应用 2.然后,在项目中接入服务.按照文档所述 第一步:gradl ...

  10. 03-12_MBean层次结构

    本文重点: Mbeans层次结构与WLST关系介绍 WebLogic Mbeans的类型 weblogic服务器的MBeans生命周期             Mbeans层次结构与WLST关系介绍: ...