Datagrid's editor too slowly with 160 rows data!
Howto improve the performance? Thanks very much!
The 160 rows data extended from datagrid_data1.json.
The code below modified from "Cache Editor for DataGrid" in the Live Demo.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cache Editor for DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/jquery-easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/jquery-easyui/demo/demo.css">
<script type="text/javascript" src="/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Cache Editor for DataGrid</h2>
<p>This example shows how to cache the editors for datagrid to improve the editing speed.</p>
<div style="margin:20px 0;"></div>
<table id="dg" class="easyui-datagrid" title="Cache Editor for DataGrid" style="width:700px;height:auto"
data-options="
iconCls: 'icon-edit',
singleSelect: true,
toolbar: '#tb',
url: 'datagrid_data.json',
method: 'get',
onLoadSuccess: onLoadSuccess,
onClickRow: onClickRow
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productname',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
</tr>
</thead>
</table>
<div id="tb" style="height:auto">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
</div>
<script type="text/javascript">
(function($){
function getCacheContainer(t){
var view = $(t).closest('div.datagrid-view');
var c = view.children('div.datagrid-editor-cache');
if (!c.length){
c = $('<div class="datagrid-editor-cache" style="position:absolute;display:none"></div>').appendTo(view);
}
return c;
}
function getCacheEditor(t, field){
var c = getCacheContainer(t);
return c.children('div.datagrid-editor-cache-' + field);
}
function setCacheEditor(t, field, editor){
var c = getCacheContainer(t);
c.children('div.datagrid-editor-cache-' + field).remove();
var e = $('<div class="datagrid-editor-cache-' + field + '"></div>').appendTo(c);
e.append(editor);
}
var editors = $.fn.datagrid.defaults.editors;
for(var editor in editors){
var opts = editors[editor];
(function(){
var init = opts.init;
opts.init = function(container, options){
var field = $(container).closest('td[field]').attr('field');
var ed = getCacheEditor(container, field);
if (ed.length){
ed.appendTo(container);
return ed.find('.datagrid-editable-input');
} else {
return init(container, options);
}
}
})();
(function(){
var destroy = opts.destroy;
opts.destroy = function(target){
if ($(target).hasClass('datagrid-editable-input')){
var field = $(target).closest('td[field]').attr('field');
setCacheEditor(target, field, $(target).parent().children());
} else if (destroy){
destroy(target);
}
}
})();
}
})(jQuery);
</script>
<script type="text/javascript">
var editIndex = undefined, merges = new Array();
function onLoadSuccess(data){
$('#dg').datagrid('unselectAll');
var rowsLength = data.rows.length;
if (rowsLength > 0){
var curRow, firstRow = data.rows[0], product, counter = 0;
for (var rowIndex = 0; rowIndex <= rowsLength; rowIndex++){
if (rowIndex < rowsLength) curRow = data.rows[rowIndex];
if (rowIndex == rowsLength || curRow.productname != product){
merges[merges.length] = {"id":product, "index":rowIndex-counter, "rowspan":counter};
firstRow = curRow; counter = 1;
} else {
counter++;
}
product = curRow.productname;
}
mergeCells($('#dg'), merges);
$('#dg').datagrid('unselectAll');
}
}
function mergeCells(grid, merges, id){
if (arguments.length < 2){
return false;
} else if (arguments.length < 3){
id = null;
}
for (var index = merges.length - 1; index >= 0; index--){
if (id === null || id == merges[index].id){
grid.datagrid('mergeCells',{
field: 'productname',
index: merges[index].index,
rowspan: merges[index].rowspan
});
}
}
}
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
$('#dg').datagrid('endEdit', editIndex);
$.each(merges, function(index, m){
if (m.index == editIndex || (m.index>=editIndex-m.rowspan-1 && m.index<=editIndex)){
$('#dg').datagrid('mergeCells',{
field:'productname',
index:m.index,
rowspan:m.rowspan
})
}
})
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickRow(index){
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
function accept(){
if (endEditing()){
$('#dg').datagrid('acceptChanges');
}
}
function reject(){
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
function getChanges(){
var rows = $('#dg').datagrid('getChanges');
alert(rows.length+' rows are changed!');
}
</script>
</body>
</html>
