JQuery EasyUI 加载两次url的原因分析及解决方案


Posted in Javascript onAugust 18, 2014

1、传统方式

<span style="font-size:18px;">$(function () { 
var url = "../Source/Query/jhDataQry.ashx?action=query"; 
$(dg).datagrid({ 
url: url, 
queryParams: { 
qsrq: qsrq, 
zzrq: zzrq 
} 
}); 
}) 

<table id="DataGrid" class="easyui-datagrid" fit="true" border="false" toolbar="#TBar" pagination="true" 
data-options="pageSize:20,pageList: [10, 20, 30, 40, 50,100,5000],idField:'chjid',sortName:'chjbh', queryParams: { 'action': 'query'}" 
rownumbers="true" singleSelect="true" url="../Source/JiChu/chjdoc.ashx"> 
<thead> 
<tr> 
</tr> 
</thead> 
</table></span>

2、原因分析及解决方案

html代码中利用class声明了datagrid,导致easyUI解析class代码的时候先解析class声明中的datagrid,这样组件就请求了一次url;然后又调用js初始化代码请求一次url。这样导致了重复加载,解决的方法就是只用一种初始化方法来声明easyUI组件以避免重复的提交请求,即删除html中的class声明(class="easyui-datagrid"),修改后的代码如下:

<span style="font-size:18px;"><table id="DataGrid" fit="true" border="false" toolbar="#TBar" pagination="true" 
data-options="pageSize:20,pageList: [10, 20, 30, 40, 50,100,5000],idField:'chjid',sortName:'chjbh'" 
rownumbers="true" singleSelect="true" url="../Source/JiChu/chjdoc.ashx"> 
<thead> 
<tr> 
</tr> 
</thead> 
</table></span>
Javascript 相关文章推荐
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
AngularJS Module方法详解
Dec 08 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
angularJs的ng-class切换class
Jun 23 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
javascript ajax的5种状态介绍
Aug 18 #Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 #Javascript
js判断浏览器是否支持html5
Aug 17 #Javascript
一段非常简单的js判断浏览器的内核
Aug 17 #Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 #Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 #Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 #Javascript
You might like
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
JS 去除Array中的null值示例代码
2013/11/20 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
Python制作简易注册登录系统
2016/12/15 Python
python编写分类决策树的代码
2017/12/21 Python
python3处理含有中文的url方法
2018/05/10 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
python Gabor滤波器讲解
2020/10/26 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
PyQt实现计数器的方法示例
2021/01/18 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
类的核心特性有哪些
2014/01/01 面试题
类、抽象类、接口的差异
2016/06/13 面试题
工程师岗位职责规定
2014/02/26 职场文书
美术课外活动总结
2014/07/08 职场文书
大学毕业论文致谢词
2015/05/14 职场文书