求助求助求助

Question

用easy UI 取到所有数据放在了页面上用的是easyui 的datagrid 但是取出来有800+条数据，页面加载太慢，所以请大佬帮助怎么实现那种下拉然后加载刷新啊。
这是datagrid取数据部分代码
function loadreimbursement() {
var check; //判断按钮是否选中
if($("#check").is(":checked")) {
check = 1;
} else {
check = 0;
} $("#remilist").datagrid({
rownumbers: true,
singleSelect: true,
queryParams: {
"ischeck": check
},
method: 'post',
url: "method/reimdepartstatus.php",
columns: [
[{
hidden: "true",
field: 'id',
title: ''
},
{
field: 'name',
title: '申请人',
width: 100
},
{
field: 'pname',
title: '项目名称',
width: 100
},
{
field: 'type_name',
title: '报销类型',
width: 100
},
{
field: 'content',
title: '报销内容',
width: 100
},
{
field: 'invoice',
title: '发票类型',
width: 100
},
{
field: 'price',
title: '报销费用',
width: 100
},
{
field: 'time',
title: '申请日期',
width: 100
},
{
field: 'departstatus',
title: '部门经理申请状态',
width: 130
},
{
field: 'status',
title: '总经理申请状态',
width: 120
},
{
field: 'isexecute',
title: '发放状态',
width: 100
},
{
field: 'accessory',
title: '附件',
width: 50,
align: 'center',
formatter: function(value, rec) { var btn;
if(value == "" || value == null) {
btn = "无附件";
} else {
btn = "<a class='easyui-linkbutton' onclick='showaccessory(" + value + ")' href='javascript:void(0)'>查看</a>";
}
return btn;
} }
]
]
}); }

Answer 1

这个问题，我没遇到过，我用的easyui中的datagrid查1万条，都不慢，感觉速度还行，你可以这样试试，先加载datagrid表格，等表格加载成功之后，在使用$("#id").datagrid("loadData",data);//data为数据库中查询出来的数据
$("#id").datagrid({//这个是表格
url: '',
loadMsg: '数据加载中,请稍后......',
border: false,
fit: true, //自适应大小
fitColumns: true,
remoteSort: false,
singleSelect: true,
loadFilter:pagerFilter,
showFooter:true,
rownumbers:true,
});
//再进行加载数据
$.ajax({
beforeSend: function(xhr) {
xhr.setRequestHeader('Authorization', 'Bearer ' + $.session.get("token"));
},
url: "",//你的url
type: "post",
contentType: 'application/json;charset=utf-8',
dataType: "json",//返回类型
data: JSON.stringify(data),//要传递的数据
success: function(data){//得到的查询出的数据
$("#id").datagrid("loadData",data);
},
async: false,
error: function(er) {

}
});就这样，你可以试试。

Answer 2

你知道分页吗？如果用的ie之类浏览器数据量大肯定很卡还有列配置width，不要自适应,这样会降低性能
nowrap设置为true，autoRowHeight设置为false可以改善性能Web开发学习资料推荐
JavaScript apply与call的用法及区别
Web前端开发教程

Answer 3

亲测并未解决加载效率依然很慢，返回的数据json拼接处一个个dom节点页面加载肯慢啊，感觉只有懒加载，下拉刷新加载可以提高效率

Answer 4

怎么搞啊
给你的datagrid中添加分页属性
 pageList: [10, 20, 30, 50],//这个是rows
   pagination: true,//分页栏  ..
再每次查询的时候将 ，page和rows 传递过去//page为当前第几页，rows是查询多少条数据，
后台得到页和行数信息，就可以在原来sql语句中后面添加上如果你的查询出来的数据中的id和行号一致，则用
 就用ID between rows*（page-1） and rows*page 就是第10行到第20行 
如果不一致，可以使用
select top m * //先取出前m行
from tablename
where id not in( //过滤掉前n行
  select top n id
  from tablename
)
具体实现看你怎么用了，前台传递行号和页号
var options = $("#id" ).datagrid("getPager" ).data("pagination" ).options;
    var curr = options.pageNumber;
    var size = options.pageSize;
恩，就是这么多了。