This example shows how to cache the editors for datagrid to improve the editing speed.
Item ID | Product | List Price | Unit Cost | Attribute | Status |
---|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Cache Editor for DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../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_data1.json', method: 'get', onClickRow: onClickRow "> <thead> <tr> <th data-options="field:'itemid',width:80">Item ID</th> <th data-options="field:'productid',width:100, formatter:function(value,row){ return row.productname; }, editor:{ type:'combobox', options:{ valueField:'productid', textField:'productname', method:'get', url:'products.json', required:true } }">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; function endEditing(){ if (editIndex == undefined){return true} if ($('#dg').datagrid('validateRow', editIndex)){ var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'}); var productname = $(ed.target).combobox('getText'); $('#dg').datagrid('getRows')[editIndex]['productname'] = productname; $('#dg').datagrid('endEdit', editIndex); 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>