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>
