<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>Expand row in DataGrid to show details - jQuery EasyUI Demo</title>
<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.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"> </div>
<div>
If the <b>ComboGrid is removed</b>, the row numbers autosize.<br><br>
Actually, just removing the <b>class="easyui-combogrid"</b> is sufficient.<br><br>
</div>
</div>
<div id="tbSampleToolbar" style="padding: 4px">
<span style="white-space: nowrap"> Sample ComboGrid:
<select id="tbSample" class="easyui-combogrid" data-options="
width: 100,
panelWidth: 500,
panelHeight: 150,
multiple: true,
editable: false,
idField: 'id',
textField: 'id',
columns: [[
{field:'id',title:'ID',width:50},
{field:'name',title:'Name',width:120}
]],
fitColumns: true,
data:
{'total':3,'rows':[
{'id':'id1','name':'Name One'},
{'id':'id2','name':'Name Two'},
{'id':'id3','name':'Name Three'}
]}
">
</select>
</span>
<a class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="javascript:console.log('Search');">Search</a>
<div class="menu-sep"></div>
<a class="easyui-linkbutton" iconCls="icon-clear" plain="true" onclick="javascript:console.log('Clear');">Clear</a>
</div>
<table id="dgTest">
<thead frozen="true">
<tr>
<th field="itemid" width="180">Item ID</th>
</tr>
</thead>
<thead>
<tr>
<th field="productid">Product ID</th>
<th field="listprice" align="right">List Price</th>
<th field="unitcost" align="right">Unit Cost</th>
<th field="attr1">Attribute</th>
<th field="status" align="center">Status</th>
</tr>
</thead>
</table>
<br><br><br>
< ?php // datagrid8_getdata.php <br>
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;<br>
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;<br>
$items = array();<br>
for($i=1; $i<=$rows; $i++){<br>
$index = $i+($page-1)*$rows;<br>
$items[] = array(<br>
'itemid' => $index,<br>
'productid' => 'productid ' . $index,<br>
'listprice' => 'listprice ' . $index,<br>
'unitcost' => 'unitcost ' . $index,<br>
'attr1' => 'attr1 ' . $index,<br>
'status' => 'status ' . $index,<br>
);<br>
}<br>
$result = array();<br>
$result['total'] = 100000;<br>
$result['rows'] = $items;<br>
echo json_encode($result);<br>
? ><br>
<script type="text/javascript">
$(function() {
$('#dgTest').datagrid({
view: myview,
url: 'datagrid8_getdata.php',
toolbar: '#tbSampleToolbar',
pagination: true,
sortName: 'itemid',
sortOrder: 'desc',
rownumbers: true,
singleSelect: true,
fitColumns: false,
detailFormatter: function(index, row) {
return '<div id="ddv-' + index + '" style="padding:5px 0"></div>';
},
onExpandRow: function(index, row) {
$('#ddv-' + index).panel({
border: false,
cache: false,
href: 'datagrid21_getdetail.php?itemid=' + row.itemid,
onLoad: function() {
$('#dgTest').datagrid('fixDetailRowHeight', index);
}
});
$('#dgTest').datagrid('fixDetailRowHeight', index);
}
});
});
var myview = $.extend({}, $.fn.datagrid.defaults.view, {
onAfterRender: function(target) {
$.fn.datagrid.defaults.view.onAfterRender.call(this, target);
var opts = $(target).datagrid('options');
if (opts.rownumbers) {
var lastTr = opts.finder.getTr(target, null, 'last');
var tmp = $('<div style="position:absolute;padding:0 6px;left:-999999"></div>').appendTo('body');
tmp.html(lastTr.find('div.datagrid-cell-rownumber').html());
var width = tmp._outerWidth();
tmp.remove();
$(target).data('datagrid').ss.add([
['.datagrid-cell-rownumber', width + 'px'],
['.datagrid-header-rownumber', width + 'px']
]);
setTimeout(function() {
$(target).datagrid('fitColumns');
}, 0);
}
}
})
</script>
</body>
</html>
, the row numbers autosize.
is sufficient for autosize to work as expected.
And that is just an example, I have many more controls in the toolbar.
