46
|
General Category / EasyUI for jQuery / Re: SUBGRID ROWEDITING - onClickCell not working
|
on: April 28, 2023, 01:18:28 AM
|
Please refer to this example. <!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery EasyUI</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.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 type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-detailview.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.edatagrid.js"></script> <script> var data = [ { "productid": "FI-SW-01", "unitcost": 10.00, "status": "P", "listprice": 16.50, "attr1": "Large", "itemid": "EST-1" }, { "productid": "K9-DL-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-2" }, { "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Venomless", "itemid": "EST-3" }, { "productid": "RP-LI-02", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Green Adult", "itemid": "EST-5" }, { "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 58.50, "attr1": "Tailless", "itemid": "EST-6" }, { "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "With tail", "itemid": "EST-7" }, { "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 93.50, "attr1": "Adult Female", "itemid": "EST-8" }, { "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 93.50, "attr1": "Adult Male", "itemid": "EST-9" }, { "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Rattleless", "itemid": "EST-4" }, { "productid": "AV-CB-01", "unitcost": 92.00, "status": "P", "listprice": 193.50, "attr1": "Adult Male", "itemid": "EST-10" } ]; var detailData = [{ "orderid": "1004", "linenum": "2", "itemid": "EST-12", "quantity": "1", "unitprice": "18.50" }, { "orderid": "1013", "linenum": "1", "itemid": "EST-12", "quantity": "1", "unitprice": "18.50" }, { "orderid": "1014", "linenum": "1", "itemid": "EST-12", "quantity": "1", "unitprice": "18.50" }]
$(function () { $('#dg').datagrid({ title: 'DataGrid - DetailView', width: 800, height: 350, singleSelect: true, nowrap: false, fitColumns: true, data: data, columns: [[ { field: 'itemid', title: 'Item ID', width: 80 }, { field: 'productid', title: 'Product ID', width: 100, sortable: true }, { field: 'listprice', title: 'List Price', width: 80, align: 'right', sortable: true }, { field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', sortable: true }, { field: 'attr1', title: 'Attribute', width: 150, sortable: true }, { field: 'status', title: 'Status', width: 60, align: 'center' } ]], view: detailview, detailFormatter: function (index, row) { return '<div style="padding:2px;position:relative;"><table class="ddv"></table></div>'; }, onExpandRow: function (index, row) { var ddv = $(this).datagrid('getRowDetail', index).find('table.ddv'); ddv.edatagrid({ singleSelect:true, rownumbers:true, columns: [[ { field: 'orderid', title: 'Order ID', width: 200,editor:'textbox' }, { field: 'quantity', title: 'Quantity', width: 100, align: 'right',editor:'numberbox' }, { field: 'unitprice', title: 'Unit Price', width: 100, align: 'right',editor:'numberbox' } ]], data:detailData }) $('#dg').datagrid('fixDetailRowHeight', index); } }); }); </script> </head>
<body>
<table id="dg"></table> </body>
</html>
|
|
|
47
|
General Category / EasyUI for jQuery / Re: ROWEDITING: how to copy date from one column in editmode to next column?
|
on: April 25, 2023, 07:15:43 PM
|
Please refer to this example. <!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title>Row Editing in DataGrid - 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> var data = [ { subpart: 'subprt1', termin: '03/04/2023' }, { subpart: 'subprt2', termin: '03/05/2023' }, { subpart: 'subprt3', termin: '03/06/2023' }, { subpart: 'subprt4', termin: '03/07/2023' } ] $(function () { var editIndex = undefined; var dg = $('#dg').datagrid({ columns: [[ { field: 'subpart', title: 'Subpart', width: 100, editor: 'textbox' }, { field: 'termin', title: 'Termin Kunde', width: 200, editor: { type: 'datebox', options: { icons: [{ iconCls: 'icon-ok', handler: function (e) { var val = $(e.data.target).datebox('getValue'); var ed = dg.datagrid('getEditor', { index: editIndex, field: 'planung' }); $(ed.target).datebox('setValue', val); } }] } } }, { field: 'planung', title: 'Planung OPS', width: 200, editor: 'label', editor: 'datebox' } ]], data: data, singleSelect: true, onClickCell: function (index, field) { dg.datagrid('endEdit', editIndex); if (editIndex != index) { dg.datagrid('selectRow', index).datagrid('beginEdit', index); var ed = dg.datagrid('getEditor', { index: index, field: field }); if (ed) { ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus(); } editIndex = index; } } }) }) </script> </head>
<body> <table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:700px;height:auto"> </table>
</body>
</html>
|
|
|
49
|
General Category / EasyUI for jQuery / Re: Input box size in easyui-textbox
|
on: April 19, 2023, 11:28:51 PM
|
This is the live example. <!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> </head>
<body> <div> <input class="easyui-textbox" data-options="labelAlign:'right',labelWidth:'250px'" label="Tipo[S/A]:<i>opcional</i>" value="SS" autoSize="true" style="min-width:300px;"> </div> <div> <input class="easyui-textbox" data-options="labelAlign:'right',labelWidth:'250px',validType:'length[0,20]'" label="Descrição resumida:<i>opcional</i>" value="Descrição resumida" autoSize="true" style="min-width:300px;"> </div> </body>
</html>
|
|
|
50
|
General Category / EasyUI for jQuery / Re: EasyUI Datagrid Export
|
on: April 18, 2023, 05:12:19 AM
|
The better way to export excel is to use the XLSX library. Here is the example shows how to export excel from the datagrid. var items = $('#dg').datagrid('getRows'); const wb = XLSX.utils.book_new(); const sheet = XLSX.utils.json_to_sheet(items); XLSX.utils.book_append_sheet(wb, sheet, 'Sheet1'); XLSX.writeFile(wb, 'table1.xlsx');
|
|
|
51
|
General Category / EasyUI for jQuery / Re: Datagrid: possible to have groupview and a subgrid together?
|
on: April 18, 2023, 05:10:08 AM
|
The 'detailFormatter' function is available to add a detail row in the groupview. Please download the 'datagrid-groupview.js' file from https://www.jeasyui.com/extension/datagridview.php. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery EasyUI</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 type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-detailview.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-groupview.js"></script> <script> var data = [ {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"}, {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-2"}, {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-3"}, {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-5"}, {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-6"}, {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-7"}, {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-8"}, {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-9"}, {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-4"}, {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-10"} ]; var detailData = [ {"orderid":"orderid1","quantity":10,"unitcost":100}, {"orderid":"orderid2","quantity":20,"unitcost":200} ];
$(function(){ $('#dg').datagrid({ title:'DataGrid - GroupView', width:800, height:350, rownumbers:true, remoteSort:false, nowrap:false, fitColumns:true, singleSelect:true, data:data, columns:[[ {field:'e',expander:true,fixed:true,width:30}, {field:'productid',title:'Product ID',width:100,sortable:true}, {field:'listprice',title:'List Price',width:80,align:'right',sortable:true}, {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true}, {field:'attr1',title:'Attribute',width:150,sortable:true}, {field:'status',title:'Status',width:60,align:'center'} ]], groupField:'productid', view: groupview, groupFormatter:function(value, rows){ return value + ' - ' + rows.length + ' Item(s)'; }, detailFormatter:function(index,row){ return '<div style="padding:2px;position:relative;"><table class="ddv"></table></div>'; }, onExpandRow: function(index,row){ var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv'); ddv.datagrid({ data:detailData, fitColumns:true, singleSelect:true, rownumbers:true, loadMsg:'', height:'auto', columns:[[ {field:'orderid',title:'Order ID',width:200}, {field:'quantity',title:'Quantity',width:100,align:'right'}, {field:'unitprice',title:'Unit Price',width:100,align:'right'} ]], onResize:function(){ $('#dg').datagrid('fixDetailRowHeight',index); }, onLoadSuccess:function(){ setTimeout(function(){ $('#dg').datagrid('fixDetailRowHeight',index); },0); } }); $('#dg').datagrid('fixDetailRowHeight',index); } }); }); </script> </head> <body> <table id="dg"></table> </body> </html>
|
|
|
54
|
General Category / EasyUI for jQuery / Re: Input box size in easyui-textbox
|
on: April 17, 2023, 07:17:15 PM
|
Please set the 'autoSize' property to true. Make sure to update to the latest version. <div> <input class="easyui-textbox" data-options="labelAlign:'right',labelWidth:'250px'" label="Tipo[S/A]:<i>opcional</i>" value="SS" autoSize="true" style="min-width:300px;"> </div> <div> <input class="easyui-textbox" data-options="labelAlign:'right',labelWidth:'250px',validType:'length[0,20]'" label="Descrição resumida:<i>opcional</i>" value="Descrição resumidaDescrição resumida" autoSize="true" style="min-width:300px;"> </div>
|
|
|
56
|
General Category / EasyUI for jQuery / Re: sub menu not fire onShow
|
on: April 05, 2023, 07:38:38 PM
|
The 'onShow' event fires only when the top menu displays. If you want to change the default position of the menu, please try to set the 'position' function for the menu. $('#mm').menu({ position: function(target,left,top){ return {left:left,top:top} } })
|
|
|
60
|
General Category / EasyUI for jQuery / Re: Default century in datebox
|
on: March 29, 2023, 07:23:11 PM
|
This is the default behaviour of the javascript object Date. To solve this issue, please override the $.fn.datebox.defaults.parser function to fill with '20' as the prefix while typing only 2 digital number. $.extend($.fn.datebox.defaults, { parser: function (s) { var CDate = $.fn.calendar.defaults.Date; if ($(this).data('datebox')) { CDate = $(this).datebox('calendar').calendar('options').Date; } if (!s) return new CDate(); var ss = s.split('/'); var m = parseInt(ss[0], 10); var d = parseInt(ss[1], 10); var y = parseInt(ss[2], 10); if (!isNaN(y) && !isNaN(m) && !isNaN(d)) { if (y < 100) { y = 2000 + y; } return new CDate(y, m - 1, d); } else { return new CDate(); } } })
|
|
|
|