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 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
很酷的javascript loading效果代码
Jun 18 Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 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
php 函数使用方法与函数定义方法
2010/05/09 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
分享PHP header函数使用教程
2013/09/05 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
别了 JavaScript中的isXX系列
2012/08/01 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
Python简单实现子网掩码转换的方法
2016/04/13 Python
用Python实现KNN分类算法
2017/12/22 Python
Python返回数组/List长度的实例
2018/06/23 Python
python实现linux下抓包并存库功能
2018/07/18 Python
Python 多维List创建的问题小结
2019/01/18 Python
李宁官方网店:中国运动品牌
2017/11/02 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
教师个人的自我评价分享
2014/01/02 职场文书
父亲生日宴会答谢词
2014/01/10 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
布达拉宫导游词
2015/02/02 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
SpringBoot集成Redis的思路详解
2021/10/16 Redis