对easyui datagrid进行扩展,当滚动条拉直最下面就异步加载数据。
以下方法是通用的,只要把datagrid定义为全局的即可,其他部分的代码不用进行修改!
可以把以下代码放入到一个单独的js文件,然后再需要的页面引入即可!
$(function(){ try{
$(".datagrid-body").scroll(function(){
var sheight = $(this)[0].scrollHeight;
var top=$(this)[0].scrollTop;
var height=$(this).height();
//判断是否到达底部
document.title='top:'+(top+height)+' heigth:'+(sheight-20);
if((top+height)+20==sheight){
document.title=datagrid.datagrid('options').url;
//请求json
//page;// 当前页
//rows;// 每页显示记录数
//拼接表单的值
var url=datagrid.datagrid('options').url;
url+='?params=xxx';
var params='';
$("#searchForm").find('input').each(function(index){
var obj=$(this);
if(obj.prop('name')!=''&&obj.val()!=''){
params+='&'+obj.prop('name')+'='+obj.val();
}
});
//获取页码、每次默认加载10条
var num=10;
//获取行数
var row=datagrid.datagrid('getRows').length; var page=(row/num)+1; //求出下一页
//$.post();
url+=params+'&page='+page+'&rows=10'; //请求数据
$.post(url,function(data){
var json=$.parseJSON(data).rows; for(var i=0;i<json.length;i++){
//自动拼接字段和赋值 var row='';
for(var item in json[i]){
row+='"'+item+'":'+'"'+json[i][item]+'",';
}
row=row.substring(0,row.length-1);
row='{'+row+'}';
row=$.parseJSON(row);
datagrid.datagrid("appendRow",row);
}
}); }else{
document.title='滚动条没有到达底部';
}
});
}
catch(e){
alert(e);
} });
对easyui datagrid进行扩展,当滚动条拉直最下面就异步加载数据。的更多相关文章
- easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题
在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...
- jquery easyui easyui-treegrid 使用异步加载数据
jquery easyui easyui-treegrid 使用异步加载数据 jquery easyui easyui-treegrid 异步请求 >>>>>>&g ...
- WP8_当滚动到滚动条的70%时,自动加载数据效果实现
Touch.FrameReported += Touch_FrameReported; void Touch_FrameReported(object sender, TouchFrameEven ...
- easyui datagrid plunges 扩展 插件
项目使用 springmvc4.x spring4.x hibernate4.x easyui 为了便于开发,扩展了easyui 的 datagrid 功能,下面直接贴上扩展代码: /** * ...
- 解决easyui datagrid加载数据时,checkbox列没有根据checkbox的值来确定是否选中
背景: 昨天帮朋友做一个easyui datagrid的小实例时,才发现easyui datagrid的checkbox列,没有根据值为true或false来选中checkbox,当时感觉太让人失 ...
- Easyui datagrid加载数据时默认全选的问题
问题描述: 最近使用 Easyui datagrid 展示数据,之前一直使用很正常,今天出现了一个怪异问题 加载数据后,只要点击选中列 ck 的任意行或多行,再刷新时整个datagrid的所有数据都 ...
- jquery easyui使用(三)······datagrid加载数据(已解决)
<div id="table_Data"> </div> $("#table_Data").datagrid({ toolbar: '# ...
- (转帖)关于easyui中的datagrid在加载数据时候报错:无法获取属性"Length"的值,对象为null或未定义
结贴说明: 很感谢sp1234等人的热心帮忙和提醒,现在我主要说明下问题所在: 首先我在独立的js文件中,直接把测试数据loaddata进去datagrid是没有问题的.var kk = {" ...
- winform DataGridView控件判断滚动条是否滚动到当前已加载的数据行底部 z
http://www.zuowenjun.cn/post/2015/05/20/162.html 判断 DataGridView控件滚动条是否滚动到当前已加载的数据行底部,其实方法很简单,就是为Dat ...
随机推荐
- openwrt上网配置的一些理解(四)
这次要解决的问题是3g上网和wan口上往可以随意切换,当然能够叠加也是好事,不过这不是我关心的.下面还是修改3个文件network,firewall,multiwan.首先在network中加入界面配 ...
- OD: Big_Endian vs Little_Endian
经调试,Windows 下为 Little_Endian,OD 中堆栈数据区的 (dword)0xAABB0102,0x02 存储在低地址,0x01 存储在高地址. 内容来自:http://blog. ...
- C#生成高清缩略图
/// <SUMMARY> /// 为图片生成缩略图 /// </SUMMARY> /// <PARAM name="phyPath">原图片的 ...
- android sax解析xml 文件 动态加载标题
要解决一个问题 : 问题描述为 把标题动态的加载到 listView子布局中 我们首先通过 java程序写一个把标题写到xml文件的程序.这个程序会在以后讲解. 现在截图 已经写好的xm文件格式如下 ...
- java下socket传文件
package cn.stat.p4.ipdemo; import java.io.BufferedReader; import java.io.BufferedWriter; import java ...
- NodeJs简单七行爬虫--爬取自己Qzone的说说并存入数据库
没有那么难的,嘿嘿,说起来呢其实挺简单的,或者不能叫爬虫,只需要将自己的数据加载到程序里再进行解析就可以了,如果说你的Qzone是向所有人开放的,那么就有一个JSONP的接口,这么说来就简单了,也就不 ...
- 现有有N个学生的数据记录,每个记录包括学号、姓名、三科成绩。 编写一个函数input,用来输入一个学生的数据记录。 编写一个函数print,打印一个学生的数据记录。 在主函数调用这两个函数,读取N条记录输入,再按要求输出。 N<100
#include <iostream> using namespace std; struct student {char num[100]; char name[100]; int ...
- php魔术方法——构造函数和析构函数
php有一类很神奇的方法,这些方法是保留方法,通常不会在外部被显式调用,他们使用双下划线(__)开头,他们被称为魔术方法(Magic Methods).php官方也不建议定义其他双下划线开头的方法. ...
- 兼容IE的渐变
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=, startColorstr=#1471da, endColorstr ...
- TCP释放连接时为什么time_wait状态必须等待2MSL时间
为什么上图中的A在TIME-WAIT状态必须等待2MSL时间呢? 第一,为了保证A发送的最后一个ACK报文能够到达B.这个ACK报文段有可能丢失,因而使处在LAST-ACK状态的B收不到对已发送的FI ...