Title: Column width bug with loadData to datagrid
Post by: Wojak on February 17, 2024, 03:45:44 PM
I found a problem, when I use the "loadData" function in the datagrid then the width of the columns disappears and it makes the minimum width for the columns. I don't know if there is something wrong in the datagrid code because I don't see anything incorrect. A quick fix I found as .datagrid() $('#dg').datagrid('clearSelections').datagrid('loadData', { total: 0, rows: [] });
$('#dg').datagrid('clearSelections').datagrid('loadData', { total: 0, rows: [] }).datagrid();
$('#dg').datagrid({ columns: [[ { field: 'nazwa', title: 'Nazwa', width: '160px', halign: 'center' }, { field: 'opis', title: 'Opis', width: '160px', halign: 'center' }, { field: 'typ', title: 'Typ', width: '160px', halign: 'center', styler: function (value, row, index) { if (!row.idProdukt > 0) { return 'background:#FFC300;'; } } }, { field: 'nrKatalogowy', title: 'Nr katalogowy', width: '160px', halign: 'center' }, { field: 'producent', title: 'Producent', width: '120px', halign: 'center', styler: function (value, row, index) { if (!row.idProducent > 0) { return 'background:#FFC300;'; } } }, { field: 'ilosc', title: 'Ilość', width: '50px', halign: 'center', align: 'right' }, { field: 'jm', title: 'J.m.', width: '50px', halign: 'center', styler: function (value, row, index) { if (!row.idJm > 0) { return 'background:#FFC300;'; } } }, { field: 'cena', title: 'Cena', width: '80px', halign: 'center' }, { field: 'rabat', title: 'Rabat', width: '50px', halign: 'center', align: 'right', formatter: function (value, row, index) { return (value || 0) + '%'; } }, { field: 'wartosc', title: 'Wartość', width: '80px', halign: 'center' }, { field: 'waluta', title: 'Waluta', width: '60px', halign: 'center', styler: function (value, row, index) { if (!row.idWaluta > 0) { return 'background:#FFC300;'; } } }, ]], idField: 'id', rownumbers: true, singleSelect: true, });
Title: Re: Column width bug with loadData to datagrid
Post by: jarry on February 21, 2024, 12:05:57 AM
Please look at this code, it works fine. <!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title>jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script> $(function () { $('#dg').datagrid({ columns: [[ { field: 'nazwa', title: 'Nazwa', width: '160px', halign: 'center' }, { field: 'opis', title: 'Opis', width: '160px', halign: 'center' }, { field: 'typ', title: 'Typ', width: '160px', halign: 'center', styler: function (value, row, index) { if (!row.idProdukt > 0) { return 'background:#FFC300;'; } } }, { field: 'nrKatalogowy', title: 'Nr katalogowy', width: '160px', halign: 'center' }, { field: 'producent', title: 'Producent', width: '120px', halign: 'center', styler: function (value, row, index) { if (!row.idProducent > 0) { return 'background:#FFC300;'; } } }, { field: 'ilosc', title: 'Ilość', width: '50px', halign: 'center', align: 'right' }, { field: 'jm', title: 'J.m.', width: '50px', halign: 'center', styler: function (value, row, index) { if (!row.idJm > 0) { return 'background:#FFC300;'; } } }, { field: 'cena', title: 'Cena', width: '80px', halign: 'center' }, { field: 'rabat', title: 'Rabat', width: '50px', halign: 'center', align: 'right', formatter: function (value, row, index) { return (value || 0) + '%'; } }, { field: 'wartosc', title: 'Wartość', width: '80px', halign: 'center' }, { field: 'waluta', title: 'Waluta', width: '60px', halign: 'center', styler: function (value, row, index) { if (!row.idWaluta > 0) { return 'background:#FFC300;'; } } }, ]], idField: 'id', rownumbers: true, singleSelect: true }); }) function loadData() { $('#dg').datagrid('clearSelections').datagrid('loadData', { total: 0, rows: [] }); } </script> </head>
<body> <button onclick="loadData()">LoadData</button> <table id="dg"></table>
</body>
</html>
|