JQuery EasyUI 加载两次url的原因分析及解决方案
作者:bea
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"
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>
有用 | 无用
<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>
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- js匿名函数的调用示例(形式多种多样)
- javascript对中文按照拼音排序代码
- JS辨别访问浏览器判断是android还是ios系统
- JS中实现简单Formatter函数示例代码
- 用JavaScript实现使用鼠标画线的示例代码
- [原创]推荐10款最热门jQuery UI框架
- js选择并转移导航菜单示例代码
- js遍历子节点子元素附属性及方法
- jQuery实现返回顶部功能适合不支持js的浏览器
- 用循环或if语句从json中取数据示例
- 通过jquery 获取URL参数并进行转码
- 浅谈JavaScript中定义变量时有无var声明的区别
- [将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
- 使用node.js半年来总结的 10 条经验
- 推荐 21 款优秀的高性能 Node.js 开发框架
- 根据当前时间在jsp页面上显示上午或下午
- JQuery中使用Ajax赋值给全局变量失败异常的解决方法
- JS中如何判断传过来的JSON数据中是否存在某字段
- jquery中$(#form :input)与$(#form input)的区别