I'm trying to use the new scrollview2 to have virtual scrolling along with row detail drill-down. The "Virtual Scroll View(Detail Rows)" is very close. But what I found is the row expander icons/links do not show up unless you have rownumbers set to true. The exact same code with rownumbers:false and using "view: detailview" works (but without the virtual scrolling).
scrollview2 works as long as rownumbers:true is set.
To prove this, I recreated the source from the "Virtual Scroll View (Detail Rows)" example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-scrollview2.js"></script>
</head>
<body>
<div style="margin-bottom:10px">
<select onchange="load(this.value)">
<option value="remote">Load Remote Data</option>
<option value="local">Load Local Data</option>
</select>
<table id="tt" title="DataGrid - VirtualScrollView with Detail Rows" style="width:700px;height:300px" data-options="
view:scrollview2,rownumbers:true,singleSelect:true,
url:'datagrid27_getdata.php',
autoRowHeight:false,pageSize:50">
<thead>
<tr>
<th field="inv" width="80">Inv No</th>
<th field="date" width="90">Date</th>
<th field="name" width="80">Name</th>
<th field="amount" width="80" align="right">Amount</th>
<th field="price" width="80" align="right">Price</th>
<th field="cost" width="90" align="right">Cost</th>
<th field="note" width="100">Note</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$(function(){
$('#tt').datagrid({
detailFormatter: function(rowIndex, rowData){
return '<table><tr>' +
'<td style="border:0;padding-right:10px">' +
'<p>Name: ' + rowData.name + '</p>' +
'<p>Amount: ' + rowData.amount + '</p>' +
'</td>' +
'<td style="border:0">' +
'<p>Price: ' + rowData.price + '</p>' +
'<p>Cost: ' + rowData.cost + '</p>' +
'</td>' +
'</tr></table>';
}
});
});
function loadLocal(){
var rows = [];
for(var i=1; i<=8000; i++){
var amount = Math.floor(Math.random()*1000);
var price = Math.floor(Math.random()*1000);
rows.push({
inv: 'Inv No '+i,
date: $.fn.datebox.defaults.formatter(new Date()),
name: 'Name '+i,
amount: amount,
price: price,
cost: amount*price,
note: 'Note '+i
});
}
$('#tt').datagrid('loadData', rows);
}
function load(mode){
if (mode == 'local'){
loadLocal();
} else {
$('#tt').datagrid({
url:'datagrid27_getdata.php'
});
}
}
</script>
<style type="text/css">
.datagrid-header-rownumber,.datagrid-cell-rownumber{
width:40px;
}
</style>
</div>
</body>
</html>
Note: The 'Load Remote Data' doesn't work in my example because of the browser blocking the AJAX request to fetch data due to same-origin. But it works for the 'Load Local Data'.
All I need to is change "rownumbers:true" to "rownumbers:false" and the row expander icon is not displayed and doesn't work any more.
Any suggestions?
