|
Title: Datagrid is slow for 200 records with detailview.Also using layout for two datag Post by: std on June 28, 2014, 07:09:52 PM Hi I am new in using jquery easyUI. It looks very attractive to me and thats what started using this for my application. But the datagrid is taking time to load the even 100+100 rows with 14 columns. I have two datagrid top and bottom in a layout. I have used detailView for each row to display the row details. Can anyone help me out on this. I am really getting problem on this. My code is below:
<html> ..... .... <script> function cellStyler(value,row,index){ if (value == 'F1'){ return 'background-color:#ffee00;color:red;'; } else if (value == 'FO'){ return 'background-color:lightgray;color:black;'; } } function reloadPage() { $('#dg').datagrid('reload'); } function formatToolTip(value,row,index){ return '<span data-p1='+index+' class="easyui-tooltip">' + value + '</span>'; } function createTooltip(){ $('#dg').datagrid('getPanel').find('.easyui-tooltip').each(function(){ var index = parseInt($(this).attr('data-p1')); $(this).tooltip({ content: $('<div></div>'), onUpdate: function(cc){ var row = $('#dg').datagrid('getRows')[index]; document.getElementById('qvFlt').innerHTML = row.flt; document.getElementById('qvOrig').innerHTML = row.orig; document.getElementById('qvDest').innerHTML = row.dest; document.getElementById('qvSec').innerHTML = row.sec; var content = '<ul>'; content += '<li>FLGHT# : '+row.flt+'</li>'; content += '<li>ORIG : '+row.orig+'</li>'; content += '<li>DEST : '+row.dest+'</li>'; content += '<li>SECTOR : '+row.sec+'</li>'; content += '</ul>'; cc.panel({ width:200, content:content }); }, position:'right' }); }); } function doSearch(){ $('#dg').datagrid('load',{ flt1: $('#flt').val(), orig1: $('#orig').val() }); } function populateTextArea(){ var row = $('#dg').datagrid('getSelected'); if (row){ alert('open new dialog ='+row); } } $(function(){ $('#dg').datagrid({ onSelect:function(rowIndex, rowData){ populateTextArea(); }, onBeforeLoad: function(param){ }, onLoadSuccess: function(data){ createTooltip(); } }); /// $('#cc2').combo({ required:false, editable:false, multiple:true }); $('#sp').appendTo($('#cc2').combo('panel')); $('#sp input').click(function(){ var my_text = ''; var my_val = ''; $('#sp input').each(function(){ if ($(this).is(":checked")) { var v = $(this).val(); var s = $(this).next('span').text(); my_text == '' ? my_text = s : my_text += ','+s; my_val == '' ? my_val = v : my_val += ','+v; } }); $('#cc2').combo('setValue', my_val).combo('setText', my_text); }); /// $('#dg').datagrid({ onRowContextMenu:function(e){ e.preventDefault(); $('#mm').menu('show', { left: e.pageX, top: e.pageY }); } }); }); function formatOrig(val,row){ if (val == 'KORD'){ return '<span style="color:green;">'+val+'</span>'; } else { return val; } } </script> <style type="text/css"> .textStyle { font-family :Consolas; color:#000000; font-size:12px; font-weight:bold; line-height:22px; border:1px solid #ccc; background-color:rgb(211,211,211); } .datagrid-row-over td{ background:#FFFF99; } .datagrid-row-selected td{ background:#a8bbce; } .datagrid-cell{ font-family :Consolas; color:#000000; font-size:14px; font-weight:normal; } .textStyle_Page_Header_FrstPrt{ font-family:Consolas; color:#000000; font-size:12px; font-weight:bold; width:100%; } </style> </head> <body class="easyui-layout" data-options="fit:true" > <div class="easyui-layout" data-options="fit:true" style='height:100%;width:100%'> <div data-options="region:'north'" class="north" style='height:43%;background-color: #c0c0c0'> <table style='width:100%;border-spacing:0px;padding: 0px;' class='textStyle_Page_Header_ComPrt'> <tr> <td id="boxTypeIdentifier" vAlign="middle" style="background-color: #c0c0c0; cursor: hand;" onclick="openReleaseNotes()"> <B><SPAN class=textStyle_Page_Header_FrstPrt>DispatchView</SPAN></B></SPAN><BR> <SPAN class=textStyle_Page_Header_FrstPrt>Dispatch 2.0.2</SPAN></SPAN> </td> <td> <table> <tr> <td bgcolor="#95b8e7"><a href="#" class="easyui-linkbutton" style='width:80px;'>ACARS <sup><span style="color:red;font-weight:bold;">31</span></sup></a></td> <td bgcolor="#95b8e7"><a href="#" class="easyui-linkbutton" style='width:80px;'>IROPS <sup><span style="color:green;font-weight:bold;">31</span></sup></a></td> <td bgcolor="#95b8e7"><a href="#" class="easyui-linkbutton" style='width:80px;'>AC/MEL <sup><span style="color:green;font-weight:bold;">31</span></sup></a></td> <td bgcolor="#95b8e7"><a href="#" class="easyui-linkbutton" style='width:80px;'>FLIGHT <sup><span style="color:green;font-weight:bold;">31</span></sup></a></td> <td bgcolor="#95b8e7"><a href="#" class="easyui-linkbutton" style='width:80px;'>WX <sup><span style="color:red;font-weight:bold;">102</span></sup></a></td> <td bgcolor="#95b8e7"><a href="#" class="easyui-linkbutton" style='width:80px;'>NOTAMS <sup><span style="color:gray;font-weight:bold;">1</span></sup></a></td> <td bgcolor="#95b8e7"><a href="#" class="easyui-linkbutton" style='width:80px;'>ATC <sup><span style="color:red;font-weight:bold;">82</span></sup></a></td> <td bgcolor="#95b8e7"><a href="#" class="easyui-linkbutton" style='width:80px;'>SPECI <sup><span style="color:red;font-weight:bold;">22</span></sup></a></td> <td bgcolor="#95b8e7"><a href="#" class="easyui-linkbutton" style='width:80px;'>PIREP <sup><span style="color:black;font-weight:bold;">24</span></sup></a></td> <td bgcolor="#95b8e7"><a href="#" class="easyui-linkbutton" style='width:80px;'>TRACK <sup><span style="color:red;font-weight:bold;">5</span></sup></a></td> <td bgcolor="#95b8e7"><a href="#" class="easyui-linkbutton" style='width:80px;'>OTHER <sup><span style="color:green;font-weight:bold;">200</span></sup></a></td> </tr> </table> </td> <td> Welcome </td> <td id="boxTypeIdentifier" vAlign="middle" style="background-color: #c0c0c0; cursor: hand;" onclick="openReleaseNotes()"> <B><SPAN class=textStyle_Page_Header_FrstPrt>25 JUN 19:43:01 Z</SPAN></B></SPAN> </td> <td> <a href="#" class="easyui-linkbutton" iconCls="icon-mini-back" plain="true" alt='Go back to Main Screen'></a></td> <td> <a href="#" class="easyui-linkbutton" iconCls="icon-mini-logout" plain="true"></a></td> </tr> </table> </div> <div data-options="region:'south',split:false" style='height:24%; background-color: rgb(211,211,211);'>Last Refresh Time:15:02</div> <div data-options="region:'east',split:true,collapsed:true" title="Details" style='width:130px'> <div id='quickView' width='100%' style="border:px solid black; margin: 2px"> <table cellspacing=2 width='100%'> <tr> <td bgcolor='#eaf2ff' width='50%'>Flight: </td> <td id='qvFlt' width='50%'></td> </tr> <tr> <td bgcolor='#eaf2ff' width='50%'>ORIG</td> <td id='qvOrig' width='50%'></td> </tr> <tr> <td bgcolor='#eaf2ff' width='50%'>DEST</td> <td id='qvDest' width='50%'></td> </tr> <tr> <td bgcolor='#eaf2ff' width='50%'>SECTOR</td> <td id='qvSec' width='50%'></td> </tr> </table> </div> </div> <div data-options="region:'center'" style='height:100%' > <div class="easyui-layout" data-options="fit:true,fitColumns:true"> <div data-options="region:'center',border:false" > <table id="dg" data-options="url:'data/datagrid_data1.json', method:'get', singleSelect:true, fit:true, fitColumns:true, rownumbers: true, remoteSort:false, rowStyler: function(index,row){ if(index%2 ==0) { return 'background-color:#e5ecf3;color:#000000;'; } else { return 'background-color:#ffffff;color:#000000;'; } }, view: detailview, detailFormatter:function(index,row){ return '<div>this is a test message</div>' } " toolbar="#tb1"> <thead> <!-- title="Search or Filter flight" iconCls="icon-search" --> <tr> <th data-options="field:'flt',sortable:true" width="10%" formatter="formatToolTip">Flt#<br>Radio</th> <th data-options="field:'orig',sortable:true" width="10%" >Orig</th> <th data-options="field:'dest',sortable:true,align:'right'" width="10%">Dest</th> <th data-options="field:'stat',sortable:true,align:'right'" width="10%">Stat</th> <th data-options="field:'fpwb',sortable:true" width="10%" >FP/WB</th> <th data-options="field:'notes',sortable:true,align:'center'" width="10%">Notes<br>Amends</th> <th data-options="field:'std',sortable:true,align:'center'" width="10%">STD<br>STD</th> <th data-options="field:'sta',sortable:true,align:'center'" width="10%">STA<br>STA</th> <th data-options="field:'etd',sortable:true,align:'center'" width="10%">ETD<br>OUT</th> <th data-options="field:'eof',sortable:true,align:'center'" width="10%">EOF<br>OFF</th> <th data-options="field:'txo',sortable:true,align:'center'" width="10%">TXO P<br>TXO A</th> <th data-options="field:'eon',sortable:true,align:'center'" width="10%">EON<br>ON</th> <th data-options="field:'eta',sortable:true,align:'center'" width="10%">ETA<br>IN</th> <th data-options="field:'txi',sortable:true,align:'center'" width="10%">TXI P<br>TXI A</th> <th data-options="field:'rem',sortable:true,align:'center'" width="10%">REMT<br>REMF</th> <th data-options="field:'surp',sortable:true,align:'center'" width="10%">SURP T<br>ACF T</th> <th data-options="field:'alt',sortable:true,align:'center'" width="10%">Alt 1<br>Alt 2</th> <th data-options="field:'edue',sortable:true,align:'center'" width="10%">EDUE<br>MDT/ET</th> <th data-options="field:'alttrack',sortable:true,align:'center'" width="10%">TO ALT<br>TRACK</th> <th data-options="field:'nose',sortable:true,align:'center'" width="10%">Nose<br>Reg</th> <th data-options="field:'crew',sortable:true,align:'center',styler:cellStyler" width="10%">Crew</th> <th data-options="field:'burn',sortable:true,align:'center'" width="10%">Burn<br>Time</th> <th data-options="field:'zfw',sortable:true,align:'center'" width="10%">ZFW T<br>ZFW</th> <th data-options="field:'os',sortable:true,align:'center'" width="10%">OS</th> <th data-options="field:'idst',sortable:true,align:'center'" width="10%">I DST<br>I ALT</th> <th data-options="field:'rdue',sortable:true,align:'center'" width="10%">R Due<br>POR</th> <th data-options="field:'sec',sortable:true,align:'center'" width="10%">SEC</th> <th data-options="field:'relFltCheckBox',checkbox:true"></th> </tr> </thead> </table> <div id="tb1" style="padding:0px" class='textStyle'> <table> <tr > <td valign="middle">Flight#:</td><td valign="middle"><input id="flt1" size='8'></td> <td valign="middle">Orig Date:</td><td valign="middle"><input id="orig1" size='12'></td> <td valign="middle">Orig:</td><td valign="middle"><input id="orig1" size='8'></td> <td valign="middle">Dest:</td><td valign="middle"><input id="orig1" size='8'></td> <td valign="middle">Arpt:</td><td valign="middle"><input id="orig1" size='8'></td> <td valign="middle">Nose:</td><td valign="middle"><input id="orig1" size='8'></td> <td valign="middle">Dest:</td><td valign="middle"><input id="orig1" size='8'></td> <td valign="middle"> <select id="cc" class="easyui-combobox" name="filters" style="width:120px;"> <option value="aa">Filters</option> <option>Pre Blk Out</option> <option>Pre Tlk Off</option> <option>Airborne</option> <option>Post Landing</option> <option>Red Zone</option> <option>Delayed Arvl</option> <option>Delayed Dep</option> <option>IROP</option> </select> </td> <td> <select id="cc2" style="width:120px"></select> <div id="sp"> <div style="color:#99BBE8;background:#fafafa;padding:5px;">Sectors</div> <input type="checkbox" name="lang" value="CHI01"><span>CHI01</span><br/> <input type="checkbox" name="lang" value="CHI11"><span>CHI11</span><br/> <input type="checkbox" name="lang" value="CHI21"><span>CHI21</span> </div> </td> <td><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="reloadPage()"></a></td> <td valign="middle"><a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a></td> <td> <a href="#" class="easyui-linkbutton" iconCls="icon-print" plain="true"></a> <a href="javascript:exportToExcel();" class="easyui-linkbutton" iconCls="icon-mini-excel" plain="true"></a> <a href="#" class="easyui-linkbutton" iconCls="icon-mini-pdf" plain="true"></a> </td> </tr> </table> </div> <!-- Right click menu --> <div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="javascript:alert('Alerts')">Alerts</div> <div onclick="javascript:alert('Notes/Amends')">Notes/Amends</div> <div onclick="javascript:alert('Send Message')">Send Message</div> <div onclick="javascript:alert('Weather')">Weather</div> <div onclick="javascript:alert('Notam')">Notam</div> <div onclick="javascript:alert('History')" data-options="iconCls:'icon-save'">History</div> </div> <!-- End --> </div> <div data-options="region:'south',split:true,border:true,title:' '" style='height:130%'> <table id="unreleasedFlightGrid" class="easyui-datagrid" data-options="url:'data/datagrid_data1.json', method:'get', singleSelect:true, view: bufferview, pageSize:100, fit:true, fitColumns:true, rownumbers: true, remoteSort:false, rowStyler: function(index,row){ if(index%2 ==0) { return 'background-color:#e5ecf3;color:#000000;'; } else { return 'background-color:#ffffff;color:#000000;'; } }," > <thead> <tr> <th data-options="field:'flt',sortable:true" width="10%" formatter="formatToolTip">Flt#<br>Radio</th> <th data-options="field:'orig',sortable:true" width="10%" >Orig</th> <th data-options="field:'dest',sortable:true,align:'right'" width="10%">Dest</th> <th data-options="field:'stat',sortable:true,align:'right'" width="10%">Stat</th> <th data-options="field:'fpwb',sortable:true" width="10%" >FP/WB</th> <th data-options="field:'notes',sortable:true,align:'center'" width="10%">Notes<br>Amends</th> <th data-options="field:'std',sortable:true,align:'center'" width="10%">STD<br>STD</th> <th data-options="field:'sta',sortable:true,align:'center'" width="10%">STA<br>STA</th> <th data-options="field:'etd',sortable:true,align:'center'" width="10%">ETD<br>OUT</th> <th data-options="field:'eof',sortable:true,align:'center'" width="10%">EOF<br>OFF</th> <th data-options="field:'txo',sortable:true,align:'center'" width="10%">TXO P<br>TXO A</th> <th data-options="field:'eon',sortable:true,align:'center'" width="10%">EON<br>ON</th> <th data-options="field:'eta',sortable:true,align:'center'" width="10%">ETA<br>IN</th> <th data-options="field:'txi',sortable:true,align:'center'" width="10%">TXI P<br>TXI A</th> <th data-options="field:'rem',sortable:true,align:'center'" width="10%">REMT<br>REMF</th> <th data-options="field:'surp',sortable:true,align:'center'" width="10%">SURP T<br>ACF T</th> <th data-options="field:'alt',sortable:true,align:'center'" width="10%">Alt 1<br>Alt 2</th> <th data-options="field:'edue',sortable:true,align:'center'" width="10%">EDUE<br>MDT/ET</th> <th data-options="field:'alttrack',sortable:true,align:'center'" width="10%">TO ALT<br>TRACK</th> <th data-options="field:'nose',sortable:true,align:'center'" width="10%">Nose<br>Reg</th> <th data-options="field:'crew',sortable:true,align:'center',styler:cellStyler" width="10%">Crew</th> <th data-options="field:'burn',sortable:true,align:'center'" width="10%">Burn<br>Time</th> <th data-options="field:'zfw',sortable:true,align:'center'" width="10%">ZFW T<br>ZFW</th> <th data-options="field:'os',sortable:true,align:'center'" width="10%">OS</th> <th data-options="field:'idst',sortable:true,align:'center'" width="10%">I DST<br>I ALT</th> <th data-options="field:'rdue',sortable:true,align:'center'" width="10%">R Due<br>POR</th> <th data-options="field:'sec',sortable:true,align:'center'" width="10%">SEC</th> <th data-options="field:'relFltCheckBox',checkbox:true"></th> </tr> </thead> </table> </div> </div> </div> </div> <style type="text/css"> /* .datagrid-header-rownumber,.datagrid-cell-rownumber{ width:35px; } */ </style> </body> </html> |