大数据加载效率慢

  源代码如下

重中之重代码如下所示:

小编找了就像的地点修改,测验后结果依旧同样。未有任何意义,恐怕是跟我的本子分歧,作者的是1.3版,作者是的1.33版。

onLoadSuccess: function (data) {
  if (data.total == 0) {
    var body = $(this).data().datagrid.dc.body2;
    body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1>暂无数据</h1></td></tr>');
  }
}

废话十分的少说了,直接给大家贴代码了。

好了,未来是10000条记下啊,IE8只用1秒不到加载成功。改成三千条记下,只要1~2秒加载成功。

上面给大家介绍 jQuery EasyUI datagrid
无记录时,扩充”暂无数据”提示

function _createTable(data){
//对汉字进行转码
$.each(data.data, function(i, obj){
var eventName = unescape(obj.eventName);
var levelName = unescape(obj.levelName);
obj.eventName = eventName;
obj.levelName = levelName;
});
//数据处理
var column = [
{title:'ID',field:'id',width:100,align:'left'},
{title:'级别编号',field:'levelNum',width:100,align:'left'},
{title:'级别名称',field:'levelName',width:100,align:'left',
formatter:function(data){
if(data == 'null'){
return "";
}else{
return data;
}
},editor:{type:'text'}
},
{title:'活动id',field:'eventId',width:60,align:'left',rowspan:1, hidden:true},
{title:'创建人id',field:'createUid',width:100,align:'left'},
{title:'创建时间',field:'createDate',width:150,align:'left'}
];
var root = listToDataGrid(data);
var title = "头像列表";
_getDataGrid("eventListTable", title, 'id', column).datagrid('loadData', root);
}
function _getDataGrid(id, aTitle, pk, columns){
var el = $('#' + id + '');
if (el.data('datagridInit') !== 'finished'){
var lastIndex;
el.datagrid({
columns:[columns],
title:aTitle,
width:1000,
nowrap: false,
idField:pk,
rownumbers:true,
striped:true,
singleSelect: true,
collapsible:true,
sortName: 'levelNum',
pagination:false,
pageSize: pageSize,
sortOrder: 'asc',
remoteSort: false,
idField:'id',
rownumbers:true,
toolbar:[{
id:'btnmodify',
text:'修改',
iconCls:'icon-cut',
handler:_showDialog(id)
},'-',{
id:'btnremove',
text:'删除',
iconCls:'icon-cancel',
handler:_removeEvent(id)
}],
onDblClickCell:function(rowIndex, field, value){
lastIndex=rowIndex;
$('#'+id).datagrid('endEdit',rowIndex);
$('#'+id).datagrid('beginEdit',rowIndex);
var oldordering = value;
$("input.datagrid-editable-input").val(oldordering).bind("blur",function(evt){
debugger;
var dataArry = $('#'+id).datagrid('getSelections');
eventPlayer.setLevelName($(this).val(), dataArry[0].id);
$('#'+id).datagrid('endEdit',lastIndex);
}).bind("keypress",function(evt){
if(evt.keyCode==13){
debugger;
var dataArry = $('#'+id).datagrid('getSelections');
eventPlayer.setLevelName($(this).val(), dataArry[0].id);
$('#'+id).datagrid('endEdit',lastIndex);
}
}).focus();
lastIndex=rowIndex;
}
});
//注册分页查询方法
var p = $('#' + id).datagrid('getPager');
$pagination(p, {
onSelectPage: function(pageNumber, pageSize1){
getEventPlayerDataList();
}
});
el.data('datagridInit', 'finished');
}

如下:

88必发官网,不能够隐蔽分页导航容器,能够用chrome开拓工具大概firebug查看分页导航容器的体制和原始datagrid
table表格的涉及。

/// 最近一次使用编辑行 一切正常
///<summary>
///初始化数据容器
///</summary>
function InitGrid(){
var lastIndex;
$("#grid").datagrid({
url:'',
loadMsg:'数据加载中,请稍后......',
border:false,
fitColumns:true,
remoteSort:false,
onDblClickRow:function(rowIndex,rowData){
lastIndex=rowIndex;
$("#grid").datagrid('endEdit',rowIndex);
$("#grid").datagrid('beginEdit',rowIndex);
var oldordering = rowData.ordering;
$("input.datagrid-editable-input").val(oldordering).bind("blur",function(evt){
setOrder($(this).val(),eval("rowData."+actid));
$("#grid").datagrid('endEdit',lastIndex);
}).bind("keypress",function(evt){
if(evt.keyCode==13){
setOrder($(this).val(),eval("rowData."+actid));
$("#grid").datagrid('endEdit',lastIndex);
}
}).focus();
lastIndex=rowIndex;
},
frozenColumns:[[
{field:'ck',checkbox:true}
]],
toolbar:[
{text:'刷新',iconCls:'icon-reload',handler:function(){
Reload();
}},
{text:'添加',iconCls:'icon-add',handler:add},
{text:'编辑',iconCls:'icon-edit',handler:edit},
{text:'删除',iconCls:'icon-cut',handler:del},
{text:'清选',iconCls:'icon-undo',handler:function(){
$("#grid").datagrid("clearSelections");
}}
],
columns:[[
{field:actid,title:'序号',width:17,align:'center',sortable:true,sorter:sortId},
{field:'jobName',title:'招骋职位',width:40,align:'center',sortable:true},
{field:'jobKind',title:'类型',width:60,align:'center',sortable:true},
{field:'requireNum',title:'人数',width:12,align:'center',sortable:true},
{field:'email',title:'邮箱',width:34,align:'center',sortable:true},
{field:'ordering',title:'排序',width:10,align:'center',sortable:true,editor:{type:'numberbox'}},
{field:'lastTime',title:'截止时间',width:40,align:'center',sortable:true},
{field:'act',title:'操作',width:40,align:'center',formatter:act}
]]
});
}

笔者不得不百度,google化解情势,发掘一篇小说说改

88必发官网 1

如上所述是小编给大家介绍的jQuery Easyui
DataGrid点击有些单元格即步向编辑状态难题移开后保存数据,希望对我们全部援助,借使大家有任何疑问请给自家留言,作者会及时苏醒我们的。在此也特别谢谢我们对台本之家网址的支撑!

//1.3.3版本是这样的,其它版本也是这句代码 
$(_1e0).html(_1e4.join("")); 

 在 datagrid 的onLoadSuccess事件进展操作:

您恐怕感兴趣的文章:

  • jquery Easyui
    Datagrid完结批量操作(编辑,删除,增多)
  • jQuery Easyui
    datagrid三番五次发送一次呼吁难点
  • easyui datagrid
    大数据加载功效慢,优消除决方法(推荐)
  • jQuery
    EasyUI编辑DataGrid用combobox完结多种联合浮动
  • jQuery
    EasyUI学习课程之datagrid点击列表头排序
  • 大数据加载效率慢。jQuery
    Easyui学习课程之达成datagrid在未曾数据时展现相关提醒内容
  • jQuery
    EasyUI框架中的Datagrid数据表格组件结构详解
  • jQuery easyUI datagrid
    扩展求和总计行的兑今世码
  • jquery easyui
    datagrid落成扩张,修改,删除方法总括
  • 简要介绍EasyUI datagrid editor
    combogrid寻找框的贯彻
  • 详解EasyUi控件中的Datagrid

改为: