Title: [Solved] autosize DataGrid row numbers disrupted by ComboGrid
Post by: argumentum on February 06, 2018, 10:36:00 PM
<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 preview is at http://code.reloado.com/epuwul3/edit#html,live (http://code.reloado.com/epuwul3/edit#html,live) ( won't run due to the missing php ) If the ComboGrid is removed, the row numbers autosize. Actually, just removing the class="easyui-combogrid" is sufficient for autosize to work as expected. And that is just an example, I have many more controls in the toolbar. Thanks
Title: Re: autosize DataGrid row numbers disrupted by ComboGrid
Post by: stworthy on February 07, 2018, 01:04:20 AM
Please use this code instead. 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).datagrid('getPanel').addClass('dg-autorownumber'); $(target).data('datagrid').ss.add([ ['.dg-autorownumber .datagrid-cell-rownumber', width + 'px'], ['.dg-autorownumber .datagrid-header-rownumber', width + 'px'] ]); setTimeout(function() { $(target).datagrid('fitColumns'); }, 0); } } })
|