easyui datagrid JS加载样式 表头乱
解决方案,找了下资料,加一个遮罩层,提升用户体验。
<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加载样式 表头乱的更多相关文章
- easyui datagrid 动态加载数据 渲染问题,表格错位问题
$('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {fie ...
- easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题
在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...
- EasyUI datagrid 动态加载表头和数据
首先返回到页面的需要是JSON数据: 第一步: 遍历表头,插入到array中 for (var i = 0; i < jsonObj.title.length; i++) { //把返回的数据封 ...
- EasyUI datagrid easyui datagrid +dialog 加载 可直接运行 七
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...
- easyui datagrid onLoadSuccess加载两次。。
今天使用EasyUI的datagrid时发现首次打开页面时onLoadSuccess方法执行了两次.后来发现主要问题是datagrid被初始化了两次.主要原因是一开始html中声明了dg为easyui ...
- jquery easyui datagrid 远程加载数据----javascript法
jquery easyui有三种办法生成datagrid(数据网格),本篇专门讨论javascript借助jquey easy ui实现的方式 html部分 <main role="m ...
- EasyUI datagrid动态加载json数据
最近做一个项目,要求是两张张表可能查找出10多种不同的结果集. 如果想只用一个表格就把全部的结果不同的显示出来那么就肯定不同使用固定的字段名字,要通过动态加载后台返回来的数据把它显示出来就必须动态加载 ...
- jquery easyui datagrid 动态 加载列
实现方式: 首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid.从而实现类似or ...
- jquery easyui datagrid 远程加载数据----把主键渲染为值遇到的问题及解决方案
起因:数据库中一些字段存的是代表具体值的数字,需要渲染为具体值 monggodb中的字典 mysql中存放的值为:expertin代表教练擅长的搏击技能 jquery easyui中的相关代码如下:用 ...
随机推荐
- ngx-echart地图
一.运行截图 二.代码 html代码: <div style="padding:24px;"> <p style="font-size: 16px;ma ...
- jquery之行自加自减
实现目标:点击按钮复制本行,修改后重新插入到本行后面,点击复制出的行可删除本行 代码如下: <!DOCTYPE html> <html lang="en"> ...
- sqoop简单配置与使用
sqoop(sql-to-hadoop) Apache Sqoop是用来实现结构型数据(如关系数据库)和Hadoop之间进行数据迁移的工具.它充分利用了MapReduce的并行特点以批处理的方式加快数 ...
- 自定义控件详解(三):Canvas效果变换
Canvas 画布 从前面我们已经知道了 Canvas 类可以绘出 各种形状. 这里学习一下Canvas 类的变换效果(平移,旋转等) 首先需要了解一下Canvas 画布, 我们用Canvas.Dra ...
- CSS图片水平垂直居中
Html: <div id="></img></div> </div> CSS: #MainContent { display:table-c ...
- Mongo学习---mongo入门1
Docker安装以及设置mongo用户 docker pull mongo (拉取镜像 默认最新版本) docker images (查看镜像) docker run -p 27017:27017 - ...
- Deepin系统安装mysql教程及相关操作
Deepin系统安装mysql教程及相关操作 1.安装MySQL sudo apt-get install mysql-server,期间需要输入两次密码,root账户的密码. sudo apt-ge ...
- Java中选择排序,冒泡排序,插入排序,快速排序
一:冒泡法排序 //冒泡排序 注:从小到大排 //特点:效率低,实现简单 //思想:每一趟将待排序序列中最大元素移到最后,剩下的为新的待排序序列,重复上述步骤直到排完所有元素. 这只是冒泡排序 ...
- map的使用注意事项
map是无序的,每次打印出来的map都会不一样,它不能通过index获取,而必须通过key获取 map的长度是不固定的,也就是和slice一样,也是一种引用类型 内置的len函数同样适用于map,返回 ...
- React框架简介
React的基本认识 Facebook开源的一个js库,一个用来动态构建用户界面的js库 英文官网,中文官网 React的特点 Declarative(声明式编码),Component-Based(组 ...